Version: 11.x

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 {};
  },
  // basePath: '/trpc/', // optional, defaults to '/'
}).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 {};
  },
  // basePath: '/trpc/', // optional, defaults to '/'
}).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:

Använd en alternativ adapter med mer omfattande middleware-stöd, som Express-adapern
Använd en lösning för att kombinera middlewares som connect
Utöka den fristående createHTTPHandler med en anpassad http-server (se nedan)

Lägga till en hanterare till en anpassad HTTP-server

createHTTPServer returnerar en instans av Node.js inbyggda http.Server(https://nodejs.org/api/http.html#class-httpserver), vilket innebär att du har tillgång till alla dess egenskaper och API:er. Men om createHTTPServer inte räcker för ditt användningsfall kan du också använda den fristående adapterns createHTTPHandler-funktion 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(3001);

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(3001);

Anpassad basväg för att hantera förfrågningar under

Den fristående adaptern stöder också ett basePath-alternativ, som skär bort basvägen från början av förfrågans sökväg.

server.ts
ts
import { createServer } from 'http';
import { initTRPC } from '@trpc/server';
import { createHTTPHandler } from '@trpc/server/adapters/standalone';
const handler = createHTTPHandler({
  router: appRouter,
  basePath: '/trpc/',
});
createServer((req, res) => {
  if (req.url?.startsWith('/trpc/')) {
    return handler(req, res);
  }
  // [... insert your custom logic here ...]
  res.statusCode = 404;
  res.end('Not Found');
}).listen(3001);

server.ts
ts
import { createServer } from 'http';
import { initTRPC } from '@trpc/server';
import { createHTTPHandler } from '@trpc/server/adapters/standalone';
const handler = createHTTPHandler({
  router: appRouter,
  basePath: '/trpc/',
});
createServer((req, res) => {
  if (req.url?.startsWith('/trpc/')) {
    return handler(req, res);
  }
  // [... insert your custom logic here ...]
  res.statusCode = 404;
  res.end('Not Found');
}).listen(3001);

HTTP2

Den fristående adaptern stöder också HTTP/2.

server.ts
ts
import http2 from 'http2';
import { createHTTP2Handler } from '@trpc/server/adapters/standalone';
import { appRouter } from './_app.ts';
import { createContext } from './context.ts';
const handler = createHTTP2Handler({
  router: appRouter,
  createContext,
  // basePath: '/trpc/', // optional, defaults to '/'
});
const server = http2.createSecureServer(
  {
    key: '...',
    cert: '...',
  },
  (req, res) => {
    /**
     * Handle the request however you like,
     * just call the tRPC handler when you're ready
     */
    handler(req, res);
  },
);
server.listen(3001);

server.ts
ts
import http2 from 'http2';
import { createHTTP2Handler } from '@trpc/server/adapters/standalone';
import { appRouter } from './_app.ts';
import { createContext } from './context.ts';
const handler = createHTTP2Handler({
  router: appRouter,
  createContext,
  // basePath: '/trpc/', // optional, defaults to '/'
});
const server = http2.createSecureServer(
  {
    key: '...',
    cert: '...',
  },
  (req, res) => {
    /**
     * Handle the request however you like,
     * just call the tRPC handler when you're ready
     */
    handler(req, res);
  },
);
server.listen(3001);

context.ts
ts
import { CreateHTTP2ContextOptions } from '@trpc/server/adapters/standalone';
 
export async function createContext(opts: CreateHTTP2ContextOptions) {
  opts.req;
       
(property) req: http2.Http2ServerRequest
  opts.res;
       
(property) res: http2.Http2ServerResponse
 
  opts.info;
        
(property) info: TRPCRequestInfo
  return {};
}
 
export type Context = Awaited<ReturnType<typeof createContext>>;

context.ts
ts
import { CreateHTTP2ContextOptions } from '@trpc/server/adapters/standalone';
 
export async function createContext(opts: CreateHTTP2ContextOptions) {
  opts.req;
       
(property) req: http2.Http2ServerRequest
  opts.res;
       
(property) res: http2.Http2ServerResponse
 
  opts.info;
        
(property) info: TRPCRequestInfo
  return {};
}
 
export type Context = Awaited<ReturnType<typeof createContext>>;

Exempelapp​

Konfigurera en fristående tRPC-server​

1. Implementera din App Router​

2. Använd den fristående adaptern​

Hantera CORS & OPTIONS​

1. Installera cors​

2. Konfigurera den fristående servern​

Lägga till en hanterare till en anpassad HTTP-server​

Anpassad basväg för att hantera förfrågningar under​

HTTP2​