useQuery()

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

useQuery är den primära hooken för datahämtning. Den fungerar liknande som @tanstack/react-query's useQuery, men med några trpc-specifika alternativ och extra funktioner som strömning.

notering

För djupgående information om alternativ och användningsmönster, se TanStack Query-dokumentationen om queries.

Signatur

tsx
function useQuery(
  input: TInput | SkipToken,
  opts?: UseTRPCQueryOptions;
)
interface UseTRPCQueryOptions
  extends UseQueryOptions {
  trpc: {
    ssr?: boolean;
    abortOnUnmount?: boolean;
    context?: Record<string, unknown>;
  }
}

tsx
function useQuery(
  input: TInput | SkipToken,
  opts?: UseTRPCQueryOptions;
)
interface UseTRPCQueryOptions
  extends UseQueryOptions {
  trpc: {
    ssr?: boolean;
    abortOnUnmount?: boolean;
    context?: Record<string, unknown>;
  }
}

Eftersom UseTRPCQueryOptions utökar @tanstack/react-query's UseQueryOptions kan du använda alla deras alternativ här som enabled, refetchOnWindowFocus, etc. Vi har också några trpc-specifika alternativ som låter dig välja in eller ut ur vissa beteenden på per-procedure-nivå:

• trpc.ssr: Om du har ssr: true i din globala konfiguration kan du sätta detta till false för att inaktivera SSR för denna specifika fråga. Observera att detta inte fungerar åt andra hållet - du kan inte aktivera SSR på en procedure om din globala konfiguration är satt till false.

• trpc.abortOnUnmount: Åsidosätt den globala konfigurationen och välj om frågor ska avbrytas vid avmontering.

• trpc.context: Lägg till extra metadata som kan användas i Länkar.

tips

Om du behöver sätta några alternativ men inte vill skicka någon input, kan du skicka undefined istället.

Du kommer att märka att du får autofyllning på input baserat på vad du har satt i ditt input-schema på backend:en.

Exempel på användning

Backend code

server/routers/_app.ts
tsx
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
export const appRouter = t.router({
  // Create procedure at path 'hello'
  hello: t.procedure
    // using zod schema to validate and infer input values
    .input(
      z
        .object({
          text: z.string().nullish(),
        })
        .nullish(),
    )
    .query((opts) => {
      return {
        greeting: `hello ${opts.input?.text ?? 'world'}`,
      };
    }),
});

server/routers/_app.ts
tsx
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
export const appRouter = t.router({
  // Create procedure at path 'hello'
  hello: t.procedure
    // using zod schema to validate and infer input values
    .input(
      z
        .object({
          text: z.string().nullish(),
        })
        .nullish(),
    )
    .query((opts) => {
      return {
        greeting: `hello ${opts.input?.text ?? 'world'}`,
      };
    }),
});

components/MyComponent.tsx
tsx
import { trpc } from '../utils/trpc';
export function MyComponent() {
  // input is optional, so we don't have to pass second argument
  const helloNoArgs = trpc.hello.useQuery();
  const helloWithArgs = trpc.hello.useQuery({ text: 'client' });
  return (
    <div>
      <h1>Hello World Example</h1>
      <ul>
        <li>
          helloNoArgs ({helloNoArgs.status}):{' '}
          <pre>{JSON.stringify(helloNoArgs.data, null, 2)}</pre>
        </li>
        <li>
          helloWithArgs ({helloWithArgs.status}):{' '}
          <pre>{JSON.stringify(helloWithArgs.data, null, 2)}</pre>
        </li>
      </ul>
    </div>
  );
}

components/MyComponent.tsx
tsx
import { trpc } from '../utils/trpc';
export function MyComponent() {
  // input is optional, so we don't have to pass second argument
  const helloNoArgs = trpc.hello.useQuery();
  const helloWithArgs = trpc.hello.useQuery({ text: 'client' });
  return (
    <div>
      <h1>Hello World Example</h1>
      <ul>
        <li>
          helloNoArgs ({helloNoArgs.status}):{' '}
          <pre>{JSON.stringify(helloNoArgs.data, null, 2)}</pre>
        </li>
        <li>
          helloWithArgs ({helloWithArgs.status}):{' '}
          <pre>{JSON.stringify(helloWithArgs.data, null, 2)}</pre>
        </li>
      </ul>
    </div>
  );
}

Strömmande svar med async generators

info

Från och med v11 stöder vi nu strömmande queries när du använder httpBatchStreamLink.

När du returnerar async generators i en query kommer du att:

• Få iteratorns resultat i data-egenskapen som en array som uppdateras när svaret kommer in

• status kommer att vara success så snart den första databiten mottagits.

• fetchStatus-egenskapen kommer att vara fetching tills sista databiten mottagits.

Exempel

server/routers/_app.ts
tsx
import { publicProcedure, router } from './trpc';
const appRouter = router({
  iterable: publicProcedure.query(async function* () {
    for (let i = 0; i < 3; i++) {
      await new Promise((resolve) => setTimeout(resolve, 500));
      yield i;
    }
  }),
});
export type AppRouter = typeof appRouter;

server/routers/_app.ts
tsx
import { publicProcedure, router } from './trpc';
const appRouter = router({
  iterable: publicProcedure.query(async function* () {
    for (let i = 0; i < 3; i++) {
      await new Promise((resolve) => setTimeout(resolve, 500));
      yield i;
    }
  }),
});
export type AppRouter = typeof appRouter;

components/MyComponent.tsx
tsx
import { trpc } from '~/utils';
export function MyComponent() {
  const result = trpc.iterable.useQuery();
  return (
    <div>
      {result.data?.map((chunk, index) => (
        <Fragment key={index}>{chunk}</Fragment>
      ))}
    </div>
  );
}

components/MyComponent.tsx
tsx
import { trpc } from '~/utils';
export function MyComponent() {
  const result = trpc.iterable.useQuery();
  return (
    <div>
      {result.data?.map((chunk, index) => (
        <Fragment key={index}>{chunk}</Fragment>
      ))}
    </div>
  );
}

result-egenskaper under strömning:

status	fetchStatus	data
'pending'	'fetching'	undefined
'success'	'fetching'	[]
'success'	'fetching'	[1]
'success'	'fetching'	[1, 2]
'success'	'fetching'	[1, 2, 3]
'success'	'idle'	[1, 2, 3]