PricingLoginStart free
Typsäkra API:er från frontend till backend med tRPC · Lektion

Implementera query-procedurer

Skapa endpoints för skrivskyddad datahämtning med tRPC-query-procedurer och indata- och utdatatypning.

Lektion 2 av 411 steg

Implementera query-procedurer är en gratis lektion i Typsäkra API:er från frontend till backend med tRPC på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Typsäkra API:er från frontend till backend med tRPC, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Typsäkra API:er från frontend till backend med tRPC innehåller totalt 4 lektioner.

Vad är tRPC-queries?

Queries är som att ställa en fråga till servern. De är utformade för att hämta data, inte ändra den. Se dem som "GET"-förfrågningar i ett traditionellt REST-API.

  • Skrivskyddade: Queries ska aldrig ändra data på servern.
  • Idempotenta: Om en query körs flera gånger ska den ge samma resultat.
  • Cachelagrade: Klienter kan ofta cachelagra query-resultat för bättre prestanda.

De utgör grunden för att hämta information i tRPC-applikationen.

Definiera en enkel query

I tRPC definierar ni queries i en router med .query(). Låt oss titta på grundstrukturen.

Först behöver ni initiera tRPC (det görs vanligtvis en gång när servern konfigureras):

const t = initTRPC.create();

Definiera sedan routern och lägg till en query:

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.

Er första körbara query (server)

Låt oss sätta ihop allt till en minimal, körbar tRPC-server. Den här servern kommer att tillhandahålla vår hello-query.

Spara detta som server.ts och kör med ts-node server.ts (efter 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');

Anropa en query från klienten

Nu när servern körs kan vi anropa hello-queryn från en klientapplikation. Vi använder @trpc/client för att skapa en proxy som speglar serverns API.

Spara detta som client.ts. Ni behöver starta 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();

Skicka data till queries

Ofta behöver ni skicka data till era queries, till exempel för att hämta en specifik användare utifrån ett ID. tRPC hanterar detta smidigt med indatascheman.

Ni definierar den förväntade indatan med hjälp av ett valideringsbibliotek som Zod. Det säkerställer att indatan alltid är typsäker och giltig, både på klienten och servern.

  • Använd .input() efter t.procedure.
  • Ange ett Zod-schema för att definiera indatans struktur.
  • Indatan finns tillgänglig i egenskapen input i argumentet till funktionen resolve.

Fråga med ett ID (server)

Låt oss ändra servern så att den hämtar en "user" utifrån användarens ID. Vi använder Zod för att validera att indatan är ett tal.

Uppdatera server.ts med den här nya proceduren:

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');

Anropa en query med indata (klient)

Från klienten kan vi nu anropa vår getUserById-query och skicka med det obligatoriska id. tRPC ser till att indatan överensstämmer med det Zod-schema som definierats på servern, vilket ger typsäkerhet från klient till server.

Uppdatera client.ts så att den anropar den nya queryn:

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

Typsäkerhet i query-resultat

En av tRPC:s största fördelar är dess typsäkerhet från klient till server. När ni definierar en query härleder tRPC automatiskt utdatatypen utifrån det som funktionen resolve returnerar.

  • Ni behöver inte definiera svarsgränssnitt manuellt.
  • Om serverns returtyp ändras visar klientkoden automatiskt ett TypeScript-fel.
  • Detta upptäcker buggar tidigt, innan koden körs!

För vår getUserById-query härleder tRPC korrekt returtypen som { id: number; name: string } | null.

Bästa praxis för queries

När ni bygger fler queries bör ni tänka på följande:

  • Håll dem skrivskyddade: Utför aldrig sidoeffekter (som databasskrivningar) i en query.
  • Tydlig namngivning: Namnge era queries beskrivande (till exempel getUserById och listPosts).
  • Specifik indata: Använd specifika Zod-scheman för indata för att säkerställa strikt validering.
  • Felhantering: Även om tRPC vidarebefordrar fel bör ni överväga specifika feltyper för bättre återkoppling till klienten (mer om detta i en senare lektion!).

Queries är grundläggande för att hämta data. Härnäst tittar vi på Mutations för att ändra data.

Kontroll av query-procedurer

Ni har lärt er att definiera och använda tRPC-query-procedurer. Nu testar vi era kunskaper.

Besvara frågan i den interaktiva lektionen

Sammanfattning: query-procedurer

Bra jobbat! I den här lektionen har ni lärt er om tRPC:s query-procedurer.

  • Queries används för att hämta skrivskyddad data från servern.
  • Ni definierar dem med t.procedure.query(...) i routern.
  • Ni kan lägga till indatavalidering med .input(z.object(...)) och Zod.
  • tRPC tillhandahåller typsäkerhet från klient till server genom att automatiskt härleda utdatatyper.

Nu har ni verktygen för att bygga kraftfulla, typsäkra endpoints för datahämtning! Härnäst utforskar vi Mutations för databearbetning.

Gratis att börja

Lär dig Typsäkra API:er från frontend till backend med tRPC med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
10
Lektioner
40
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Implementera query-procedurer” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Typsäkra API:er från frontend till backend med tRPC, inklusive ”Implementera query-procedurer”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Typsäkra API:er från frontend till backend med tRPC innehåller totalt 4 lektioner.

Vad lär jag mig i ”Implementera query-procedurer”?

Skapa endpoints för skrivskyddad datahämtning med tRPC-query-procedurer och indata- och utdatatypning. Ni övar på Typsäkra API:er från frontend till backend med tRPC med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Typsäkra API:er från frontend till backend med tRPC?

Du behöver inga förkunskaper. Utbildningen i Typsäkra API:er från frontend till backend med tRPC på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Implementera query-procedurer”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Typsäkra API:er från frontend till backend med tRPC-lektionen?

Ja. Varje Typsäkra API:er från frontend till backend med tRPC-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Strukturera med tRPC-routers
  2. Implementera query-procedurer
  3. Utveckla mutation-procedurer
  4. Slå ihop och kapsla in routrar
← Tillbaka till Typsäkra API:er från frontend till backend med tRPC