atualização para a nova versão do trpc

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

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();
@@ -24,6 +24,17 @@ export const publicProcedure = t.procedure;
 
 <br>
 
+### 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 "src/server/api/root.ts
+import { router } from "./trpc";
+const appRouter = router({});
+
+export type AppRouter = typeof appRouter;
+```
+
 ### 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.
@@ -43,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
 
@@ -98,6 +109,27 @@ 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 +223,9 @@ Para mais informações sobre tRPC, consulte [aqui](https://trpc.io/docs/quickst
         margin-bottom: 20px;
     }
 </style>
+
+!!! 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