Aller au contenu principal
Version : 11.x

Configurer un client tRPC

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 la bibliothèque client tRPC​

Utilisez votre gestionnaire de paquets préféré pour installer @trpc/client, ainsi que @trpc/server qui contient certains types requis.

npm install @trpc/server @trpc/client
Agents IA

Si vous utilisez un agent de codage IA, installez les compétences tRPC pour une meilleure génération de code :

bash
npx @tanstack/intent@latest install
bash
npx @tanstack/intent@latest install

2. Importer votre routeur d'application​

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. Initialiser le client tRPC​

Créez un client tRPC avec la méthode createTRPCClient, puis ajoutez un tableau links contenant un lien terminal pointant vers votre API. Pour en savoir plus sur les liens tRPC, consultez cette page.

client.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
 
      // You can pass any HTTP headers you wish here
      async headers() {
        return {
          authorization: getAuthCookie(),
        };
      },
    }),
  ],
});
client.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
 
      // You can pass any HTTP headers you wish here
      async headers() {
        return {
          authorization: getAuthCookie(),
        };
      },
    }),
  ],
});

4. Utiliser le client tRPC​

En arrière-plan, cela crée un Proxy JavaScript typé qui vous permet d'interagir avec votre API tRPC de manière totalement type-safe :

client.ts
ts
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
 
const frodo = await client.createUser.mutate({ name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };
client.ts
ts
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
 
const frodo = await client.createUser.mutate({ name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };

Vous êtes prêt !