React ve Next.js ile tRPC Kurulumu

Çekirdek tRPC paketleri için @trpc/server ve @trpc/client paketlerini yükleyin. React kancaları bağdaştırıcısı için @trpc/react-query paketini, bu kancaları çalıştıran eş bağımlılık olarak da @tanstack/react-query paketini ekleyin.

Next.js API rotası bütünleştirmesi için tRPC'nin güncel sürümlerinde ek bir bağdaştırıcı paketine gerek yoktur.

Bir server/trpc.ts dosyası oluşturun ve t nesnesini elde etmek için initTRPC.create() çağrısını yapın. t.router'ı router, t.procedure'ı publicProcedure ve t.mergeRouters'ı bir yardımcı olarak dışa aktarın.

initTRPC fabrikası, her prosedürün ctx bağımsız değişkeninde hangi verilerin kullanılabileceğini tanımlayan bir bağlam türü genel parametresini kabul eder.

Bir prosedür, publicProcedure üzerine .input(zodSchema).query(handler) veya .mutation(handler) zincirlenerek tanımlanır. Basit bir hello uç noktası için: publicProcedure.input(z.object({ name: z.string() })).query(({ input }) => "Hello " + input.name).

Zod şeması, hem TypeScript türlerini hem de input için çalışma zamanı doğrulamasını sağlar.

router() işlevini kullanarak bir appRouter oluşturun: router({ hello: helloHandler, users: usersRouter }). İç içe yönlendiriciler, prosedürleri alanlarına (users, posts, comments) göre ayrı dosyalarda düzenlemenizi sağlar.

AppRouter türünü dışa aktarın: export type AppRouter = typeof appRouter. İstemcinin içe aktaracağı tür budur.

app/api/trpc/[trpc]/route.ts (App Router) veya pages/api/trpc/[trpc].ts (Pages Router) oluşturun. Tüm tRPC isteklerini bu tek, tüm istekleri yakalayan rota üzerinden işlemek için @trpc/server/adapters/fetch içindeki fetchRequestHandler'ı kullanın.

Yönlendiriciyi, createContext işlevini ve istek/yanıt nesnelerini fetchRequestHandler'a geçirin.

Bir utils/trpc.ts dosyası oluşturun. Türleri belirlenmiş trpc istemci nesnesini oluşturmak için createTRPCReact<AppRouter>() çağrısını yapın. Bu nesnede yönlendiricinizdeki her prosedür için bir özellik bulunur ve her özellik React Query kancaları sunar.

AppRouter türünün içe aktarımı sunucu dosyanızdandır; TypeScript, tüm kullanımları doğrulamak için içe aktarma zincirini izler.

Uygulama yerleşiminizde veya _app.tsx dosyanızda bir QueryClient örneği ve trpc.createClient({ links: [httpBatchLink({ url: '/api/trpc' })] }) kullanarak bir tRPC istemcisi oluşturun.

Bileşen ağacınızı hem trpc.Provider (tRPC istemcisiyle) hem de QueryClientProvider (QueryClient ile) içine sarın. Her iki sağlayıcı da gereklidir.

Herhangi bir bileşende: const { data, isLoading, error } = trpc.hello.useQuery({ name: 'World' }). Kanca tamamen tür denetiminden geçer: data, hello prosedürünün çıkarılan dönüş türüdür ve input nesnesinin türü Zod şemasına göre denetlenir.

Yanlış bir input türü geçirmek, çalışma zamanı hatası değil, TypeScript derleme hatası oluşturur.

tRPC'nin çalışması için istemcinin sunucu dosyasındaki türleri içe aktarabilmesi gerekir. Bir Next.js projesinde sunucu ve istemci kodu aynı TypeScript derlemesini paylaşır; bu nedenle içe aktarmalar doğrudan çalışır.

Ayrı paketlerin bulunduğu çoklu paket deposunda, sunucu paketini göstermek için tsconfig.json içinde TypeScript proje başvurularını veya yol takma adlarını yapılandırın.

tRPC işleyicisi sunucuda çalışır (Next.js API rotası veya Edge işlevi olarak). tRPC istemcisi tarayıcıda çalışır. TypeScript, tür düzeyindeki içe aktarmaları derleme zamanında değerlendirir ve tarayıcıda sunucu kodunu çalıştırmaz.

İstemcide gerçek uygulama değil, yalnızca AppRouter türü içe aktarılır; bu nedenle sunucu gizli bilgileri istemci paketine sızmaz.

Next.js geliştirme sunucusunu başlatın ve tarayıcı konsolunu açın. trpc.hello.useQuery çağrısı sunucu yanıtını günlüğe yazmalıdır. /api/trpc/hello adresine gönderilen HTTP isteğini görmek için Ağ sekmesini kontrol edin; input, bir sorgu parametresi olarak toplu hâlde gönderilir.

Varsayılan httpBatchLink, eşzamanlı birden fazla isteği tek bir HTTP çağrısında birleştirir; bunu ağ akışında görebilirsiniz.

tRPC örneğini başlatıp yönlendirici ve prosedür fabrikalarını sağlayan işlev hangisidir?

@trpc/server, @trpc/client, @trpc/react-query ve @tanstack/react-query paketlerini yükleyin. initTRPC.create() ile tRPC'yi başlatın, prosedürleri tanımlayın ve AppRouter türünü dışa aktarın. Next.js API tüm istekleri yakalayan rotasını oluşturun, TRPCProvider ile QueryClientProvider'ı kurun ve ardından prosedürleri trpc.procedureName.useQuery() ile çağırın.

TypeScript, kod üretmeden istemci-sunucu sözleşmesinin tamamını derleme zamanında uygulatır.