Sorgular, Değişiklikler ve Abonelikler

publicProcedure üzerine .input(zodSchema).query(async ({ input, ctx }) => ...) zincirini ekleyin. İşleyici, doğrulanmış input'u ve istek bağlamını alır. Bir nesne, dizi veya ilkel değer gibi serileştirilebilir herhangi bir değer döndürün.

Dönüş türü otomatik olarak çıkarılır ve istemcideki karşılık gelen useQuery kancasının veri türü olur.

trpc.post.getById.useQuery({ id: '1' }), post yönlendiricisindeki getById prosedürünü çağırır. Kanca, React Query'nin alışılmış sonuç nesnesini döndürür: { data, isLoading, isError, refetch }.

input nesnesi statik olarak türlendirilmiştir: şema bir dize beklerken { id: 123 } geçirmek, geliştirme sırasında yakalanan bir TypeScript hatasıdır.

Sunucu tarafındaki veri yazma işlemleri için .input(zodSchema).mutation(async ({ input, ctx }) => ...) kullanın: veri oluşturma, güncelleme veya silme. Mutasyonlar bileşen oluşturulduğunda otomatik olarak çalışmak yerine açıkça çağrılır.

Mutasyon işleyicisi, ctx aracılığıyla tam istek bağlamına (NextAuth oturumu da dâhil) erişebilir.

const { mutate, isLoading, error } = trpc.post.create.useMutation(). Mutasyonu tetiklemek için mutate({ title: 'New', content: '...' }) çağrısını yapın. React Query'nin useMutation kancası gibi bu da bileşen oluşturulduğunda çalışmaz.

Mutasyon sonrası yan etkiler için onSuccess ve onError geri çağırmalarını useMutation seçeneklerine geçirin.

Başarılı bir mutasyondan sonra sorgu verilerini yenilemek için tRPC yardımcı kancasını kullanın: const utils = trpc.useUtils(). onSuccess içinde, gönderi listesinin yeniden alınmasını tetiklemek üzere utils.post.getAll.invalidate() çağrısını yapın.

Bu, tRPC'deki React Query eşdeğeri olan queryClient.invalidateQueries() yöntemidir ve aynı eskimiş sayma ve yeniden getirme düzenini izler.

tRPC, input doğrulaması için varsayılan olarak Zod kullanır. Zod şeması, çalışma zamanında sunucuda çalışır ve biçimi bozuk input'un işleyiciye ulaşmadan reddedilmesini sağlar. Aynı şema istemci için TypeScript türlerini de sağlar.

Bu iki işlev, tekrarları ortadan kaldırır: sözleşmeyi Zod'da bir kez tanımlarsınız ve hiçbir ek çaba harcamadan her iki güvenlik güvencesini de elde edersiniz.

tRPC, varsayılan olarak birden fazla eşzamanlı tRPC isteğini tek bir HTTP isteğinde toplu hâle getiren httpBatchLink'i kullanır. Aynı bileşenin oluşturma döngüsündeki birden fazla useQuery çağrısı birlikte gönderilir ve birlikte çözümlenir.

Bu yöntem, bir sayfada birden fazla veri gereksinimi olduğunda her sorgu için ayrı HTTP istekleri göndermeye kıyasla ağ yükünü önemli ölçüde azaltır.

Bir abonelik prosedürü tanımlayın: publicProcedure.subscription(async function*() { while (true) { yield await nextEvent(); } }). Abonelikler eşzamansız üreteçleri kullanır ve bir WebSocket aktarımı gerektirir.

Abonelikler, anlık bildirimler, ortak çalışmalı düzenleme imleçleri veya akış hâlindeki yapay zekâ yanıtları gibi gerçek zamanlı özellikler için idealdir.

httpBatchLink'i splitLink kullanarak httpBatchLink ile wsLink birleşimiyle değiştirin: abonelikleri wsLink'e, sorgu ve mutasyonları httpBatchLink'e yönlendirin. WebSocket istemcisini createWSClient({ url: 'ws://localhost:3000' }) ile oluşturun.

Bu karma aktarım sayesinde isteklerin çoğu verimli HTTP toplu işlemesini kullanırken abonelikler kalıcı WebSocket bağlantılarını kullanır.

trpc.notifications.onNew.useSubscription(undefined, { onData: (notification) => addToList(notification), onError: console.error }) prosedüre abone olur. onData geri çağırması, üretilen her değer için çağrılır.

WebSocket bağlantısı kesilip yeniden bağlandığında abonelik otomatik olarak yeniden oluşturulur.

Gerçek zamanlı bir liste sayfası, başlangıç listesini yüklemek için bir sorgu, bir öğe eklemek için bir mutasyon ve diğer kullanıcılardan gelen canlı eklemeleri almak için bir abonelik kullanabilir. Bu üçünün türleri aynı AppRouter'a göre belirlenir ve doğal biçimde birlikte çalışır.

Önbellek geçersiz kılma stratejisi, tam yeniden getirmeyi (mutasyondan sonra geçersiz kılma) mi yoksa önbellek güncellemelerini mi (utils.post.getAll.setData) tercih ettiğinize bağlıdır.

Bir mutasyon başarıyla tamamlandıktan sonra bir sorgunun yeniden alınmasını hangi tRPC yardımcı yöntemi tetikler?

Sorguları .query(), mutasyonları ise .mutation() ile tanımlayın; her ikisi de Zod şemalarıyla doğrulanır. İstemcide trpc.router.procedure.useQuery() ve useMutation() kullanın. Mutasyon sonrasında utils.procedure.invalidate() ile sorguları geçersiz kılın. Abonelikler eşzamansız üreteçleri kullanır ve WebSocket aktarımı için wsLink gerektirir.

httpBatchLink, eşzamanlı sorguları varsayılan olarak tek bir HTTP isteğinde toplu hâle getirir.