Hoppa till huvudinnehållet
Version: 9.x

Snabbstart

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

tips

Vi rekommenderar starkt att du kikar på exempelapparna för att få en känsla för tRPC och komma igång så smidigt som möjligt.

Installation​

⚠️ Krav: tRPC kräver TypeScript > 4.1 eftersom det bygger på Template Literal Types.

npm install @trpc/server

För att implementera tRPC-endpoints och routers. Installera i din server-kodbas.

npm install @trpc/client @trpc/server

För att göra typesäkra API-anrop från din klient. Installera i din klient-kodbas (@trpc/server är ett peer dependency för @trpc/client).

npm install @trpc/react react-query@3

För att generera kraftfulla React-hooks för att fråga ditt tRPC-API. Drivs av react-query.

npm install @trpc/next

Verktyg för att integrera tRPC med Next.js.

Installationssnuttar​

npm:

bash
npm install @trpc/server @trpc/client @trpc/react react-query@3 @trpc/next
bash
npm install @trpc/server @trpc/client @trpc/react react-query@3 @trpc/next

yarn:

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

Definiera en router​

Låt oss gå igenom stegen för att bygga ett typesäkert API med tRPC. Till att börja med innehåller detta API bara två endpoints:

ts
getUser(id: string) => { id: string; name: string; }
createUser(data: {name:string}) => { id: string; name: string; }
ts
getUser(id: string) => { id: string; name: string; }
createUser(data: {name:string}) => { id: string; name: string; }

Skapa en router-instans​

Först definierar vi en router någonstans i vår server-kodbas:

server.ts
ts
import * as trpc from '@trpc/server';
const appRouter = trpc.router();
// only export *type signature* of router!
// to avoid accidentally importing your API
// into client-side code
export type AppRouter = typeof appRouter;
server.ts
ts
import * as trpc from '@trpc/server';
const appRouter = trpc.router();
// only export *type signature* of router!
// to avoid accidentally importing your API
// into client-side code
export type AppRouter = typeof appRouter;

Lägg till en query-endpoint​

Använd metoden .query() för att lägga till en query-endpoint till routern. Argument:

.query(name: string, params: QueryParams)

  • name: string: Namnet på denna endpoint

  • params.input: Valfritt. En funktion som validerar/kastar om input för denna endpoint och returnerar ett starkt typat värde (vid giltig input) eller kastar ett fel (vid ogiltig input). Du kan också skicka ett schema från Zod, Superstruct eller Yup.

  • params.resolve: Själva implementationen av endpointen. En funktion med ett enda req-argument. Den validerade inputen finns i req.input och kontexten i req.ctx (mer om kontext senare!)

server.ts
ts
import * as trpc from '@trpc/server';
const appRouter = trpc.router().query('getUser', {
  input: (val: unknown) => {
    if (typeof val === 'string') return val;
    throw new Error(`Invalid input: ${typeof val}`);
  },
  async resolve(req) {
    req.input; // string
    return { id: req.input, name: 'Bilbo' };
  },
});
export type AppRouter = typeof appRouter;
server.ts
ts
import * as trpc from '@trpc/server';
const appRouter = trpc.router().query('getUser', {
  input: (val: unknown) => {
    if (typeof val === 'string') return val;
    throw new Error(`Invalid input: ${typeof val}`);
  },
  async resolve(req) {
    req.input; // string
    return { id: req.input, name: 'Bilbo' };
  },
});
export type AppRouter = typeof appRouter;

Lägg till en mutation-endpoint​

Precis som i GraphQL skiljer tRPC mellan query- och mutation-endpoints. Låt oss lägga till en createUser-mutation:

ts
createUser(payload: {name: string}) => {id: string; name: string};
ts
createUser(payload: {name: string}) => {id: string; name: string};
server.ts
ts
import * as trpc from '@trpc/server';
import { z } from 'zod';
const appRouter = trpc
  .router()
  .query('getUser', {
    input: (val: unknown) => {
      if (typeof val === 'string') return val;
      throw new Error(`Invalid input: ${typeof val}`);
    },
    async resolve(req) {
      req.input; // string
      return { id: req.input, name: 'Bilbo' };
    },
  })
  .mutation('createUser', {
    // validate input with Zod
    input: z.object({ name: z.string().min(5) }),
    async resolve(req) {
      // use your ORM of choice
      return await UserModel.create({
        data: req.input,
      });
    },
  });
export type AppRouter = typeof appRouter;
server.ts
ts
import * as trpc from '@trpc/server';
import { z } from 'zod';
const appRouter = trpc
  .router()
  .query('getUser', {
    input: (val: unknown) => {
      if (typeof val === 'string') return val;
      throw new Error(`Invalid input: ${typeof val}`);
    },
    async resolve(req) {
      req.input; // string
      return { id: req.input, name: 'Bilbo' };
    },
  })
  .mutation('createUser', {
    // validate input with Zod
    input: z.object({ name: z.string().min(5) }),
    async resolve(req) {
      // use your ORM of choice
      return await UserModel.create({
        data: req.input,
      });
    },
  });
export type AppRouter = typeof appRouter;

Nästa steg​

tRPC inkluderar mer avancerade klientverktyg designade för React-projekt i allmänhet och Next.js specifikt. Läs den relevanta guiden härnäst: