Client Side Sorting

Here we have an API that sorts based on the orderBy field. By wrapping our Collection in a Query that sorts, we can ensure we maintain the correct order after pushing new posts.

Our example code starts sorting by title. Try adding some posts and see them inserted in the correct sort order.

getPosts

NewPost

PostList

UserList

import { useSuspense } from '@data-client/react';
import { getPosts } from './getPosts';
import NewPost from './NewPost';

export default function PostList({ author }: Props) {
  const posts = useSuspense(getPosts, {
    author,
    orderBy: 'title',
    group: 'react',
  });
  return (
    <div>
      {posts.map(post => (
        <div key={post.pk()}>{post.title}</div>
      ))}
      <NewPost author={author} />
    </div>
  );
}
interface Props {
  author: string;
}

🔴 Live Preview

Store▶