yekta•2w ago

Prefetch and useQuery usage on tRPC 11 and NextJS 15

The example in the documentation works when using useSuspenseQuery but hydrated data isn't there if I use useQuery: https://trpc.io/docs/client/react/server-components Keeping everything else the same in the exampleSo in the last section instead of this:

'use client';
import { trpc } from '~/trpc/client';
export function ClientGreeting() {
  const [data] = trpc.hello.useSuspenseQuery();
  return <div>{data.greeting}</div>;
}

'use client';
import { trpc } from '~/trpc/client';
export function ClientGreeting() {
  const [data] = trpc.hello.useSuspenseQuery();
  return <div>{data.greeting}</div>;
}

Using this results in data not being available even though it was prefetched and wrapped in HydrateClient

'use client';
import { trpc } from '~/trpc/client';
export function ClientGreeting() {
  const {data} = trpc.hello.useQuery();
  return <div>{data.greeting}</div>;
}

'use client';
import { trpc } from '~/trpc/client';
export function ClientGreeting() {
  const {data} = trpc.hello.useQuery();
  return <div>{data.greeting}</div>;
}

I'm wondering why is this? I want to prefetch in some cases, don't prefetch in others when using that client component. Using Tanstack Query by itself, that is how it works. If I prefetch and hydrate above the client component using Tanstack Query by itself, data is available right away to useQuery in the client component. I'm confused is to why it doesn't seem to work with tRPC 11 and NextJS 15 via trpc.hello.useQuery(). Is this expected? If so, can someone explain the reason behind it?

Set up with React Server Components | tRPC

This guide is an overview of how one may use tRPC with a React Server Components (RSC) framework such as Next.js App Router.

0 Replies

No replies yetBe the first to reply to this messageJoin

Prefetch and useQuery usage on tRPC 11 and NextJS 15

Did you find this page helpful?