Prefetch and useQuery usage on tRPC 11 and NextJS 15

The example in the documentation works when using

useSuspenseQuery

useSuspenseQuery

but hydrated data isn't there if I use

useQuery

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

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

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()

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.

Prefetch and useQuery usage on tRPC 11 and NextJS 15

The example in the documentation works when using

useSuspenseQuery

useSuspenseQuery

but hydrated data isn't there if I use

useQuery

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

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>;
}

useQuery

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()

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.

Prefetch and useQuery usage on tRPC 11 and NextJS 15

Similar Threads

Prefetch and useQuery usage on tRPC 11 and NextJS 15

Similar Threads

Similar Threads

Similar Threads