Utilisation avec React

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 →

info

• Si vous utilisez Next.js, consultez plutôt le guide Utilisation avec Next.js.
• Pour inférer les types de votre backend Node.js, vous devez avoir le frontend et le backend dans le même monorepo.

Ajouter tRPC à un projet React existant

Côté serveur

1. Installer les dépendances

bash
yarn add @trpc/server zod

bash
yarn add @trpc/server zod

• Zod : la plupart des exemples utilisent Zod pour la validation des entrées et nous le recommandons vivement, bien que ce ne soit pas obligatoire. Vous pouvez utiliser une bibliothèque de validation de votre choix (Yup, Superstruct, io-ts, etc). En fait, tout objet contenant une méthode parse, create ou validateSync fonctionnera.

2. Activer le mode strict

Si vous souhaitez utiliser Zod pour la validation des entrées, assurez-vous d'avoir activé le mode strict dans votre tsconfig.json :

json
// tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "strict": true
  }
}

json
// tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "strict": true
  }
}

Si le mode strict est trop contraignant, activez au moins strictNullChecks :

json
// tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "strictNullChecks": true
  }
}

json
// tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "strictNullChecks": true
  }
}

3. Implémenter votre appRouter

Suivez le Démarrage rapide et consultez la documentation de @trpc/server pour vous guider. Une fois votre API implémentée et à l'écoute via HTTP, passez à l'étape suivante.

Côté client

tRPC fonctionne parfaitement avec Create React App !

1. Installer les dépendances

bash
yarn add @trpc/client @trpc/server @trpc/react react-query@3

bash
yarn add @trpc/client @trpc/server @trpc/react react-query@3

• @trpc/server : Il s'agit d'une dépendance peer de @trpc/client, vous devez donc l'installer à nouveau !

• Tanstack's React Query : @trpc/react fournit une fine surcouche à @tanstack/react-query. Elle est requise en tant que dépendance peer.

2. Créer les hooks tRPC

Créez un ensemble de hooks React fortement typés à partir de la signature de type de votre AppRouter avec createReactQueryHooks.

utils/trpc.ts
tsx
// utils/trpc.ts
import { createReactQueryHooks } from '@trpc/react';
import type { AppRouter } from '../path/to/router.ts';
export const trpc = createReactQueryHooks<AppRouter>();
// => { useQuery: ..., useMutation: ...}

utils/trpc.ts
tsx
// utils/trpc.ts
import { createReactQueryHooks } from '@trpc/react';
import type { AppRouter } from '../path/to/router.ts';
export const trpc = createReactQueryHooks<AppRouter>();
// => { useQuery: ..., useMutation: ...}

3. Ajouter les providers tRPC

Dans votre App.tsx

App.tsx
tsx
import React, { useState } from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { trpc } from './utils/trpc';
export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      url: 'http://localhost:5000/trpc',
      // optional
      headers() {
        return {
          authorization: getAuthCookie(),
        };
      },
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}

App.tsx
tsx
import React, { useState } from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { trpc } from './utils/trpc';
export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      url: 'http://localhost:5000/trpc',
      // optional
      headers() {
        return {
          authorization: getAuthCookie(),
        };
      },
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}

4. Récupérer les données

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
export default function IndexPage() {
  const hello = trpc.useQuery(['hello', { text: 'client' }]);
  if (!hello.data) return <div>Loading...</div>;
  return (
    <div>
      <p>{hello.data.greeting}</p>
    </div>
  );
}

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
export default function IndexPage() {
  const hello = trpc.useQuery(['hello', { text: 'client' }]);
  if (!hello.data) return <div>Loading...</div>;
  return (
    <div>
      <p>{hello.data.greeting}</p>
    </div>
  );
}