tRPC vs oRPC: RPC type-safe na prática
tRPC e oRPC são padrões competentes de RPC type-safe; escolha por DX medida no seu Next/Nest/TanStack Start, não por hype.
O que cada um otimiza
Nesta parte do material sobre trpc vs orpc, o foco é «O que cada um otimiza». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Agora temos dois padrões competentes para o TypeSafe, chamadas de procedure calls ou RPCs, em seu Next.js, ou Nest.js, ou Tansac Start Application. Então, neste vídeo, vamos comparar essas coisas e desenvolver este grado útil que você pode usar para escolher entre requerimentos de API raw, funções de server, TRPC ou ORPC. Primeiramente vamos ver TRPC e para fazer isso vamos criar uma aplicação de TANSTACK START Para fazer isso vamos usar a app CREATE START, essa é uma aplicação que eu uso É uma criadora CLI e ela só tem configurações para TRPC e ORPC, então vamos dar uma olhada Vou chamar essa aqui TRPC TEST e importante, abaixo em ADD-ONS vou escolher TRPC Vou trazer isso no meu editor, agora vamos ligar e vamos ver Certo, então aqui está nossa app e o que vamos fazer é que vamos construir isso.
Vamos começar a olhar para acesso a API raw, então post e get endpoints com query tan stack e então vamos olhar para funções de server, então vamos olhar para trpc e então vamos olhar para orpc porque você vai ver as diferentes linhas de segurança de tipo e validação de input enquanto passamos por essas e isso vai dar você algum sentido de quais são suas diferentes opções e em E em cada ponto, eles vão usar. Um exemplo de to do, então vamos começar com esta lista de to do de TAN stack queries, temos nossos to dos aqui, podemos dizer, você sabe, novo to do e podemos adicioná-lo e você sabe, parece bem bom, então vamos ver como isso é realmente implementado, tudo bem, então se eu for aqui para as rotas, podemos ver api demo tq para tansac query todos, vemos no topo alguns todos em memória e então definimos our server route, so we've got git que retorna os to-dos e depois post que toma a requerida do JSON que tira o nome daquilo, é só uma string e depois adiciona isso na lista de to-dos e responde com o novo to-do que criou com a nova ID. Então, no topo da nossa UI, temos que manualmente definir o tipo do to-do porque isso não foi definido até agora e precisamos disso porque estamos no TypeScript e queremos usar a query us e queremos que o dado volte do query us para ser desse tipo para que possamos ter segurança de tipo, então é aqui que usamos o genérico na query us e retomamos o dado que é um array de todos para ir e pegar esse dado, simplesmente chamamos aquele endpoints de API que criamos de forma default, isso vai ser um get e ele retorna o json fora disso, uma vez que temos esse dado então podemos formatar os todos e depois para adicionar um todo, temos um campo de entrada que gestiona o todo como um botão que chama submit to do, então o que é submit to do?
DX e tipagem fim-a-fim
Nesta parte do material sobre trpc vs orpc, o foco é «DX e tipagem fim-a-fim». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Então, submit to do adiciona o to do e depois o coloca em uma string vazia, então o que é ad to do? Bem, ad to do é uma função que retornamos de use mutation, obtemos a função mutate, mapamos isso para ad to do e então essa função mutate chama aquele mesmo endpoints do API, mas desta vez com um post para ir e adicionar um novo to do e então o corpo é a string e uma vez que isso é sucesso, então recolhemos a lista de todos Então, realmente, a parte importante é que não há segurança de tipo entre essas duas coisas. Se o contrato de API do TQ para fazer mudanças, então nós não recebemos nenhuma notificação sobre isso no lado do cliente.
E no lado do cliente, se chamarmos de uma forma que não esperamos, então eu não sei o que acontece. Sim, porque voltamos um objeto e quando tentamos render ele, ele explodiu porque no React, render um objeto explodiu. Para fazer esse tipo de validação aqui não estamos fazendo nenhum disso e é por isso que ficou tudo bem, então vamos chamar isso de padrão de API raw e falar sobre o que ele apoia e o que não apoia e vamos normalizar isso contra todas as nossas outras opções, então, primeiro de tudo, o que apoia o TypeScript, não o apoia, o que apoia o off, o que apoia o off se tivéssemos isso autenticado, sim, você teria que ir e adicioná-lo manualmente, mas isso é basicamente o mesmo com qualquer dessas soluções, isso valida os inputs certamente não é de default, é claro que você teria que adicionar isso Você tem controle completo sobre a URL, você tem controle completo sobre o output da API, o que significa que você pode retornar qualquer tipo de formato JSON que quiser, ou um stream HTTP ou um stream SSE se quiser, isso é tudo a sua conta.
Na prática
Comparar tRPC e oRPC para RPC type-safe em Next/Nest/TanStack Start.
Ecossistema e trade-offs
Nesta parte do material sobre trpc vs orpc, o foco é «Ecossistema e trade-offs». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Bem, uma ótima maneira de fazer isso dentro de sistemas como Next.js ou Tansac Start é usar funções de server. Ok, vamos dar uma olhada na rota de funções de server start de demo e, direto no topo aqui, vamos trazer a função de server criar de React. Comece, é assim que definimos funções de server e usaremos essa função de server para definir duas funções de server diferentes que vamos usar, vamos usar get todos para obter os todos listados atualmente, vamos definir que é um método get Isso é ótimo, então você pode definir o método de HTTP que você quer usar.
Neste caso, o handler vai ler os ToDos de um arquivo, e depois puxar o novo ToDo, escrever o arquivo, e então retornar uma lista completa de ToDos. E o que queremos fazer é ir e pegar esses todos, para que quando render a página, nós realmente render os todos direto para a página. Para fazer isso, definimos um loader e esse loader vai chamar essa função de server de get todos, retomar essa data e então podemos usar essa data dentro da rota apenas dizendo rota.useLoaderData e isso nos dá uma lista de todos agora, tudo o que o ui tem é praticamente o mesmo, então vamos fazer um clique em submit to do, é aqui que adicionamos um todo e é bem interessante aqui, então se nós mudarmos, por exemplo, isso para um objeto, bem, sabemos que adicionar todo toma uma string, então isso vai nos dar o tipo de revisão aqui então nós realmente temos um completamente e e tipo de salvação com nossas funções de server, então vamos trazer o grid de volta e vamos adicionar funções de server, então TypeScript sim, você pode adicionar suporte de off sem problemas com isso, nós obtemos essa validação de entrada, tudo bem, mas vamos e realmente voltar ao cliente e ver o que a url parece e qual é o formato de entrada, tudo bem, então se eu adicionar mais um para fazer, então a url para este é esta longa conjugação do módulo, assim como o nome nome de uma função, nós não conseguimos controlar isso.
Quadro de decisão
Nesta parte do material sobre trpc vs orpc, o foco é «Quadro de decisão». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
A url deste ponto final, nem conseguimos definir o que é o payload, nem conseguimos definir o que a resposta de resposta parece e isso não é um formato standardizado, isso é apenas algo que tansec start faz em termos de como ele faz suas funções de server, não é compatível com como next.js faz suas funções de server ou outras plataformas fazem suas funções de server, nem qualquer uma dessas interoperáveis, então realmente não há padrões acontecendo aqui, mas é Incrívelmente conveniente. Uso de API raw e funções de server, vamos dar uma olhada no TRPC para ver quais as vantagens que ele traz. Então vamos começar olhando para o TRPC todo, vamos adicionar o olá novamente à lista de todos os TRPCs e vamos dar uma olhada em como isso foi implementado.
Então temos nossa rota de demo aqui no topo e o que a rota de demo está fazendo é usar uma combinação de Query de React e TRPC, de fato, neste caso, TRPC é basicamente construído em cima de Query de React, então O nosso loader, que está recebendo nossos to-dos no tempo de render de server-side, está chamando o query pré-catch no nosso cliente de query para iniciá-lo com a query do tRPC. Bem, aqui em integrações, tRPC, e nosso router tRPC tem uma lista de to-dos em memória, como dois procedimentos públicos, um para lista e outro para adição. E então, o router de todos é adicionado ao router de TRPC total e você pode ter o maior número desses routers que quiser.
Sinais de que está funcionando
Nesta parte do material sobre trpc vs orpc, o foco é «Sinais de que está funcionando». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Por exemplo, podemos ver aqui que o dados que saem dessa query usam, de fato, um todo que tem a id e o nome como um array ou não definido neste caso, se não está pronto. Então adicione foobar e podemos ver que recebemos uma errada de typo porque essa mutação de addTodo que definimos no router só toma nome como um item de todo. Então, eu acho que você pode ver porque muitas pessoas gostam de tRPC, então vamos adicioná-lo à nossa lista de opções e ver como ele se compara com tudo o resto.
Sim, você pode adicionar procedimentos protegidos, dar-se um suporte de auth, ele tem essa validação de entrada, de fato, ele faz tudo isso para você, gratuito. No caso desse setup, eu coloquei no API tRPC, mas você pode decidir onde você quer que isso seja. Na verdade, com o V11 você também consegue definir os métodos que são usados para setar e postar e tudo isso.
O que evitar na primeira semana
Nesta parte do material sobre trpc vs orpc, o foco é «O que evitar na primeira semana». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Agora, em termos de padrões, vou dizer não porque, de fora da caixa, não vem com algo que seja compreendido como um GraphQL ou um OpenAPI, embora você poderia adicionar o OpenAPI mais tarde com uma extensão. Agora, uma coisa que é realmente interessante sobre o tRPC é que quando você pensa de um nível arquitetônico, você poderia ter uma definição do seu router tRPC que foi implementado, por exemplo, pela sua aplicação de 10sec start ou sua aplicação XJS. E também ter uma aplicação nativa de React que conecte àquele router para receber esses typings em, digamos, uma monorepo, você poderia fazer isso e eu acho que isso é realmente interessante, mas isso seria dentro de um projeto, talvez dentro de uma organização com uma empresa, então o que se você quiser ter endpoints RPC que são type-safe mas também são apresentados em um padrão que pode ser usado, por exemplo, por Go ou Rust ou dado a um cliente para que eles possam se conectar aos seus endpoints, bem, é aí que o RPC entra.
Então vamos selecionar o ORPC e vamos trazer esse aqui e agora vemos que em vez de TRPC todo, temos o ORPC todo, podemos adicionar outro todo, aí você vai. De novo, ambos estes sistemas estão alinhados em cima de reacquery, então muito fácil de usar vamos dar uma olhada em nossa query us e nossa mutação us, então use query lá na linha 19 é exatamente o mesmo que vimos no loader o que está acontecendo é que porque fizemos essa pre-fetch é apenas receber essa data de repente, então quando você está fazendo o ssr no server está pronto para ir fora daquele loader e a mutação está chamando o rpc para fazer um call E, como com o tRPC, se eu adicionar. Certo, vamos dar uma olhada em como o ORPC é implementado, então aqui nós temos uma diretória chamada ORPC e dentro desse router, o router traz duas funções, list todo e adicionar todos, eles são de todos, novamente, nós temos uma lista de todos na memória para definir uma função, você você só chame em cima da variável OS, ou servidor ORPC, você dá.
Como explicar isso para o time
Nesta parte do material sobre trpc vs orpc, o foco é «Como explicar isso para o time». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Por exemplo, inputs, se você tiver alguma tipo de autenticação ou algo assim, você pode adicionar endpoints, você também pode especificar um caminho, como bem como um método, e claro, o handler aqui, onde neste caso estamos apenas definindo os to-dos, o Add-to, neste caso, usa o design para definir a esquema de inputs e então tem o handler para ir e lidar com a solicitação vinda. Uma das coisas que é realmente legal sobre isso é que se olharmos para as rotas, então nossa rota api rpc é como tudo é routado para o sistema RPC, mas também há esse dólar API, então qualquer coisa que saiba API vai acessar esse handler opcional e esse handler opcional te dá uma UI em cima de OpenRPC. Isso é super legal, então eu navego para o slash API, eu pego essa UI completa que me mostra todos os diferentes métodos que eu tenho, eu posso invocá-los daqui.
Eu posso ver os diferentes tipos de modelos que eu tenho isso é incrível e até mais legal eu volto para o topo e eu desligo o documento do OpenAPI oh isso é tão legal ok eu vou vir aqui eu pego o arquivo tansac.orpc.playground.json vou vir para o meu postman vou colocar isso lá Vou trazer isso como um OpenAPI 3.1 com coleção de postman. Ou endpoints de API, tão facilmente quanto isso, traz isso para Postman, ou você pode usar Go, Rust ou qualquer outro que você queira, e você tem acesso aos seus endpoints, muito bom. Bem, espero que isso ajude a tomar suas decisões entre as diferentes opções que você tem, APIs de rares, funções de server, TRPC e ORPC.
Na prática
Próximo passo: escolha uma métrica (taxa de sucesso, tempo, retries ou conversão) e rode um experimento de 7 dias antes de escalar o padrão.