Typesikre API-er fra frontend til backend med tRPC · leksjon

Implementering av query-prosedyrer

Opprett skrivebeskyttede endepunkter for uthenting av data ved hjelp av tRPC-query-prosedyrer med inn- og utdata-typer.

Leksjon 2 av 411 trinn

Implementering av query-prosedyrer er en gratis leksjon i Typesikre API-er fra frontend til backend med tRPC på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Typesikre API-er fra frontend til backend med tRPC, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Typesikre API-er fra frontend til backend med tRPC inneholder totalt 4 leksjoner.

Hva er tRPC-queries?

Spørringer er som å stille et spørsmål til serveren. De er laget for å hente data, ikke endre dem. Tenk på dem som «GET»-forespørsler i et tradisjonelt REST-API.

skrivebeskyttet: Spørringer skal aldri endre data på serveren.
Idempotente: Hvis du kjører en spørring flere ganger, skal den gi samme resultat.
Bufrede: Klienter kan ofte mellomlagre resultater fra spørringer for bedre ytelse.

De er grunnlaget for å hente informasjon i tRPC-applikasjonen.

Definere en enkel spørring

I tRPC definerer du spørringer i en ruter ved hjelp av .query(). La oss se på den grunnleggende strukturen.

Først må du initialisere tRPC (dette gjøres vanligvis én gang når serveren settes opp):

const t = initTRPC.create();

Deretter definerer du ruteren og legger til en spørring:

import { initTRPC } from '@trpc/server';

// 1. Initialize tRPC
const t = initTRPC.create();

// 2. Create a router
const appRouter = t.router({
  // 3. Define a query named 'hello'
  hello: t.procedure.query(() => {
    return 'Hello from tRPC!';
  }),
});
// This snippet shows the core definition.
// A full server setup is needed to run it.

Din første kjørbare spørring (server)

La oss sette alt sammen til en minimal, kjørbar tRPC-server. Denne serveren skal være vert for hello-spørringen vår.

Lagre dette som server.ts, og kjør det med ts-node server.ts (etter npm install @trpc/server @trpc/server-adapters ts-node typescript).

import { initTRPC } from '@trpc/server';
import { createHTTPServer } from '@trpc/server/adapters/standalone';

const t = initTRPC.create();

const appRouter = t.router({
  hello: t.procedure.query(() => {
    console.log('Hello query called on server!');
    return 'Hello from tRPC!';
  }),
});

export type AppRouter = typeof appRouter;

const server = createHTTPServer({
  router: appRouter,
});

server.listen(2025);
console.log('tRPC server listening on http://localhost:2025');

Kalle en spørring fra klienten

Nå som serveren kjører, skal vi kalle hello-spørringen fra en klientapplikasjon. Vi bruker @trpc/client til å opprette en proxy som speiler API-et på serveren.

Lagre dette som client.ts. Du må starte server.ts først.

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';

// Simplified AppRouter type for this example
type AppRouter = {
  hello: {
    _def: {
      _input_in: undefined;
      _input_out: undefined;
      _output_in: string;
      _output_out: string;
    };
  };
};

const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:2025',
    }),
  ],
});

async function callHello() {
  try {
    const greeting = await trpc.hello.query();
    console.log(greeting); // Expected: Hello from tRPC!
  } catch (error) {
    console.error('Error calling hello query:', error);
  }
}

callHello();

Sende data til spørringer

Ofte må du sende data til spørringene dine, for eksempel for å hente en bestemt bruker basert på ID. tRPC håndterer dette på en elegant måte med inndataskjemaer.

Du definerer forventet inndata ved hjelp av et valideringsbibliotek som Zod. Dette sørger for at inndataene alltid er typesikre og gyldige, både på klienten og serveren.

Bruk .input() etter t.procedure.
Oppgi et Zod-skjema for å definere strukturen til inndataene.
Inndataene blir tilgjengelige i egenskapen input i argumentene til resolve-funksjonen.

Spørre med en ID (server)

La oss endre serveren slik at den henter en «user» basert på ID-en. Vi bruker Zod til å validere at inndataen er et tall.

Oppdater server.ts med denne nye prosedyren:

import { initTRPC } from '@trpc/server';
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { z } from 'zod'; // Import Zod

const t = initTRPC.create();

const appRouter = t.router({
  getUserById: t.procedure
    .input(z.object({ id: z.number() })) // Define input schema
    .query(({ input }) => { // Access input here
      console.log(`Fetching user with ID: ${input.id}`);
      // In a real app, you'd fetch from a database
      const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
      return users.find(user => user.id === input.id) || null;
    }),
});

