tRPC:n tyyppiturvalliset API:t päästä päähän · Oppitunti

Mutaatioproseduurien kehittäminen

Rakentakaa tietojen luonti-, päivitys- ja poistotoimintoja varten proseduureja tRPC-mutaatioproseduureilla.

Oppitunti 3/411 vaihetta

Mutaatioproseduurien kehittäminen on ilmainen tRPC:n tyyppiturvalliset API:t päästä päähän-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu tRPC:n tyyppiturvalliset API:t päästä päähän-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. tRPC:n tyyppiturvalliset API:t päästä päähän-kurssilla on yhteensä 4 oppituntia.

Mitä tRPC-mutaatiot ovat?

Tervetuloa tutustumaan tRPC:n mutaatioproseduureihin! Tähän asti olet todennäköisesti käyttänyt kyselyitä tietojen hakemiseen, kuten käyttäjäluettelon tai yksittäisen tuotteen hakemiseen.

Entä jos tietoja täytyy muuttaa? Tällöin mutaatiot astuvat kuvaan. Mutaatiot ovat palvelimen tietojen muokkaamiseen tarkoitettuja API-toimintoja.

  • Luo: Lisää uusia tietueita (esim. luo käyttäjä).
  • Päivitä: Muokkaa olemassa olevia tietueita (esim. päivitä käyttäjän sähköpostiosoite).
  • Poista: Poista tietueita (esim. poista käyttäjä).

Ne ovat CRUD-toimintojen CUD-osa!

Mutaatiot ja kyselyt

On tärkeää ymmärtää kyselyiden ja mutaatioiden ero tRPC:ssä:

  • Kyselyt: Niillä haetaan tietoja. Ne ovat yleensä vain luku -toimintoja, eikä niillä pitäisi olla sivuvaikutuksia (eli ne eivät muuta palvelimen tietoja).
  • Mutaatiot: Niillä muutetaan tietoja. Ne on tarkoitettu sivuvaikutuksia varten, ja ne muokkaavat palvelimen tilaa.

tRPC pitää nämä erillään, mikä auttaa rakentamaan ennakoitavampia ja vakaampia rajapintoja. Kun haluat luoda, päivittää tai poistaa jotain, käytä aina mutaatiota.

Yksinkertaisen mutaation määrittäminen

Aloitetaan määrittämällä hyvin yksinkertainen mutaatio. Kyselyiden tavoin mutaatiot ovat tRPC-reitittimen proseduureja.

Käytämme .mutation()-metodia .query()-metodin sijaan. Tämä esimerkki ottaa syötteenä name-arvon ja palauttaa tervehdysmerkkijonon.

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

const t = initTRPC.create();

const appRouter = t.router({
  sayHello: t.procedure
    .input(z.object({ name: z.string() }))
    .mutation(({ input }) => {
      // In a real app, this might save 'name' to a log
      return `Hello, ${input.name}!`;
    }),
});

export type AppRouter = typeof appRouter;
// This defines a valid tRPC router with one mutation.

Tietojen luominen: Luo-mutaatio

Yksi mutaatioiden yleinen käyttötapaus on uusien tietojen luominen. Rakennetaan createUser-mutaatio, joka hyväksyy käyttäjän nimen ja sähköpostiosoitteen.

Käytämme zod-kirjastoa (skeemojen validointikirjastoa) odotetun syöterakenteen määrittämiseen. Näin varmistetaan tyyppiturvallisuus ja validoidaan saapuvat tiedot automaattisesti.

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

const t = initTRPC.create();

interface User {
  id: string;
  name: string;
  email: string;
}
const users: User[] = []; // Our 'database'

const appRouter = t.router({
  createUser: t.procedure
    .input(z.object({
      name: z.string().min(1),
      email: z.string().email(),
    }))
    .mutation(({ input }) => {
      const newUser: User = {
        id: `user-${users.length + 1}`,
        name: input.name,
        email: input.email,
      };
      users.push(newUser); // Add to our fake database
      return newUser; // Return the new user object
    }),
});

