yekta Posts - Answer Overflow

yekta

Explore posts from servers

•Created by yekta on 2/9/2025 in #❓-help

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?

2 replies

RRunPod

•Created by yekta on 9/8/2024 in #⚡｜serverless

Problems with serverless trying to use instances that are not initialized

6 replies

Gaming

Programming