Användning med React

Inofficiell Beta-översättning

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

info

• Om du använder Next.js, läs istället guiden Användning med Next.js.
• För att kunna inferera typer från din Node.js-backend bör frontend och backend finnas i samma monorepo.

Lägg till tRPC i ett befintligt React-projekt

Serversidan

1. Installera beroenden

bash
yarn add @trpc/server zod

bash
yarn add @trpc/server zod

• 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. Implementera din appRouter

Följ Snabbstarten och läs dokumentationen för @trpc/server för vägledning. När din API-implementation lyssnar via HTTP, fortsätt till nästa steg.

Klientsidan

tRPC fungerar utmärkt med Create React App!

1. Installera beroenden

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

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

• @trpc/server: Detta är ett peer-beroende till @trpc/client så du måste installera det igen!

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

2. Skapa tRPC-hooks

Skapa en uppsättning starkt typade React-hooks från din AppRouter-typ-signatur med createReactQueryHooks.

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

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

3. Lägg till tRPC-providers

I din App.tsx

App.tsx
tsx
import React, { useState } from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { trpc } from './utils/trpc';
export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      url: 'http://localhost:5000/trpc',
      // optional
      headers() {
        return {
          authorization: getAuthCookie(),
        };
      },
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}

App.tsx
tsx
import React, { useState } from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { trpc } from './utils/trpc';
export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      url: 'http://localhost:5000/trpc',
      // optional
      headers() {
        return {
          authorization: getAuthCookie(),
        };
      },
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}

4. Hämta data

pages/IndexPage.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/IndexPage.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>
  );
}