Client standard

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 →

La magie de tRPC réside dans la réalisation d'appels API fortement typés sans dépendre de la génération de code. Avec des projets TypeScript full-stack, vous pouvez directement importer des types du serveur vers le client ! C'est un élément vital du fonctionnement de tRPC.

Importez le type AppRouter dans votre client depuis le fichier où votre routeur tRPC racine est défini. Ce type unique représente la signature de type de toute votre API.

client.ts
ts
import type { AppRouter } from '../path/to/server/trpc';

client.ts
ts
import type { AppRouter } from '../path/to/server/trpc';

Les mots-clés import type vous permettent d'importer depuis n'importe quel fichier TypeScript de votre système de fichiers. De plus, import type ne peut importer que des types, PAS du code. Ainsi, il n'y a aucun risque d'importer accidentellement du code côté serveur dans votre client. Tous les appels à import type sont toujours complètement supprimés de votre bundle JavaScript compilé (source).

Initialiser un client tRPC

Créez un client type-safe avec la méthode createTRPCClient de @trpc/client :

client.ts
ts
// pages/index.tsx
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
  url: 'http://localhost:5000/trpc',
});

client.ts
ts
// pages/index.tsx
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
  url: 'http://localhost:5000/trpc',
});

Comme vous pouvez le voir, nous avons passé AppRouter en tant qu'argument de type à createTRPCClient. Cela renvoie une instance client fortement typée :

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

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