Skip to main content

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.

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

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