Fristående Adapter

Inofficiell Beta-översättning

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

tRPC:s fristående adapter är det enklaste sättet att få ett nytt projekt igång. Den är idealisk för lokal utveckling och serverbaserade produktionsmiljöer. I grunden är det bara ett omslag runt den vanliga Node.js HTTP-servern med standardalternativ relaterade till tRPC.

Om du redan har en befintlig API-distribution som Express, Fastify eller Next.js där du vill integrera tRPC, bör du titta på deras respektive adaptrar. Likaså om du föredrar serverlös hosting eller edge-beräkning har vi adaptrar som AWS Lambda och Fetch som kan passa dina behov.

Det är inte heller ovanligt att ha två ingångspunkter i din applikation när den distribuerade adaptern är svår att köra lokalt. Du kan använda den fristående adaptern för lokal utveckling och en annan adapter när applikationen är publicerad.

Exempelapp

Description	Links
Standalone tRPC Server	StackBlitz Source
Standalone tRPC Server with CORS handling	StackBlitz Source

Konfigurera en fristående tRPC-server

1. Implementera din App Router

Implementera din tRPC-router. Till exempel:

appRouter.ts
ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
export const appRouter = t.router({
  getUser: t.procedure.input(z.string()).query((opts) => {
    return { id: opts.input, name: 'Bilbo' };
  }),
  createUser: t.procedure
    .input(z.object({ name: z.string().min(5) }))
    .mutation(async (opts) => {
      // use your ORM of choice
      return await UserModel.create({
        data: opts.input,
      });
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;

appRouter.ts
ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
export const appRouter = t.router({
  getUser: t.procedure.input(z.string()).query((opts) => {
    return { id: opts.input, name: 'Bilbo' };
  }),
  createUser: t.procedure
    .input(z.object({ name: z.string().min(5) }))
    .mutation(async (opts) => {
      // use your ORM of choice
      return await UserModel.create({
        data: opts.input,
      });
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;

För mer information kan du titta på snabbstartsguiden

2. Använd den fristående adaptern

Den fristående adaptern kör en enkel Node.js HTTP-server.

server.ts
ts
import { initTRPC } from '@trpc/server';
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { appRouter } from './appRouter.ts';
createHTTPServer({
  router: appRouter,
  createContext() {
    console.log('context 3');
    return {};
  },
}).listen(2022);

server.ts
ts
import { initTRPC } from '@trpc/server';
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { appRouter } from './appRouter.ts';
createHTTPServer({
  router: appRouter,
  createContext() {
    console.log('context 3');
    return {};
  },
}).listen(2022);

Hantera CORS & OPTIONS

Som standard svarar inte den fristående servern på HTTP OPTIONS-förfrågningar eller sätter några CORS-headers.

Om du inte kör i en miljö som hanterar detta åt dig, till exempel under lokal utveckling, kan du behöva hantera det manuellt.

1. Installera cors

Du kan själv lägga till stöd med det populära cors-paketet

bash
yarn add cors
yarn add -D @types/cors

bash
yarn add cors
yarn add -D @types/cors

För fullständig information om hur du konfigurerar detta paket, kolla dokumentationen

2. Konfigurera den fristående servern

Det här exemplet öppnar helt enkelt CORS för alla förfrågningar, vilket är användbart under utveckling, men du kan och bör konfigurera det striktare i en produktionsmiljö.

server.ts
ts
import { initTRPC } from '@trpc/server';
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import cors from 'cors';
createHTTPServer({
  middleware: cors(),
  router: appRouter,
  createContext() {
    console.log('context 3');
    return {};
  },
}).listen(3333);

server.ts
ts
import { initTRPC } from '@trpc/server';
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import cors from 'cors';
createHTTPServer({
  middleware: cors(),
  router: appRouter,
  createContext() {
    console.log('context 3');
    return {};
  },
}).listen(3333);

Alternativet middleware accepterar vilken funktion som helst som liknar ett connect/node.js-middleware, så du kan använda det till mer än bara cors-hantering om du vill. Det är dock tänkt som en enkel lösning och kommer därför inte själv att låta dig kombinera flera middlewares. Om du vill göra detta kan du:

1. Använd en alternativ adapter med mer omfattande middleware-stöd, som Express-adapern

2. Använd en lösning för att kombinera middlewares som connect

3. Utöka den fristående createHTTPHandler med en anpassad http-server (se nedan)

Vidareutveckling

Om createHTTPServer inte räcker till kan du också använda den fristående adapterns funktion createHTTPHandler för att skapa din egen HTTP-server. Till exempel:

server.ts
ts
import { createServer } from 'http';
import { initTRPC } from '@trpc/server';
import { createHTTPHandler } from '@trpc/server/adapters/standalone';
const handler = createHTTPHandler({
  router: appRouter,
  createContext() {
    return {};
  },
});
createServer((req, res) => {
  /**
   * Handle the request however you like,
   * just call the tRPC handler when you're ready
   */
  handler(req, res);
}).listen(3333);

server.ts
ts
import { createServer } from 'http';
import { initTRPC } from '@trpc/server';
import { createHTTPHandler } from '@trpc/server/adapters/standalone';
const handler = createHTTPHandler({
  router: appRouter,
  createContext() {
    return {};
  },
});
createServer((req, res) => {
  /**
   * Handle the request however you like,
   * just call the tRPC handler when you're ready
   */
  handler(req, res);
}).listen(3333);