Version : 10.x

useQuery()

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

note

Les hooks fournis par @trpc/react-query sont une fine surcouche autour de @tanstack/react-query. Pour des informations détaillées sur les options et les modèles d'utilisation, consultez leur documentation sur les requêtes.

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

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

Puisque UseTRPCQueryOptions étend UseQueryOptions de @tanstack/react-query, vous pouvez utiliser ici toutes leurs options comme enabled, refetchOnWindowFocus, etc. Nous proposons également des options spécifiques à trpc qui vous permettent d'activer ou désactiver certains comportements au niveau de chaque procédure :

trpc.ssr: Si vous avez ssr: true dans votre configuration globale, vous pouvez définir cette option sur false pour désactiver le SSR pour cette requête spécifique. Notez que l'inverse n'est pas possible : vous ne pouvez pas activer le SSR sur une procédure si votre configuration globale est définie sur false.
trpc.abortOnUnmount: Surcharge la configuration globale pour activer ou désactiver l'annulation des requêtes lors du démontage du composant.
trpc.context: Ajoute des métadonnées supplémentaires pouvant être utilisées dans les Liens.

astuce

Si vous devez définir des options mais ne souhaitez pas transmettre d'input, vous pouvez passer undefined à la place.

Vous remarquerez que vous bénéficiez de l'auto-complétion sur l'input basée sur ce que vous avez défini dans votre schéma input côté backend.

Exemple

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

Exemple​

Exemple