Hoppa till huvudinnehållet
Version: 9.x

Användning med Next.js

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

Om du använder tRPC i ett nytt projekt, överväg att använda något av exempelprojekten som utgångspunkt eller referens: tRPC-exempelprojekt

tRPC och Next.js är en match gjord i himlen! Next.js gör det enkelt för dig att bygga klient och server tillsammans i ett kodbas. Detta gör det enkelt att dela typer mellan dem.

tRPC innehåller dedikerade verktyg för att göra Next.js-utvecklarupplevelsen så sömlös som möjligt.

Rekommenderad filstruktur​

Rekommenderad men inte påtvingad filstruktur. Detta är vad du får när du startar från exemplen.

graphql
.
├── prisma # <-- if prisma is added
│   └── [..]
├── src
│   ├── pages
│   │   ├── _app.tsx # <-- add `withTRPC()`-HOC here
│   │   ├── api
│   │   │   └── trpc
│   │   │       └── [trpc].ts # <-- tRPC HTTP handler
│   │   └── [..]
│   ├── server
│   │   ├── routers
│   │   │   ├── app.ts   # <-- main app router
│   │   │   ├── post.ts  # <-- sub routers
│   │   │   └── [..]
│   │   ├── context.ts      # <-- create app context
│   │   └── createRouter.ts # <-- router helper
│   └── utils
│       └── trpc.ts  # <-- your typesafe tRPC hooks
└── [..]
graphql
.
├── prisma # <-- if prisma is added
│   └── [..]
├── src
│   ├── pages
│   │   ├── _app.tsx # <-- add `withTRPC()`-HOC here
│   │   ├── api
│   │   │   └── trpc
│   │   │       └── [trpc].ts # <-- tRPC HTTP handler
│   │   └── [..]
│   ├── server
│   │   ├── routers
│   │   │   ├── app.ts   # <-- main app router
│   │   │   ├── post.ts  # <-- sub routers
│   │   │   └── [..]
│   │   ├── context.ts      # <-- create app context
│   │   └── createRouter.ts # <-- router helper
│   └── utils
│       └── trpc.ts  # <-- your typesafe tRPC hooks
└── [..]

Lägg till tRPC i befintligt Next.js-projekt​

1. Installera beroenden​

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

  • React Query: @trpc/react tillhandahåller ett tunt lager ovanpå @tanstack/react-query. Det krävs som ett peer-beroende.

  • Zod: de flesta exempel använder Zod för indatavalidering och vi rekommenderar det starkt, även om det inte är obligatoriskt. Du kan använda valfritt valideringsbibliotek (Yup, Superstruct, io-ts, etc). Alla objekt som innehåller en parse-, create- eller validateSync-metod kommer att fungera.

2. Aktivera strikt läge​

Om du vill använda Zod för validering av indata, se till att du har aktiverat strikt läge i din tsconfig.json:

json
// tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "strict": true
  }
}
json
// tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "strict": true
  }
}

Om strikt läge är för omfattande, aktivera åtminstone strictNullChecks:

json
// tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "strictNullChecks": true
  }
}
json
// tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "strictNullChecks": true
  }
}

3. Skapa en tRPC-router​

Implementera din tRPC-router i ./pages/api/trpc/[trpc].ts. Om du behöver dela upp din router i flera subroutrar, implementera dem i en toppnivåkatalog med namnet server i din projektrot, importera dem sedan till ./pages/api/trpc/[trpc].ts och slå ihop dem till en enda rot-router appRouter.

View sample router
./pages/api/trpc/[trpc].ts
ts
import * as trpc from '@trpc/server';
import * as trpcNext from '@trpc/server/adapters/next';
import { z } from 'zod';
export const appRouter = trpc.router().query('hello', {
  input: z
    .object({
      text: z.string().nullish(),
    })
    .nullish(),
  resolve({ input }) {
    return {
      greeting: `hello ${input?.text ?? 'world'}`,
    };
  },
});
// export type definition of API
export type AppRouter = typeof appRouter;
// export API handler
export default trpcNext.createNextApiHandler({
  router: appRouter,
  createContext: () => null,
});
./pages/api/trpc/[trpc].ts
ts
import * as trpc from '@trpc/server';
import * as trpcNext from '@trpc/server/adapters/next';
import { z } from 'zod';
export const appRouter = trpc.router().query('hello', {
  input: z
    .object({
      text: z.string().nullish(),
    })
    .nullish(),
  resolve({ input }) {
    return {
      greeting: `hello ${input?.text ?? 'world'}`,
    };
  },
});
// export type definition of API
export type AppRouter = typeof appRouter;
// export API handler
export default trpcNext.createNextApiHandler({
  router: appRouter,
  createContext: () => null,
});

4. Skapa tRPC-hooks​

Skapa en uppsättning starkt typade hooks med hjälp av din API:typ-signatur.

utils/trpc.ts
tsx
import { createReactQueryHooks } from '@trpc/react';
import type { AppRouter } from '../pages/api/trpc/[trpc]';
export const trpc = createReactQueryHooks<AppRouter>();
// => { useQuery: ..., useMutation: ...}
utils/trpc.ts
tsx
import { createReactQueryHooks } from '@trpc/react';
import type { AppRouter } from '../pages/api/trpc/[trpc]';
export const trpc = createReactQueryHooks<AppRouter>();
// => { useQuery: ..., useMutation: ...}

