Wprowadzenie do TRPC- budowanie efektywnego API

TRPC to biblioteka, która upraszcza budowę bezpiecznych i wydajnych API, umożliwiając efektywne budowanie aplikacji. Używając TRPC, programiści mogą skupić się na pisaniu funkcji zamiast manualnym tworzeniu i obsłudze endpointów, co czyni proces tworzenia API szybszym i bardziej efektywnym. Ważne jest zapoznanie się z podstawowymi konceptami przetwarzania zadań zdalnych (TRPC), takimi jak procedury, routery i adaptery. Alternatywą dla niego mogą być takie narzędzia jak GraphQL czy REST, jednak biorąc pod uwagę TypeScript, TRPC wydaje się bardziej efektywnym i intuicyjnym rozwiązaniem.

Planowanie struktury API

Planowanie struktury bezpiecznych API jest podstawą każdej nowoczesnej aplikacji. Kluczem jest zrozumienie, jakie dane są przesyłane, gdzie są przechowywane i jak są chronione. To obejmuje zdecydowanie, które dane są publiczne, a które muszą być chronione. Ważnym krokiem jest również zaprojektowanie systemu autoryzacji, który zapewni właściwy dostęp do danych. TRPC zapewnia adaptery do popularnych rozwiązań które mogą być niezwykle przydatne przy tworzeniu logiki odpowiedzialnej za obsługiwanie żądań. Przy tworzeniu routerów biblioteka umożliwia nam tworzenie publicznych oraz zabezpieczonych procedur- które wymagają od użytkownika określonych permisji aby żądania zostały poprawnie obsłużone.

Czy szukasz wykonawcy projektów IT ?

Sprawdź case studies

Instalacja i podstawowa konfiguracja TRPC

Konfiguracja środowiska do pracy z TRPC jest pierwszym kluczowym krokiem. Bogate możliwości tej biblioteki ułatwiają tworzenie API opartych na typach i funkcjach. Aby rozpocząć pracę, wymagana jest instalacja odpowiednich paczek przy użyciu preferowanego menadżera paczek, dla przykładu skorzystamy z npm:

npm install @trpc/server@next @trpc/client@next

Na początku musimy zdefiniować instancję TRPC:

// server

import { initTRPC } from '@trpc/server';
 
const trpc = initTRPC.create();

Następnie możemy przejść do stworzenia routera:

// server

const appRouter = trpc.router({
	getUser: trpc.publicProcedure.query(async (ctx) => {
		const user = db.user.findFirst(ctx.user)
		
		return user;
	})
})

export type AppRouter = typeof appRouter;
// przyda się dla zainicjowania kodu po stronie klienta

W powyższym przykładzie inicjowana jest instancja TRPC do której następnie podłączany jest router, który posiada publiczną procedurę "getUser" która zwraca aktualnego użytkownika na bazie kontekstu. Dodatkowo na końcu eksportowany jest typ całego routera, który przyda się przy implementacji TRPC po stronie klienta. Takie rozwiązanie zapewnia pełne pokrycie typowania w momencie korzystania z API.

Konfiguracja TRPC po stronie klienta

Aby w pełni wykorzystać możliwości TRPC musimy również skonfigurować go po stronie klienta.

// client

import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
export const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});

// client

const user = await trpc.getUser.query();

Po zainicjowaniu klienta TRPC, można go używać w dowolnym miejscu w aplikacji po prostu go importując. Dzięki temu otrzymujemy w pełni otypowane procedury i wyniki od poszczególnych routerów i endpointów.

Podsumowanie

TRPC to biblioteka, która usprawnia tworzenie bezpiecznych i wydajnych API poprzez abstrakcję obsługi endpointów. Kluczowe koncepcje TRPC to procedury, routery i adaptery, które pomagają utrzymać wysoki poziom bezpieczeństwa. Planowanie struktury API jest kluczowe dla nowoczesnych aplikacji, a TRPC ułatwia tworzenie logiki routerów i procedur. Inicjalizacja i konfiguracja TRPC zarówno po stronie serwera, jak i klienta są kluczowymi krokami w implementacji. Dzięki pełnemu typowaniu, TRPC zapewnia bezproblemową i efektywną obsługę API.

FAQ – najczęstsze pytania dotyczące tRPC

1. Czym dokładnie jest tRPC?

tRPC to biblioteka TypeScript umożliwiająca tworzenie API bez potrzeby pisania osobnych typów dla klienta i serwera. Dzięki niej możemy budować pełne typowanie end-to-end bez użycia REST czy GraphQL.

2. Czy tRPC nadaje się do produkcji?

Tak, tRPC jest wykorzystywane w wielu projektach produkcyjnych. Jest aktywnie rozwijane i posiada solidną dokumentację. Należy jednak pamiętać o dobrych praktykach bezpieczeństwa i wydajności.

3. Jak tRPC różni się od REST i GraphQL?

tRPC pozwala na komunikację między klientem a serwerem z pełnym typowaniem, bez potrzeby definiowania schematów. REST i GraphQL wymagają jawnych kontraktów – tRPC opiera się na typach TypeScript.

4. Czy mogę używać tRPC z React?

Tak, tRPC świetnie współpracuje z Reactem, szczególnie z frameworkiem Next.js. Istnieją gotowe hooki ułatwiające integrację z komponentami React.

5. Czy muszę znać TypeScript, żeby korzystać z tRPC?

Zdecydowanie tak. TypeScript jest podstawą działania tRPC i umożliwia automatyczne dziedziczenie typów między serwerem a klientem.

6. Jakie są zalety tRPC w porównaniu do tradycyjnego REST API?

• Brak konieczności pisania i synchronizowania schematów API
• Mniej boilerplate'u
• Lepsze wsparcie dla refaktoryzacji dzięki typom
• Szybsze prototypowanie i mniej błędów w czasie uruchomienia

7. Czy tRPC wspiera autoryzację i uwierzytelnianie?

Tak, tRPC pozwala na tworzenie warstw middleware, które mogą obsługiwać autoryzację i uwierzytelnianie, np. z użyciem JWT, session cookies czy bibliotek jak next-auth.

8. Czy można korzystać z tRPC poza Next.js?

Tak, chociaż tRPC jest często używane z Next.js, można je zintegrować z innymi środowiskami Node.js – np. Express, Fastify czy Vite.