From f5a56b3431db34075e349d21fb81d44f2145e486 Mon Sep 17 00:00:00 2001 From: victor Date: Fri, 27 Sep 2024 02:18:44 -0300 Subject: [PATCH 1/2] =?UTF-8?q?atualiza=C3=A7=C3=A3o=20para=20a=20nova=20v?= =?UTF-8?q?ers=C3=A3o=20do=20trpc?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- stack/trpc/instalacao.md | 13 +++++++++---- stack/trpc/pratica.md | 39 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+), 4 deletions(-) diff --git a/stack/trpc/instalacao.md b/stack/trpc/instalacao.md index 60bd369..a327559 100644 --- a/stack/trpc/instalacao.md +++ b/stack/trpc/instalacao.md @@ -12,16 +12,21 @@ O tRPC possui vários tipos de pacotes com conteúdos extras, para instalar o pa - Deve-se certificar que a versão do TypeScript seja igual ou superior à versão 4.7.0. - É recomendado a atribuição "strict": true no arquivo `tsconfig.json`, já que não há suporte para o contrário. +- TanStack Query na versão 5.0.0 !!! +++ npm -`npm install @trpc/server @trpc/client` +`npm install @trpc/server@next @trpc/client@next @trpc/react-query@next @trpc/next@next @tanstack/react-query@latest @tanstack/react-query-devtools@latest` + +++ yarn -`yarn add @trpc/server @trpc/client` +`yarn add @trpc/server@next @trpc/client@next @trpc/react-query@next @trpc/next@next @tanstack/react-query@latest @tanstack/react-query-devtools@latest` + +++ pnpm -`pnpm add @trpc/server @trpc/client` +`pnpm add @trpc/server@next @trpc/client@next @trpc/react-query@next @trpc/next@next @tanstack/react-query@latest @tanstack/react-query-devtools@latest` + +++ bun -`bun add @trpc/server @trpc/client` +`bun add @trpc/server@next @trpc/client@next @trpc/react-query@next @trpc/next@next @tanstack/react-query@latest @tanstack/react-query-devtools@latest` + +++ ## Pacotes recomendados diff --git a/stack/trpc/pratica.md b/stack/trpc/pratica.md index 0e4f409..b7f204e 100644 --- a/stack/trpc/pratica.md +++ b/stack/trpc/pratica.md @@ -24,6 +24,17 @@ export const publicProcedure = t.procedure;
+### Inicialização do App Router +Seguidamente, inicializaremos nossa instância principal do roteador, comumente chamada de `appRouter`, na qual adicionaremos procedimentos anteriormente. Por fim, precisamos exportar o tipo do roteador que usaremos posteriormente no lado do cliente. + +```ts import { router } from './trpc'; +  +const appRouter = router({ +}); + +export type AppRouter = typeof appRouter; // NÃO exporte o prórpio roteador +``` + ### Por que exportar? Exportamos duas propriedades que definimos no arquivo `trpc.ts` para facilitar o uso delas em quaisquer outros arquivos e alguma possível manutenção dessa aplicação, pois precisaremos fazer alterações no "arquivo fonte" e não em todos os lugares onde as usarmos. @@ -98,6 +109,28 @@ const name = z.string({ Para mais informações sobre o a validação de dados, clique [aqui](https://zod.dev) !!! +## Adicionando um procedimento +O tRPC faz uma distinção entre procedimentos de consulta e mutação, semelhante ao GraphQL. + +A maneira como um procedimento funciona no servidor não muda muito entre uma consulta e uma mutação. O nome do método é diferente, e a forma como o cliente usará esse procedimento muda,mas todo o resto é o mesmo. + +Adicione uma `userCreate` mutação definindo-a como uma nova propriedade em nosso objeto roteador: + +```ts +const appRouter = router({ + userCreate: publicProcedure + .input(z.object({ name: z.string() })) + .mutation(async (opts) => { + const { input } = opts; + // Crie um novo usuário no banco de dados + const user = await db.user.create(input); + return user; + }), +}); +``` + + + ## Servidor O servidor é o que irá ouvir as requisições e, de acordo com as rotas definidas, dar uma determinada resposta. Porém, ainda não iniciamos nenhum servidor, logo, a seguinte etapa será iniciar um. É importado o método `createHTPPServer`do próprio tRPC, que irá criar o servidor, sendo necessário passar um roteador para o mesmo saber como reagir às requisições. Também usado o método listen, que define o endereço em que o servidor receberá requisições. @@ -191,3 +224,9 @@ Para mais informações sobre tRPC, consulte [aqui](https://trpc.io/docs/quickst margin-bottom: 20px; } + + +!!! Informação +A versão 11 do tRPC ainda está em andamento. +* A funcionalidade é estável e pode ser utilizada em produção, mas pode ocorrer pequenas mudanças na API entre os patches até alcançar a versão 11.0.0 +* Os pacotes são publicados com a `next`tag - no npm \ No newline at end of file From 71a7f04e1f3e0b40c69ab416e5af37027b791dbb Mon Sep 17 00:00:00 2001 From: MatheusNevs Date: Mon, 14 Oct 2024 19:47:35 -0300 Subject: [PATCH 2/2] fix: some hotfixes --- stack/trpc/pratica.md | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/stack/trpc/pratica.md b/stack/trpc/pratica.md index b7f204e..70cba68 100644 --- a/stack/trpc/pratica.md +++ b/stack/trpc/pratica.md @@ -14,7 +14,7 @@ A primeira tarefa a ser feita é iniciar o tRPC no back-end. O tRPC funciona atr Assim, criaremos um arquivo `trpc.ts` onde inicializaremos o tRPC por meio de uma `const t` (nome usado somente para exemplo) e exportaremos as propriedades `router`e `procedure` da instância. -```ts "./server/trpc.ts" +```ts "src/server/api/trpc.ts" import { initTRPC } from "@trpc/server"; const t = initTRPC.create(); @@ -25,14 +25,14 @@ export const publicProcedure = t.procedure;
### Inicialização do App Router + Seguidamente, inicializaremos nossa instância principal do roteador, comumente chamada de `appRouter`, na qual adicionaremos procedimentos anteriormente. Por fim, precisamos exportar o tipo do roteador que usaremos posteriormente no lado do cliente. -```ts import { router } from './trpc'; -  -const appRouter = router({ -}); +```ts "src/server/api/root.ts +import { router } from "./trpc"; +const appRouter = router({}); -export type AppRouter = typeof appRouter; // NÃO exporte o prórpio roteador +export type AppRouter = typeof appRouter; ``` ### Por que exportar? @@ -54,7 +54,7 @@ Então, importamos em outro arquivo, mais por questão de organização, as prop Para fazer as definições, é usado um objeto/dicionário onde as chaves serão os nomes das rotas e os valores serão as ações efetuadas no momento em que elas forem chamadas pelo lado cliente. -```ts "./server/index.ts" +```ts "src/server/api/root.ts" import { db } from "./db"; // Banco de dados previamente construído import { publicProcedure, router } from "./trpc"; // Propriedades que exportamos no trpc.ts @@ -110,13 +110,14 @@ Para mais informações sobre o a validação de dados, clique [aqui](https://zo !!! ## Adicionando um procedimento + O tRPC faz uma distinção entre procedimentos de consulta e mutação, semelhante ao GraphQL. -A maneira como um procedimento funciona no servidor não muda muito entre uma consulta e uma mutação. O nome do método é diferente, e a forma como o cliente usará esse procedimento muda,mas todo o resto é o mesmo. +A maneira como um procedimento funciona no servidor não muda muito entre uma consulta e uma mutação. O nome do método é diferente, e a forma como o cliente usará esse procedimento muda, mas todo o resto é o mesmo. Adicione uma `userCreate` mutação definindo-a como uma nova propriedade em nosso objeto roteador: -```ts +```ts const appRouter = router({ userCreate: publicProcedure .input(z.object({ name: z.string() })) @@ -129,8 +130,6 @@ const appRouter = router({ }); ``` - - ## Servidor O servidor é o que irá ouvir as requisições e, de acordo com as rotas definidas, dar uma determinada resposta. Porém, ainda não iniciamos nenhum servidor, logo, a seguinte etapa será iniciar um. É importado o método `createHTPPServer`do próprio tRPC, que irá criar o servidor, sendo necessário passar um roteador para o mesmo saber como reagir às requisições. Também usado o método listen, que define o endereço em que o servidor receberá requisições. @@ -225,8 +224,8 @@ Para mais informações sobre tRPC, consulte [aqui](https://trpc.io/docs/quickst } - !!! Informação A versão 11 do tRPC ainda está em andamento. -* A funcionalidade é estável e pode ser utilizada em produção, mas pode ocorrer pequenas mudanças na API entre os patches até alcançar a versão 11.0.0 -* Os pacotes são publicados com a `next`tag - no npm \ No newline at end of file + +- A funcionalidade é estável e pode ser utilizada em produção, mas pode ocorrer pequenas mudanças na API entre os patches até alcançar a versão 11.0.0 +- Os pacotes são publicados com a `next`tag - no npm