Full-stack Type Safety met tRPC: een match made in heaven

Wat is type safety?

Type safety is een eigenschap van programmeertalen die ervoor zorgt dat een programma met een error stopt als er een mismatch is tussen de types van de in- en output’s.

Waarom is type safety zo cruciaal?

Als een stuk code niet type safe is, loopt het het risico onjuiste output te produceren! Dit is een ernstig probleem dat kan leiden tot bugs en dataverlies. Een type safe programma is een programma dat type-controle uitvoert als onderdeel van de normale werking van de taal. De taal controleert de typen gegevens wanneer een programma wordt gecompileerd en stopt met een foutmelding als de types niet overeenkomen. Er zijn een paar redenen waarom type safety essentieel is voor een succesvol softwareontwikkelingsproces:

• Verbeterde leesbaarheid en onderhoudbaarheid

• Type safe code is gemakkelijker te lezen en toegankelijker voor nieuwe ontwikkelaars. Ervaren ingenieurs kunnen typeveiligheid gebruiken als een soort "contract" om ervoor te zorgen dat hun workflows grondig worden gedocumenteerd.

• Type safety helpt fouten eerder in het ontwikkelingsproces op te sporen door ervoor te zorgen dat gegevens consistent zijn. Dit verkleint de kans dat bugs in de productie terechtkomen.

Waarom tRPC?

Bij het bouwen van TypeScript-applicaties is het moeilijk om volledige type-safety te hebben tussen de frontend en de backend. Je zou denken om meer types te schrijven, maar de beste type systems zouden helemaal geen types moeten schrijven. En dit is waar tRPC schittert!

tRPC is een library waarmee u volledig type-safe API's kunt maken zonder dat er schema's nodig zijn. Met tRPC kunt u types delen tussen uw client en server, en alleen de types - niet de servercode - importeren in uw frontend. Met end-to-end type safety kun je fouten tussen je frontend en backend opvangen tijdens het compileren.

tRPC en GraphQL bieden dezelfde functionaliteit: Data krijgen van de server naar de client. GraphQL is een specificatie waarmee de client specifieke gegevens kan opvragen, die de server omzet in een antwoord met alleen de gevraagde velden. tRPC is een protocol waarmee de client door de server gedefinieerde procedures kan aanroepen, relevante invoer kan doorgeven en een antwoord terugkrijgt. De invoer wordt bij runtime gecontroleerd met behulp van validatie libraries zoals Zod, Yup of Superstruct. De types van de procedures kunnen worden afgeleid van de server naar de client. De API van tRPC kan rechtstreeks worden aangeroepen, maar bevat een wrapper rond React Query, die een uitstekende gebruikerservaring garandeert.

Zowel GraphQL als tRPC ondersteunen end-to-end type controle, waarbij GraphQL codegeneratie vereist tijdens de ontwikkeling. Beide zijn snel genoeg voor onze doeleinden.

1. Eerst moet je een router aanmaken:

Initialiseer je tRPC backend met de initTRPC functie en maak je eerste router aan.

2. Maak tRPC-hooks

Maak een reeks sterk getypeerde hooks met behulp van de API's type signature.

// utils/trpc.ts
// ======================================================

import { httpBatchLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
import type { AppRouter } from '../server/routers/_app';

function getBaseUrl() {
  if (typeof window !== 'undefined')
    // browser should use relative path
    return '';

  if (process.env.VERCEL_URL)
    // reference for vercel.com
    return `https://${process.env.VERCEL_URL}`;

  if (process.env.RENDER_INTERNAL_HOSTNAME)
    // reference for render.com
    return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;

  // assume localhost
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

export const trpc = createTRPCNext<AppRouter>({
  config({ ctx }) {
    return {
      links: [
        httpBatchLink({
          /**
           * If you want to use SSR, you need to use the server's full URL
           * @link https://trpc.io/docs/ssr
           **/
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
      /**
       * @link https://tanstack.com/query/v4/docs/reference/QueryClient
       **/
      // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
    };
  },
  /**
   * @link https://trpc.io/docs/ssr
   **/
  ssr: true,
});
// => { useQuery: ..., useMutation: ...}

3. Configureer _app.tsx

// pages/_app.tsx
// ======================================================

import type { AppType } from 'next/app';
import { trpc } from '../utils/trpc';

const MyApp: AppType = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default trpc.withTRPC(MyApp);

4. Maak de API requests

// pages/index.tsx
// ======================================================

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

Conclusie

Hoewel moderne technologieën het ontwikkelingsproces kunnen helpen stroomlijnen, moeten ingenieurs erop letten hun code zo te ontwerpen dat deze type safe is. Full-stack type safety met tRPC maakt het gemakkelijker om code te schrijven die vrij is van runtime fouten.