export type AppRouter = typeof appRouter;

const server = createHTTPServer({
  router: appRouter,
});

server.listen(2025);
console.log('tRPC server listening on http://localhost:2025');

Kalle en spørring med inndata (klient)

Nå kan vi kalle getUserById-spørringen fra klienten og sende den nødvendige id-verdien. tRPC sørger for at inndataene samsvarer med Zod-skjemaet som er definert på serveren, slik at du får typesikkerhet fra ende til ende.

Oppdater client.ts slik at den kaller denne nye spørringen:

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';

// Simplified AppRouter for example
type AppRouter = {
  getUserById: {
    _def: {
      _input_in: { id: number };
      _input_out: { id: number };
      _output_in: { id: number; name: string } | null;
      _output_out: { id: number; name: string } | null;
    };
  };
};

const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:2025',
    }),
  ],
});

async function callGetUser() {
  try {
    const user1 = await trpc.getUserById.query({ id: 1 });
    console.log('User 1:', user1); // Expected: User 1: { id: 1, name: 'Alice' }

    const user3 = await trpc.getUserById.query({ id: 3 });
    console.log('User 3:', user3); // Expected: User 3: null
  } catch (error) {
    console.error('Error calling getUserById query:', error);
  }
}

callGetUser();

Typesikkerhet i resultatene fra spørringer

En av tRPCs største fordeler er typesikkerhet fra ende til ende. Når du definerer en spørring, utleder tRPC automatisk utdatatypen basert på det resolve-funksjonen returnerer.

Du trenger ikke å definere svargrensesnitt manuelt.
Hvis returtypen på serveren endres, viser klientkoden automatisk en TypeScript-feil.
Dette oppdager feil tidlig, før kjøring!

For getUserById-spørringen utleder tRPC korrekt returtypen som { id: number; name: string } | null.

Beste praksis for spørringer

Husk disse tipsene når du bygger flere spørringer:

Hold dem skrivebeskyttet: Utfør aldri bivirkninger (som databaseskrivinger) i en spørring.
Tydelige navn: Gi spørringene beskrivende navn (for eksempel getUserById, listPosts).
Detaljerte inndata: Bruk spesifikke Zod-skjemaer for inndata for å sikre streng validering.
Feilhåndtering: Selv om tRPC viderefører feil, bør du vurdere spesifikke feiltyper for bedre tilbakemeldinger til klienten (mer om dette i en senere leksjon!).

Spørringer er grunnleggende for å hente data. Deretter skal vi se på mutasjoner for å endre data.

Kontroll av spørringsprosedyrer

Du har lært hvordan du definerer og bruker tRPC-spørringsprosedyrer. La oss teste forståelsen din.

Besvar den i den interaktive leksjonen

Oppsummering: Spørringsprosedyrer

Godt jobbet! I denne leksjonen har du lært om tRPCs spørringsprosedyrer.

Spørringer brukes til å hente skrivebeskyttede data fra serveren.
Du definerer dem med t.procedure.query(...) i ruteren.
Du kan legge til validering av inndata ved hjelp av .input(z.object(...)) med Zod.
tRPC gir typesikkerhet fra ende til ende ved å utlede utd atatyper automatisk.

Du har nå verktøyene du trenger for å bygge kraftige og typesikre endepunkter for datahenting! Deretter skal vi utforske mutasjoner for datamanipulering.

Gratis å komme i gang

Lær deg Typesikre API-er fra frontend til backend med tRPC med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 10
Leksjoner: 40

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Implementering av query-prosedyrer» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Typesikre API-er fra frontend til backend med tRPC, inkludert «Implementering av query-prosedyrer», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Typesikre API-er fra frontend til backend med tRPC inneholder totalt 4 leksjoner.

Hva lærer jeg i «Implementering av query-prosedyrer»?

Opprett skrivebeskyttede endepunkter for uthenting av data ved hjelp av tRPC-query-prosedyrer med inn- og utdata-typer. Du øver på Typesikre API-er fra frontend til backend med tRPC med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Typesikre API-er fra frontend til backend med tRPC?

Ingen tidligere erfaring er nødvendig. Typesikre API-er fra frontend til backend med tRPC på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Implementering av query-prosedyrer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Typesikre API-er fra frontend til backend med tRPC-leksjonen?

Ja. Alle Typesikre API-er fra frontend til backend med tRPC-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Typesikre API-er fra frontend til backend med tRPC