5. Konfigurera _app.tsx​

Funktionen createReactQueryHooks förväntar sig att vissa parametrar skickas via Context API. För att ställa in dessa parametrar, skapa en anpassad _app.tsx med hjälp av withTRPC-komponenten av högre ordning:

pages/_app.tsx
tsx
import { withTRPC } from '@trpc/next';
import { AppType } from 'next/dist/shared/lib/utils';
import type { AppRouter } from './api/trpc/[trpc]';
const MyApp: AppType = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};
export default withTRPC<AppRouter>({
  config(config) {
    /**
     * If you want to use SSR, you need to use the server's full URL
     * @see https://trpc.io/docs/ssr
     */
    const url = process.env.VERCEL_URL
      ? `https://${process.env.VERCEL_URL}/api/trpc`
      : 'http://localhost:3000/api/trpc';
    return {
      url,
      /**
       * @see https://tanstack.com/query/v3/docs/react/reference/QueryClient
       */
      // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
    };
  },
  /**
   * @see https://trpc.io/docs/ssr
   */
  ssr: true,
})(MyApp);
pages/_app.tsx
tsx
import { withTRPC } from '@trpc/next';
import { AppType } from 'next/dist/shared/lib/utils';
import type { AppRouter } from './api/trpc/[trpc]';
const MyApp: AppType = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};
export default withTRPC<AppRouter>({
  config(config) {
    /**
     * If you want to use SSR, you need to use the server's full URL
     * @see https://trpc.io/docs/ssr
     */
    const url = process.env.VERCEL_URL
      ? `https://${process.env.VERCEL_URL}/api/trpc`
      : 'http://localhost:3000/api/trpc';
    return {
      url,
      /**
       * @see https://tanstack.com/query/v3/docs/react/reference/QueryClient
       */
      // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
    };
  },
  /**
   * @see https://trpc.io/docs/ssr
   */
  ssr: true,
})(MyApp);

6. Gör API-anrop​

pages/index.tsx
tsx
import { trpc } from '../utils/trpc';
export default function IndexPage() {
  const hello = trpc.useQuery(['hello', { text: 'client' }]);
  if (!hello.data) {
    return <div>Loading...</div>;
  }
  return (
    <div>
      <p>{hello.data.greeting}</p>
    </div>
  );
}
pages/index.tsx
tsx
import { trpc } from '../utils/trpc';
export default function IndexPage() {
  const hello = trpc.useQuery(['hello', { text: 'client' }]);
  if (!hello.data) {
    return <div>Loading...</div>;
  }
  return (
    <div>
      <p>{hello.data.greeting}</p>
    </div>
  );
}

Alternativ för withTRPC()​

config-callback​

config-argumentet är en funktion som returnerar ett objekt som konfigurerar tRPC- och React Query-klienterna. Denna funktion har ett ctx-input som ger dig tillgång till Next.js req-objektet bland annat. Returvärdet kan innehålla följande egenskaper:

  • Exakt en av dessa är obligatorisk:

    • url: din API-URL.
    • links: för att anpassa dataflödet mellan tRPC-klienten och tRPC-servern. Läs mer.

  • Valfritt:

    • queryClientConfig: ett konfigurationsobjekt för React Query:s QueryClient som används internt av tRPC React-hooks: QueryClient-dokumentation
    • headers: ett objekt eller en funktion som returnerar ett objekt med utgående tRPC-begäranden
    • transformer: en transformer som appliceras på utgående nyttolaster. Läs mer om Datatransformers
    • fetch: anpassa implementationen av fetch som används internt av tRPC
    • AbortController: anpassa implementationen av AbortController som används internt av tRPC

ssr-boolean (standard: false)​

Anger om tRPC ska avvakta queries vid server-side rendering av en sida. Standard är false.

responseMeta-callback​

Möjlighet att sätta request headers och HTTP-status vid server-side rendering.

Exempel​

pages/_app.tsx
tsx
export default withTRPC<AppRouter>({
  config(config) {
    /* [...] */
  },
  ssr: true,
  responseMeta({ clientErrors, ctx }) {
    if (clientErrors.length) {
      // propagate first http error from API calls
      return {
        status: clientErrors[0].data?.httpStatus ?? 500,
      };
    }
    // cache full page for 1 day + revalidate once every second
    const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
    return {
      'Cache-Control': `s-maxage=1, stale-while-revalidate=${ONE_DAY_IN_SECONDS}`,
    };
  },
})(MyApp);
pages/_app.tsx
tsx
export default withTRPC<AppRouter>({
  config(config) {
    /* [...] */
  },
  ssr: true,
  responseMeta({ clientErrors, ctx }) {
    if (clientErrors.length) {
      // propagate first http error from API calls
      return {
        status: clientErrors[0].data?.httpStatus ?? 500,
      };
    }
    // cache full page for 1 day + revalidate once every second
    const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
    return {
      'Cache-Control': `s-maxage=1, stale-while-revalidate=${ONE_DAY_IN_SECONDS}`,
    };
  },
})(MyApp);

Nästa steg​

Se dokumentationen för @trpc/react för ytterligare information om hur du kör Queries och Mutations inuti dina komponenter.