export type AppRouter = typeof appRouter;
// This router defines how to create a user.

Tietojen päivittäminen: Päivitä-mutaatio

Seuraavaksi käsittelemme olemassa olevien tietojen päivittämistä. updateUser-mutaatio tarvitsee päivitettävän käyttäjän id-arvon sekä muutettavat kentät.

Huomaa, että Zod-skeemassa kentät voidaan määrittää .optional()-metodilla, jos niitä ei aina anneta päivityksen yhteydessä.

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

const t = initTRPC.create();

interface User {
  id: string;
  name: string;
  email: string;
}
const users: User[] = [
  { id: 'user-1', name: 'Alice', email: 'alice@example.com' },
];

const appRouter = t.router({
  updateUser: t.procedure
    .input(z.object({
      id: z.string(),
      name: z.string().min(1).optional(),
      email: z.string().email().optional(),
    }))
    .mutation(({ input }) => {
      const userIndex = users.findIndex(u => u.id === input.id);
      if (userIndex === -1) {
        throw new Error('User not found');
      }
      // Merge existing data with new input
      users[userIndex] = { ...users[userIndex], ...input };
      return users[userIndex]; // Return the updated user
    }),
});

export type AppRouter = typeof appRouter;
// This router defines how to update a user.

Tietojen poistaminen: Poista-mutaatio

Lopuksi luodaan mutaatio tietojen poistamista varten. deleteUser-mutaatio tarvitsee yleensä vain poistettavan tietueen id-arvon.

Palautusarvona voidaan lähettää yksinkertainen onnistumisviesti tai poistetun kohteen tunniste. Tässä palautamme onnistumista ilmaisevan totuusarvon.

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

const t = initTRPC.create();

interface User {
  id: string;
  name: string;
  email: string;
}
const users: User[] = [
  { id: 'user-1', name: 'Alice', email: 'alice@example.com' },
  { id: 'user-2', name: 'Bob', email: 'bob@example.com' },
];

const appRouter = t.router({
  deleteUser: t.procedure
    .input(z.object({ id: z.string() }))
    .mutation(({ input }) => {
      const initialLength = users.length;
      const userIndex = users.findIndex(u => u.id === input.id);
      if (userIndex !== -1) {
        users.splice(userIndex, 1); // Remove from array
      }
      // Return true if an item was removed
      return { success: users.length < initialLength };
    }),
});

export type AppRouter = typeof appRouter;
// This router defines how to delete a user.

Mutaatiokutsut asiakkaalta

Nyt kun olet määrittänyt mutaatiot palvelimella, miten niitä kutsutaan käyttöliittymäsovelluksesta?

tRPC-asiakkaalla pääset yksinkertaisesti käsiksi mutaatioon sen nimen avulla ja kutsut .mutate()-metodia välittäen sille syötetietosi.

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

// A simplified AppRouter type for this client-side example.
// In a real app, you'd import 'AppRouter' from your shared types.
interface User { id: string; name: string; email: string; }
type AppRouter = {
  sayHello: (input: { name: string }) => Promise<string>;
  createUser: (input: { name: string; email: string }) => Promise<User>;
  deleteUser: (input: { id: string }) => Promise<{ success: boolean }>;
};

const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc', // Your tRPC server URL
    }),
  ],
});

async function runMutationCalls() {
  console.log('1. Calling sayHello...');
  const helloRes = await trpc.sayHello.mutate({ name: 'Coddy' });
  console.log(`Result: ${helloRes}`);

  console.log('2. Calling createUser...');
  const newUser = await trpc.createUser.mutate({
    name: 'Eve',
    email: 'eve@example.com',
  });
  console.log('Created:', newUser);

  console.log('3. Calling deleteUser...');
  const deleteRes = await trpc.deleteUser.mutate({ id: newUser.id });
  console.log('Deleted:', deleteRes.success);
}

runMutationCalls();
// This script simulates client-side mutation calls.

Tulosten ja virheiden käsittely

