useLiveQuery()

[KATT]

• React-only hook to watch a query using subscriptions
• Constraint: that input & output on subscription() contains a prop called cursor

Example code

Server

// ...
import { OutputWithCursor } from '@trpc/react';

router
    .subscription('postsLive', {
      input: z.object({
        cursor: z.string().nullable(),
      }),
      resolve({ input }) {
        const { cursor } = input;

        return trpc.subscriptionPullFactory<OutputWithCursor<Post[]>>({
          intervalMs: 1000,
          pull(emit) {
            const posts = await getPostsFromDb();
            const newCursor = hash(posts);
            if (newCursor !== cursor) {
              emit.data({ data: posts, cursor: newCursor });
            }
          },
        });
      },
    });	    
  });

Client

  function MyComponent() {
    const postsQuery = hooks.useLiveQuery(['postsLive', {}]);

    return <pre>{JSON.stringify(postsQuery.data ?? null, null, 4)}</pre>;
  }

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

chat – ./examples/next-ssg-chat

🔍 Inspect: https://vercel.com/trpc/chat/rkl75idl1/tmp.trpc.io
✅ Preview: https://chat-git-feature-live-query.tmp.trpc.io

hello-world – ./examples/next-hello-world

🔍 Inspect: https://vercel.com/trpc/hello-world/c84xhbax3/tmp.trpc.io
✅ Preview: https://hello-world-git-feature-live-query.tmp.trpc.io