Aller au contenu principal
Version : 11.x

Configurer l'intégration React Query

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 →

1. Installer les dépendances​

Les dépendances suivantes doivent être installées :

npm install @trpc/server @trpc/client @trpc/react-query @tanstack/react-query

2. Importer votre AppRouter​

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 →

Importez le type AppRouter dans l'application cliente. Ce type représente la structure complète de votre API.

utils/trpc.ts
ts
import type { AppRouter } from '../server/router';
utils/trpc.ts
ts
import type { AppRouter } from '../server/router';
astuce

En utilisant import type, vous garantissez que la référence sera supprimée lors de la compilation, évitant ainsi d'importer par inadvertance du code serveur dans votre client. Pour plus d'informations, consultez la documentation TypeScript.

3. Créer les hooks tRPC​

Créez des hooks React fortement typés à partir de la signature type de votre AppRouter avec createTRPCReact.

utils/trpc.ts
ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server/router';
 
export const trpc = createTRPCReact<AppRouter>();
utils/trpc.ts
ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server/router';
 
export const trpc = createTRPCReact<AppRouter>();

4. Ajouter les providers tRPC​

Créez un client tRPC et encapsulez votre application dans le Provider tRPC, comme ci-dessous. Vous devrez également configurer et connecter React Query, dont la documentation est plus détaillée ici.

astuce

Si vous utilisez déjà React Query dans votre application, vous devriez réutiliser le QueryClient et QueryClientProvider existants.

App.tsx
tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import React, { useState } from 'react';
import { trpc } from './utils/trpc';
export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: 'http://localhost:3000/trpc',
          // You can pass any HTTP headers you wish here
          async headers() {
            return {
              authorization: getAuthCookie(),
            };
          },
        }),
      ],
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}
App.tsx
tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import React, { useState } from 'react';
import { trpc } from './utils/trpc';
export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: 'http://localhost:3000/trpc',
          // You can pass any HTTP headers you wish here
          async headers() {
            return {
              authorization: getAuthCookie(),
            };
          },
        }),
      ],
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}
note

L'utilisation de useState pour créer le queryClient et le TRPCClient, plutôt que de les déclarer en dehors du composant, garantit que chaque requête obtient un client unique lors du SSR. Pour le rendu côté client, vous pouvez les déplacer si vous le souhaitez.

5. Récupérer les données​

Vous pouvez maintenant utiliser l'intégration tRPC avec React Query pour appeler des queries et mutations sur votre API.

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
 
export default function IndexPage() {
  const userQuery = trpc.getUser.useQuery({ id: 'id_bilbo' });
  const userCreator = trpc.createUser.useMutation();
 
  return (
    <div>
      <p>{userQuery.data?.name}</p>
 
      <button onClick={() => userCreator.mutate({ name: 'Frodo' })}>
        Create Frodo
      </button>
    </div>
  );
}
pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
 
export default function IndexPage() {
  const userQuery = trpc.getUser.useQuery({ id: 'id_bilbo' });
  const userCreator = trpc.createUser.useMutation();
 
  return (
    <div>
      <p>{userQuery.data?.name}</p>
 
      <button onClick={() => userCreator.mutate({ name: 'Frodo' })}>
        Create Frodo
      </button>
    </div>
  );
}