Kun kutsut mutaatiota asiakkaalta, se palauttaa Promisen. Voit käyttää await-avainsanaa tuloksen odottamiseen aivan kuten minkä tahansa asynkronisen toiminnon yhteydessä.

Virheenkäsittelyssä voit käyttää tavallisia JavaScriptin try...catch-lohkoja .mutate()-kutsujen ympärillä. tRPC välittää taustajärjestelmän virheet automaattisesti asiakkaalle.

try {
  const result = await trpc.createUser.mutate({ ... });
  // Handle success
} catch (error) {
  // Handle error
  console.error('Mutation failed:', error.message);
}

Näin virheiden hallinta on suoraviivaista ja tyyppiturvallista.

Milloin mutaatioita käytetään

Muista käyttää mutaatioita kaikissa toiminnoissa, jotka muuttavat palvelimella olevia tietoja. Näitä ovat esimerkiksi:

  • Lomakkeen lähettäminen (esim. käyttäjän rekisteröinti tai kommentin julkaiseminen).
  • Asetuksen vaihtaminen (esim. tumman tilan asetus).
  • Hallinnollisten toimien suorittaminen (esim. käyttäjän estäminen).
  • Tiedostojen lataaminen (vaikka tämä saattaa edellyttää erityiskäsittelyä).

Käyttämällä johdonmukaisesti mutaatioita näissä toiminnoissa säilytät selkeyden ja tyyppiturvallisuuden sekä hyödynnät tRPC:n tehokkaita tietojen muokkausominaisuuksia.

Testaa mutaatio-osaamisesi

Olet oppinut määrittämään ja käyttämään tRPC:n mutaatioproseduureja. On nopean testin aika!

Kertaus: mutaatioproseduurit

Hienoa työtä! Nyt hallitset tRPC:n mutaatioproseduurit:

  • Opit, että mutaatiot on tarkoitettu toimintoihin, jotka muuttavat tietoja (luo, päivitä, poista).
  • Näit, miten mutaatiot määritetään käyttämällä t.procedure.mutation()-rakennetta ja Zodin avulla tehtävää syötteen validointia.
  • Rakensit esimerkit tietojen luomiseen, päivittämiseen ja poistamiseen palvelimella.
  • Opit, miten näitä mutaatioita kutsutaan asiakkaalta ja miten niiden tuloksia käsitellään.

Mutaatiot ovat keskeinen osa vuorovaikutteisten ja tietopohjaisten tRPC-sovellusten rakentamista. Seuraavaksi tutustumme syötteen validointiin tarkemmin Zodin avulla!

Aloita maksutta

Opi tRPC:n tyyppiturvalliset API:t päästä päähän tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
10
Oppitunnit
40

Usein kysytyt kysymykset

Onko oppitunti ”Mutaatioproseduurien kehittäminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa tRPC:n tyyppiturvalliset API:t päästä päähän-oppimispolun 3 oppituntia, myös oppitunnin “Mutaatioproseduurien kehittäminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. tRPC:n tyyppiturvalliset API:t päästä päähän-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Mutaatioproseduurien kehittäminen”?

Rakentakaa tietojen luonti-, päivitys- ja poistotoimintoja varten proseduureja tRPC-mutaatioproseduureilla. Harjoittelet tRPC:n tyyppiturvalliset API:t päästä päähän-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni tRPC:n tyyppiturvalliset API:t päästä päähän-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin tRPC:n tyyppiturvalliset API:t päästä päähän-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Mutaatioproseduurien kehittäminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä tRPC:n tyyppiturvalliset API:t päästä päähän-oppitunnilla?

Kyllä. Jokainen tRPC:n tyyppiturvalliset API:t päästä päähän-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Rakenteen luominen tRPC-reitittimillä
  2. Kyselyproseduurien toteuttaminen
  3. Mutaatioproseduurien kehittäminen
  4. Routerien yhdistäminen ja sisäkkäisyys
← Takaisin: tRPC:n tyyppiturvalliset API:t päästä päähän