From 340cfc0255034e05c71d358bbf151e1d096e8406 Mon Sep 17 00:00:00 2001 From: juliusmarminge Date: Fri, 5 Jul 2024 00:18:52 +0200 Subject: [PATCH 1/5] trpc prefetching --- cli/package.json | 10 +- cli/template/extras/src/trpc/query-client.ts | 25 ++ cli/template/extras/src/trpc/react.tsx | 5 +- cli/template/extras/src/trpc/server.ts | 12 +- pnpm-lock.yaml | 230 ++++++++++++------- 5 files changed, 188 insertions(+), 94 deletions(-) create mode 100644 cli/template/extras/src/trpc/query-client.ts diff --git a/cli/package.json b/cli/package.json index 8e77e90b8c..1f48d03bac 100644 --- a/cli/package.json +++ b/cli/package.json @@ -69,11 +69,11 @@ "@prisma/adapter-planetscale": "^5.14.0", "@prisma/client": "^5.14.0", "@t3-oss/env-nextjs": "^0.10.1", - "@tanstack/react-query": "^5.39.0", - "@trpc/client": "11.0.0-rc.377", - "@trpc/next": "11.0.0-rc.377", - "@trpc/react-query": "11.0.0-rc.377", - "@trpc/server": "11.0.0-rc.377", + "@tanstack/react-query": "^5.49.2", + "@trpc/client": "11.0.0-rc.441", + "@trpc/next": "11.0.0-rc.441", + "@trpc/react-query": "11.0.0-rc.441", + "@trpc/server": "11.0.0-rc.441", "@types/fs-extra": "^11.0.4", "@types/gradient-string": "^1.1.6", "@types/node": "^20.12.12", diff --git a/cli/template/extras/src/trpc/query-client.ts b/cli/template/extras/src/trpc/query-client.ts new file mode 100644 index 0000000000..bda64397ca --- /dev/null +++ b/cli/template/extras/src/trpc/query-client.ts @@ -0,0 +1,25 @@ +import { + defaultShouldDehydrateQuery, + QueryClient, +} from "@tanstack/react-query"; +import SuperJSON from "superjson"; + +export const createQueryClient = () => + new QueryClient({ + defaultOptions: { + queries: { + // With SSR, we usually want to set some default staleTime + // above 0 to avoid refetching immediately on the client + staleTime: 30 * 1000, + }, + dehydrate: { + serializeData: SuperJSON.serialize, + shouldDehydrateQuery: (query) => + defaultShouldDehydrateQuery(query) || + query.state.status === "pending", + }, + hydrate: { + deserializeData: SuperJSON.deserialize, + }, + }, + }); diff --git a/cli/template/extras/src/trpc/react.tsx b/cli/template/extras/src/trpc/react.tsx index 81255d9e88..8c0521a74e 100644 --- a/cli/template/extras/src/trpc/react.tsx +++ b/cli/template/extras/src/trpc/react.tsx @@ -1,6 +1,6 @@ "use client"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { QueryClientProvider, type QueryClient } from "@tanstack/react-query"; import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client"; import { createTRPCReact } from "@trpc/react-query"; import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server"; @@ -8,8 +8,7 @@ import { useState } from "react"; import SuperJSON from "superjson"; import { type AppRouter } from "~/server/api/root"; - -const createQueryClient = () => new QueryClient(); +import { createQueryClient } from "./query-client"; let clientQueryClientSingleton: QueryClient | undefined = undefined; const getQueryClient = () => { diff --git a/cli/template/extras/src/trpc/server.ts b/cli/template/extras/src/trpc/server.ts index 07a9f69a64..59300a638b 100644 --- a/cli/template/extras/src/trpc/server.ts +++ b/cli/template/extras/src/trpc/server.ts @@ -1,10 +1,12 @@ import "server-only"; +import { createHydrationHelpers } from "@trpc/react-query/rsc"; import { headers } from "next/headers"; import { cache } from "react"; -import { createCaller } from "~/server/api/root"; +import { createCaller, type AppRouter } from "~/server/api/root"; import { createTRPCContext } from "~/server/api/trpc"; +import { createQueryClient } from "./query-client"; /** * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when @@ -19,4 +21,10 @@ const createContext = cache(() => { }); }); -export const api = createCaller(createContext); +const getQueryClient = cache(createQueryClient); +const caller = createCaller(createContext); + +export const { trpc: api, HydrateClient } = createHydrationHelpers( + caller, + getQueryClient +); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e85163e5d9..dec1fb4489 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -118,20 +118,20 @@ importers: specifier: ^0.10.1 version: 0.10.1(typescript@5.4.5)(zod@3.23.8) '@tanstack/react-query': - specifier: ^5.39.0 - version: 5.39.0(react@18.3.1) + specifier: ^5.49.2 + version: 5.49.2(react@18.3.1) '@trpc/client': - specifier: 11.0.0-rc.377 - version: 11.0.0-rc.377(@trpc/server@11.0.0-rc.377) + specifier: 11.0.0-rc.441 + version: 11.0.0-rc.441(@trpc/server@11.0.0-rc.441) '@trpc/next': - specifier: 11.0.0-rc.377 - version: 11.0.0-rc.377(@tanstack/react-query@5.39.0(react@18.3.1))(@trpc/client@11.0.0-rc.377(@trpc/server@11.0.0-rc.377))(@trpc/react-query@11.0.0-rc.377(@tanstack/react-query@5.39.0(react@18.3.1))(@trpc/client@11.0.0-rc.377(@trpc/server@11.0.0-rc.377))(@trpc/server@11.0.0-rc.377)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@trpc/server@11.0.0-rc.377)(next@14.2.3(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 11.0.0-rc.441 + version: 11.0.0-rc.441(@tanstack/react-query@5.49.2(react@18.3.1))(@trpc/client@11.0.0-rc.441(@trpc/server@11.0.0-rc.441))(@trpc/react-query@11.0.0-rc.441(@tanstack/react-query@5.49.2(react@18.3.1))(@trpc/client@11.0.0-rc.441(@trpc/server@11.0.0-rc.441))(@trpc/server@11.0.0-rc.441)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@trpc/server@11.0.0-rc.441)(next@14.2.3(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@trpc/react-query': - specifier: 11.0.0-rc.377 - version: 11.0.0-rc.377(@tanstack/react-query@5.39.0(react@18.3.1))(@trpc/client@11.0.0-rc.377(@trpc/server@11.0.0-rc.377))(@trpc/server@11.0.0-rc.377)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 11.0.0-rc.441 + version: 11.0.0-rc.441(@tanstack/react-query@5.49.2(react@18.3.1))(@trpc/client@11.0.0-rc.441(@trpc/server@11.0.0-rc.441))(@trpc/server@11.0.0-rc.441)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@trpc/server': - specifier: 11.0.0-rc.377 - version: 11.0.0-rc.377 + specifier: 11.0.0-rc.441 + version: 11.0.0-rc.441 '@types/fs-extra': specifier: ^11.0.4 version: 11.0.4 @@ -324,13 +324,13 @@ importers: version: 4.23.3 '@astrojs/mdx': specifier: ^3.0.1 - version: 3.0.1(astro@4.9.1(@types/node@20.12.12)(terser@5.31.0)(typescript@5.4.5)) + version: 3.0.1(astro@4.9.1(@types/node@20.12.12)(terser@5.31.1)(typescript@5.4.5)) '@astrojs/sitemap': specifier: ^3.1.5 version: 3.1.5 '@astrojs/vercel': specifier: ^7.6.0 - version: 7.6.0(astro@4.9.1(@types/node@20.12.12)(terser@5.31.0)(typescript@5.4.5))(next@14.2.3(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 7.6.0(astro@4.9.1(@types/node@20.12.12)(terser@5.31.1)(typescript@5.4.5))(next@14.2.3(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@docsearch/css': specifier: ^3.3.4 version: 3.3.4 @@ -388,10 +388,10 @@ importers: devDependencies: '@astrojs/react': specifier: ^3.4.0 - version: 3.4.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.2.11(@types/node@20.12.12)(terser@5.31.0)) + version: 3.4.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.2.11(@types/node@20.12.12)(terser@5.31.1)) '@astrojs/tailwind': specifier: ^5.1.0 - version: 5.1.0(astro@4.9.1(@types/node@20.12.12)(terser@5.31.0)(typescript@5.4.5))(tailwindcss@3.4.3) + version: 5.1.0(astro@4.9.1(@types/node@20.12.12)(terser@5.31.1)(typescript@5.4.5))(tailwindcss@3.4.3) '@types/node': specifier: ^20.12.12 version: 20.12.12 @@ -412,7 +412,7 @@ importers: version: 7.10.0(eslint@8.57.0)(typescript@5.4.5) astro: specifier: ^4.9.1 - version: 4.9.1(@types/node@20.12.12)(terser@5.31.0)(typescript@5.4.5) + version: 4.9.1(@types/node@20.12.12)(terser@5.31.1)(typescript@5.4.5) eslint: specifier: ^8.57.0 version: 8.57.0 @@ -2377,29 +2377,29 @@ packages: typescript: optional: true - '@tanstack/query-core@5.38.0': - resolution: {integrity: sha512-QtkoxvFcu52mNpp3+qOo9H265m3rt83Dgbw5WnNyJvr83cegrQ7zT8haHhL4Rul6ZQkeovxyWbXVW9zI0WYx6g==} + '@tanstack/query-core@5.49.1': + resolution: {integrity: sha512-JnC9ndmD1KKS01Rt/ovRUB1tmwO7zkyXAyIxN9mznuJrcNtOrkmOnQqdJF2ib9oHzc2VxHomnEG7xyfo54Npkw==} - '@tanstack/react-query@5.39.0': - resolution: {integrity: sha512-zc0WnyEffyTgG+myLv8cY2tJOUT6jOprCiprpbMqylCaCFipSDUPCYCt2AC+qxgk2CFuqiI/fjb1u5/HhLkrPg==} + '@tanstack/react-query@5.49.2': + resolution: {integrity: sha512-6rfwXDK9BvmHISbNFuGd+wY3P44lyW7lWiA9vIFGT/T0P9aHD1VkjTvcM4SDAIbAQ9ygEZZoLt7dlU1o3NjMVA==} peerDependencies: react: ^18.0.0 '@total-typescript/ts-reset@0.3.7': resolution: {integrity: sha512-yXt2BRRVCJVvzWaxac5n0nCXzIrQEBE/MeYlNQ8/Iq7UeelNmm/AdnUAu18ilSS893mbEQ4u6whPt/HvOPc4rw==} - '@trpc/client@11.0.0-rc.377': - resolution: {integrity: sha512-76l9naqQXtVDnkyDs12DrXhzD3fw1SMe7Fzcnc9mxYQlJpbQebGdXnN0sLn7IFodXp2hhfsTj5Azk6tIKBrqOw==} + '@trpc/client@11.0.0-rc.441': + resolution: {integrity: sha512-O9zHP7JcK35jO5G8BoW304WdRcHW1TKZae2QDU65KvfMxosbmqY2ajwAgs6CxTS45c1PuF9vI0kXtP52e3FYgQ==} peerDependencies: - '@trpc/server': 11.0.0-rc.377+4a672ddd6 + '@trpc/server': 11.0.0-rc.441+0c4a58144 - '@trpc/next@11.0.0-rc.377': - resolution: {integrity: sha512-jd99QwnUi9/KKUO9MlS7yv00D9dNzuDE8mTjwMWMqZxAMkLkYPlL/2rDHLP9UrAwV/XeiUS3uP0FSXB69u+vNg==} + '@trpc/next@11.0.0-rc.441': + resolution: {integrity: sha512-C8x7mK2jD+am+vYcFQz5uIRuJFL3gcZ6AyWdZKvI0J6lzd607LXN20V2dgIutclHBj3zOjfWMLRnKilH67JRFw==} peerDependencies: - '@tanstack/react-query': ^5.25.0 - '@trpc/client': 11.0.0-rc.377+4a672ddd6 - '@trpc/react-query': 11.0.0-rc.377+4a672ddd6 - '@trpc/server': 11.0.0-rc.377+4a672ddd6 + '@tanstack/react-query': ^5.49.2 + '@trpc/client': 11.0.0-rc.441+0c4a58144 + '@trpc/react-query': 11.0.0-rc.441+0c4a58144 + '@trpc/server': 11.0.0-rc.441+0c4a58144 next: '*' react: '>=16.8.0' react-dom: '>=16.8.0' @@ -2409,17 +2409,17 @@ packages: '@trpc/react-query': optional: true - '@trpc/react-query@11.0.0-rc.377': - resolution: {integrity: sha512-ze8a4rSySRwx+3qP2L6Qrx5DsSwRTpDTL3jzHTcnVGEhGjKWc7/i9qGcoWmyxR/aSiPI6rG0LG+Kn73A437udA==} + '@trpc/react-query@11.0.0-rc.441': + resolution: {integrity: sha512-VZm17FyQ/imz5S2pdJe6Qt9Od3JH1jDL8SlI5LZJ/ZXm+vdIbY3KJO1GOBKWfUw5oewaAE/QZJS0xVZqpIvw7g==} peerDependencies: - '@tanstack/react-query': ^5.25.0 - '@trpc/client': 11.0.0-rc.377+4a672ddd6 - '@trpc/server': 11.0.0-rc.377+4a672ddd6 + '@tanstack/react-query': ^5.49.2 + '@trpc/client': 11.0.0-rc.441+0c4a58144 + '@trpc/server': 11.0.0-rc.441+0c4a58144 react: '>=18.2.0' react-dom: '>=18.2.0' - '@trpc/server@11.0.0-rc.377': - resolution: {integrity: sha512-Fzgvf6N03mZRA9F2uR8S20a36ferWD28uJ4OSP1Es+iEGGnvxmoLm31ECIDJcp7qffR/zEA1CLiKgylLaR4z8w==} + '@trpc/server@11.0.0-rc.441': + resolution: {integrity: sha512-H0NN85JDgDlvG9tHW9efygLJZbVkszLagm5VeLD8MuhXqqKU+WyMTqb4D8rI560dse4dMC3lI5IoXaCEXMoznA==} '@types/acorn@4.0.6': resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==} @@ -2508,6 +2508,9 @@ packages: '@types/node@20.12.12': resolution: {integrity: sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==} + '@types/node@20.14.9': + resolution: {integrity: sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==} + '@types/normalize-package-data@2.4.1': resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} @@ -2747,6 +2750,11 @@ packages: engines: {node: '>=0.4.0'} hasBin: true + acorn@8.12.1: + resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==} + engines: {node: '>=0.4.0'} + hasBin: true + agent-base@6.0.2: resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==} engines: {node: '>= 6.0.0'} @@ -2969,6 +2977,11 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true + browserslist@4.23.1: + resolution: {integrity: sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + buffer-from@1.1.2: resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} @@ -3029,6 +3042,9 @@ packages: caniuse-lite@1.0.30001621: resolution: {integrity: sha512-+NLXZiviFFKX0fk8Piwv3PfLPGtRqJeq2TiNoUff/qB5KJgwecJTvCXDpmlyP/eCI/GUEmp/h/y5j0yckiiZrA==} + caniuse-lite@1.0.30001640: + resolution: {integrity: sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA==} + ccount@2.0.1: resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} @@ -3074,8 +3090,8 @@ packages: resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==} engines: {node: '>=10'} - chrome-trace-event@1.0.3: - resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==} + chrome-trace-event@1.0.4: + resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==} engines: {node: '>=6.0'} ci-info@3.9.0: @@ -3505,6 +3521,9 @@ packages: electron-to-chromium@1.4.783: resolution: {integrity: sha512-bT0jEz/Xz1fahQpbZ1D7LgmPYZ3iHVY39NcWWro1+hA2IvjiPeaXtfSqrQ+nXjApMvQRE2ASt1itSLRrebHMRQ==} + electron-to-chromium@1.4.816: + resolution: {integrity: sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==} + embla-carousel-autoplay@7.1.0: resolution: {integrity: sha512-nYfgSGn3ek44OzwO0t/Ptuxq4PNPD5l7Y9X7JjLYI/DN1uGjqxz9L73YYqR6YCRDnTYJ88s9fep48dzBnSG4vQ==} peerDependencies: @@ -3529,6 +3548,10 @@ packages: resolution: {integrity: sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==} engines: {node: '>=10.13.0'} + enhanced-resolve@5.17.0: + resolution: {integrity: sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==} + engines: {node: '>=10.13.0'} + enquirer@2.3.6: resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==} engines: {node: '>=8.6'} @@ -3563,6 +3586,9 @@ packages: es-module-lexer@1.5.3: resolution: {integrity: sha512-i1gCgmR9dCl6Vil6UKPI/trA69s08g/syhiDK9TG0Nf1RJjjFI+AzoWW7sPufzkgYAn861skuCwJa0pIIHYxvg==} + es-module-lexer@1.5.4: + resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==} + es-object-atoms@1.0.0: resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==} engines: {node: '>= 0.4'} @@ -6387,8 +6413,8 @@ packages: uglify-js: optional: true - terser@5.31.0: - resolution: {integrity: sha512-Q1JFAoUKE5IMfI4Z/lkE/E6+SwgzO+x4tq4v1AyBLRj8VSYvRO6A/rQrPg1yud4g0En9EKI1TvFRF2tQFcoUkg==} + terser@5.31.1: + resolution: {integrity: sha512-37upzU1+viGvuFtBo9NPufCb9dwM0+l9hMxYyWfBA+fbwrPqNJAhbZ6W47bBFnZHKHTUBnMvi87434qq+qnxOg==} engines: {node: '>=10'} hasBin: true @@ -6699,6 +6725,12 @@ packages: peerDependencies: browserslist: '>= 4.21.0' + update-browserslist-db@1.1.0: + resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} @@ -7120,12 +7152,12 @@ snapshots: transitivePeerDependencies: - supports-color - '@astrojs/mdx@3.0.1(astro@4.9.1(@types/node@20.12.12)(terser@5.31.0)(typescript@5.4.5))': + '@astrojs/mdx@3.0.1(astro@4.9.1(@types/node@20.12.12)(terser@5.31.1)(typescript@5.4.5))': dependencies: '@astrojs/markdown-remark': 5.1.0 '@mdx-js/mdx': 3.0.1 acorn: 8.11.3 - astro: 4.9.1(@types/node@20.12.12)(terser@5.31.0)(typescript@5.4.5) + astro: 4.9.1(@types/node@20.12.12)(terser@5.31.1)(typescript@5.4.5) es-module-lexer: 1.5.3 estree-util-visit: 2.0.0 github-slugger: 2.0.0 @@ -7145,11 +7177,11 @@ snapshots: dependencies: prismjs: 1.29.0 - '@astrojs/react@3.4.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.2.11(@types/node@20.12.12)(terser@5.31.0))': + '@astrojs/react@3.4.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.2.11(@types/node@20.12.12)(terser@5.31.1))': dependencies: '@types/react': 18.3.3 '@types/react-dom': 18.3.0 - '@vitejs/plugin-react': 4.3.0(vite@5.2.11(@types/node@20.12.12)(terser@5.31.0)) + '@vitejs/plugin-react': 4.3.0(vite@5.2.11(@types/node@20.12.12)(terser@5.31.1)) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) ultrahtml: 1.5.3 @@ -7163,9 +7195,9 @@ snapshots: stream-replace-string: 2.0.0 zod: 3.23.8 - '@astrojs/tailwind@5.1.0(astro@4.9.1(@types/node@20.12.12)(terser@5.31.0)(typescript@5.4.5))(tailwindcss@3.4.3)': + '@astrojs/tailwind@5.1.0(astro@4.9.1(@types/node@20.12.12)(terser@5.31.1)(typescript@5.4.5))(tailwindcss@3.4.3)': dependencies: - astro: 4.9.1(@types/node@20.12.12)(terser@5.31.0)(typescript@5.4.5) + astro: 4.9.1(@types/node@20.12.12)(terser@5.31.1)(typescript@5.4.5) autoprefixer: 10.4.19(postcss@8.4.38) postcss: 8.4.38 postcss-load-config: 4.0.2(postcss@8.4.38) @@ -7185,13 +7217,13 @@ snapshots: transitivePeerDependencies: - supports-color - '@astrojs/vercel@7.6.0(astro@4.9.1(@types/node@20.12.12)(terser@5.31.0)(typescript@5.4.5))(next@14.2.3(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@astrojs/vercel@7.6.0(astro@4.9.1(@types/node@20.12.12)(terser@5.31.1)(typescript@5.4.5))(next@14.2.3(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@astrojs/internal-helpers': 0.4.0 '@vercel/analytics': 1.3.1(next@14.2.3(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@vercel/edge': 1.1.1 '@vercel/nft': 0.26.5 - astro: 4.9.1(@types/node@20.12.12)(terser@5.31.0)(typescript@5.4.5) + astro: 4.9.1(@types/node@20.12.12)(terser@5.31.1)(typescript@5.4.5) esbuild: 0.21.4 fast-glob: 3.3.2 set-cookie-parser: 2.6.0 @@ -8831,39 +8863,39 @@ snapshots: optionalDependencies: typescript: 5.4.5 - '@tanstack/query-core@5.38.0': {} + '@tanstack/query-core@5.49.1': {} - '@tanstack/react-query@5.39.0(react@18.3.1)': + '@tanstack/react-query@5.49.2(react@18.3.1)': dependencies: - '@tanstack/query-core': 5.38.0 + '@tanstack/query-core': 5.49.1 react: 18.3.1 '@total-typescript/ts-reset@0.3.7': {} - '@trpc/client@11.0.0-rc.377(@trpc/server@11.0.0-rc.377)': + '@trpc/client@11.0.0-rc.441(@trpc/server@11.0.0-rc.441)': dependencies: - '@trpc/server': 11.0.0-rc.377 + '@trpc/server': 11.0.0-rc.441 - '@trpc/next@11.0.0-rc.377(@tanstack/react-query@5.39.0(react@18.3.1))(@trpc/client@11.0.0-rc.377(@trpc/server@11.0.0-rc.377))(@trpc/react-query@11.0.0-rc.377(@tanstack/react-query@5.39.0(react@18.3.1))(@trpc/client@11.0.0-rc.377(@trpc/server@11.0.0-rc.377))(@trpc/server@11.0.0-rc.377)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@trpc/server@11.0.0-rc.377)(next@14.2.3(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@trpc/next@11.0.0-rc.441(@tanstack/react-query@5.49.2(react@18.3.1))(@trpc/client@11.0.0-rc.441(@trpc/server@11.0.0-rc.441))(@trpc/react-query@11.0.0-rc.441(@tanstack/react-query@5.49.2(react@18.3.1))(@trpc/client@11.0.0-rc.441(@trpc/server@11.0.0-rc.441))(@trpc/server@11.0.0-rc.441)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@trpc/server@11.0.0-rc.441)(next@14.2.3(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@trpc/client': 11.0.0-rc.377(@trpc/server@11.0.0-rc.377) - '@trpc/server': 11.0.0-rc.377 + '@trpc/client': 11.0.0-rc.441(@trpc/server@11.0.0-rc.441) + '@trpc/server': 11.0.0-rc.441 next: 14.2.3(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) optionalDependencies: - '@tanstack/react-query': 5.39.0(react@18.3.1) - '@trpc/react-query': 11.0.0-rc.377(@tanstack/react-query@5.39.0(react@18.3.1))(@trpc/client@11.0.0-rc.377(@trpc/server@11.0.0-rc.377))(@trpc/server@11.0.0-rc.377)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@tanstack/react-query': 5.49.2(react@18.3.1) + '@trpc/react-query': 11.0.0-rc.441(@tanstack/react-query@5.49.2(react@18.3.1))(@trpc/client@11.0.0-rc.441(@trpc/server@11.0.0-rc.441))(@trpc/server@11.0.0-rc.441)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@trpc/react-query@11.0.0-rc.377(@tanstack/react-query@5.39.0(react@18.3.1))(@trpc/client@11.0.0-rc.377(@trpc/server@11.0.0-rc.377))(@trpc/server@11.0.0-rc.377)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@trpc/react-query@11.0.0-rc.441(@tanstack/react-query@5.49.2(react@18.3.1))(@trpc/client@11.0.0-rc.441(@trpc/server@11.0.0-rc.441))(@trpc/server@11.0.0-rc.441)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@tanstack/react-query': 5.39.0(react@18.3.1) - '@trpc/client': 11.0.0-rc.377(@trpc/server@11.0.0-rc.377) - '@trpc/server': 11.0.0-rc.377 + '@tanstack/react-query': 5.49.2(react@18.3.1) + '@trpc/client': 11.0.0-rc.441(@trpc/server@11.0.0-rc.441) + '@trpc/server': 11.0.0-rc.441 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@trpc/server@11.0.0-rc.377': {} + '@trpc/server@11.0.0-rc.441': {} '@types/acorn@4.0.6': dependencies: @@ -8971,6 +9003,10 @@ snapshots: dependencies: undici-types: 5.26.5 + '@types/node@20.14.9': + dependencies: + undici-types: 5.26.5 + '@types/normalize-package-data@2.4.1': {} '@types/prismjs@1.26.0': {} @@ -9168,14 +9204,14 @@ snapshots: - encoding - supports-color - '@vitejs/plugin-react@4.3.0(vite@5.2.11(@types/node@20.12.12)(terser@5.31.0))': + '@vitejs/plugin-react@4.3.0(vite@5.2.11(@types/node@20.12.12)(terser@5.31.1))': dependencies: '@babel/core': 7.24.6 '@babel/plugin-transform-react-jsx-self': 7.24.6(@babel/core@7.24.6) '@babel/plugin-transform-react-jsx-source': 7.24.6(@babel/core@7.24.6) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 - vite: 5.2.11(@types/node@20.12.12)(terser@5.31.0) + vite: 5.2.11(@types/node@20.12.12)(terser@5.31.1) transitivePeerDependencies: - supports-color @@ -9261,9 +9297,9 @@ snapshots: abbrev@1.1.1: {} - acorn-import-assertions@1.9.0(acorn@8.11.3): + acorn-import-assertions@1.9.0(acorn@8.12.1): dependencies: - acorn: 8.11.3 + acorn: 8.12.1 acorn-import-attributes@1.9.5(acorn@8.11.3): dependencies: @@ -9275,6 +9311,8 @@ snapshots: acorn@8.11.3: {} + acorn@8.12.1: {} + agent-base@6.0.2: dependencies: debug: 4.3.4 @@ -9460,7 +9498,7 @@ snapshots: - supports-color - typescript - astro@4.9.1(@types/node@20.12.12)(terser@5.31.0)(typescript@5.4.5): + astro@4.9.1(@types/node@20.12.12)(terser@5.31.1)(typescript@5.4.5): dependencies: '@astrojs/compiler': 2.8.0 '@astrojs/internal-helpers': 0.4.0 @@ -9519,8 +9557,8 @@ snapshots: tsconfck: 3.0.3(typescript@5.4.5) unist-util-visit: 5.0.0 vfile: 6.0.1 - vite: 5.2.11(@types/node@20.12.12)(terser@5.31.0) - vitefu: 0.2.5(vite@5.2.11(@types/node@20.12.12)(terser@5.31.0)) + vite: 5.2.11(@types/node@20.12.12)(terser@5.31.1) + vitefu: 0.2.5(vite@5.2.11(@types/node@20.12.12)(terser@5.31.1)) which-pm: 2.2.0 yargs-parser: 21.1.1 zod: 3.23.8 @@ -9638,6 +9676,13 @@ snapshots: node-releases: 2.0.14 update-browserslist-db: 1.0.16(browserslist@4.23.0) + browserslist@4.23.1: + dependencies: + caniuse-lite: 1.0.30001640 + electron-to-chromium: 1.4.816 + node-releases: 2.0.14 + update-browserslist-db: 1.1.0(browserslist@4.23.1) + buffer-from@1.1.2: {} buffer@5.7.1: @@ -9699,6 +9744,8 @@ snapshots: caniuse-lite@1.0.30001621: {} + caniuse-lite@1.0.30001640: {} + ccount@2.0.1: {} chalk@2.4.2: @@ -9742,7 +9789,7 @@ snapshots: chownr@2.0.0: {} - chrome-trace-event@1.0.3: {} + chrome-trace-event@1.0.4: {} ci-info@3.9.0: {} @@ -10056,6 +10103,8 @@ snapshots: electron-to-chromium@1.4.783: {} + electron-to-chromium@1.4.816: {} + embla-carousel-autoplay@7.1.0(embla-carousel@7.1.0): dependencies: embla-carousel: 7.1.0 @@ -10077,6 +10126,11 @@ snapshots: graceful-fs: 4.2.11 tapable: 2.2.1 + enhanced-resolve@5.17.0: + dependencies: + graceful-fs: 4.2.11 + tapable: 2.2.1 + enquirer@2.3.6: dependencies: ansi-colors: 4.1.3 @@ -10163,6 +10217,8 @@ snapshots: es-module-lexer@1.5.3: {} + es-module-lexer@1.5.4: {} + es-object-atoms@1.0.0: dependencies: es-errors: 1.3.0 @@ -11471,7 +11527,7 @@ snapshots: jest-worker@27.5.1: dependencies: - '@types/node': 20.12.12 + '@types/node': 20.14.9 merge-stream: 2.0.0 supports-color: 8.1.1 @@ -13946,13 +14002,13 @@ snapshots: jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 - terser: 5.31.0 + terser: 5.31.1 webpack: 5.88.2 - terser@5.31.0: + terser@5.31.1: dependencies: '@jridgewell/source-map': 0.3.6 - acorn: 8.11.3 + acorn: 8.12.1 commander: 2.20.3 source-map-support: 0.5.21 @@ -14294,6 +14350,12 @@ snapshots: escalade: 3.1.2 picocolors: 1.0.1 + update-browserslist-db@1.1.0(browserslist@4.23.1): + dependencies: + browserslist: 4.23.1 + escalade: 3.1.2 + picocolors: 1.0.1 + uri-js@4.4.1: dependencies: punycode: 2.3.0 @@ -14370,7 +14432,7 @@ snapshots: unist-util-stringify-position: 4.0.0 vfile-message: 4.0.2 - vite@5.2.11(@types/node@20.12.12)(terser@5.31.0): + vite@5.2.11(@types/node@20.12.12)(terser@5.31.1): dependencies: esbuild: 0.20.2 postcss: 8.4.38 @@ -14378,11 +14440,11 @@ snapshots: optionalDependencies: '@types/node': 20.12.12 fsevents: 2.3.3 - terser: 5.31.0 + terser: 5.31.1 - vitefu@0.2.5(vite@5.2.11(@types/node@20.12.12)(terser@5.31.0)): + vitefu@0.2.5(vite@5.2.11(@types/node@20.12.12)(terser@5.31.1)): optionalDependencies: - vite: 5.2.11(@types/node@20.12.12)(terser@5.31.0) + vite: 5.2.11(@types/node@20.12.12)(terser@5.31.1) warning@4.0.3: dependencies: @@ -14416,12 +14478,12 @@ snapshots: '@webassemblyjs/ast': 1.12.1 '@webassemblyjs/wasm-edit': 1.12.1 '@webassemblyjs/wasm-parser': 1.12.1 - acorn: 8.11.3 - acorn-import-assertions: 1.9.0(acorn@8.11.3) - browserslist: 4.23.0 - chrome-trace-event: 1.0.3 - enhanced-resolve: 5.16.1 - es-module-lexer: 1.5.3 + acorn: 8.12.1 + acorn-import-assertions: 1.9.0(acorn@8.12.1) + browserslist: 4.23.1 + chrome-trace-event: 1.0.4 + enhanced-resolve: 5.17.0 + es-module-lexer: 1.5.4 eslint-scope: 5.1.1 events: 3.3.0 glob-to-regexp: 0.4.1 From 8326b9538bda257fe518e626d20264644a254135 Mon Sep 17 00:00:00 2001 From: juliusmarminge Date: Fri, 5 Jul 2024 00:29:07 +0200 Subject: [PATCH 2/5] feat: trpc prefetching --- .changeset/spotty-donkeys-admire.md | 5 + .../src/app/_components/create-post-tw.tsx | 43 ------- .../src/app/_components/create-post.tsx | 44 ------- .../extras/src/app/_components/post-tw.tsx | 50 ++++++++ .../extras/src/app/_components/post.tsx | 54 ++++++++ .../extras/src/app/page/with-auth-trpc-tw.tsx | 115 ++++++++--------- .../extras/src/app/page/with-auth-trpc.tsx | 117 ++++++++---------- .../extras/src/app/page/with-trpc-tw.tsx | 96 +++++++------- .../extras/src/app/page/with-trpc.tsx | 98 +++++++-------- 9 files changed, 293 insertions(+), 329 deletions(-) create mode 100644 .changeset/spotty-donkeys-admire.md delete mode 100644 cli/template/extras/src/app/_components/create-post-tw.tsx delete mode 100644 cli/template/extras/src/app/_components/create-post.tsx create mode 100644 cli/template/extras/src/app/_components/post-tw.tsx create mode 100644 cli/template/extras/src/app/_components/post.tsx diff --git a/.changeset/spotty-donkeys-admire.md b/.changeset/spotty-donkeys-admire.md new file mode 100644 index 0000000000..647cd1d9c4 --- /dev/null +++ b/.changeset/spotty-donkeys-admire.md @@ -0,0 +1,5 @@ +--- +"create-t3-app": minor +--- + +feat: add trpc rsc prefetching diff --git a/cli/template/extras/src/app/_components/create-post-tw.tsx b/cli/template/extras/src/app/_components/create-post-tw.tsx deleted file mode 100644 index da3a1c8ff8..0000000000 --- a/cli/template/extras/src/app/_components/create-post-tw.tsx +++ /dev/null @@ -1,43 +0,0 @@ -"use client"; - -import { useRouter } from "next/navigation"; -import { useState } from "react"; - -import { api } from "~/trpc/react"; - -export function CreatePost() { - const router = useRouter(); - const [name, setName] = useState(""); - - const createPost = api.post.create.useMutation({ - onSuccess: () => { - router.refresh(); - setName(""); - }, - }); - - return ( -
{ - e.preventDefault(); - createPost.mutate({ name }); - }} - className="flex flex-col gap-2" - > - setName(e.target.value)} - className="w-full rounded-full px-4 py-2 text-black" - /> - -
- ); -} diff --git a/cli/template/extras/src/app/_components/create-post.tsx b/cli/template/extras/src/app/_components/create-post.tsx deleted file mode 100644 index a23e035566..0000000000 --- a/cli/template/extras/src/app/_components/create-post.tsx +++ /dev/null @@ -1,44 +0,0 @@ -"use client"; - -import { useRouter } from "next/navigation"; -import { useState } from "react"; - -import { api } from "~/trpc/react"; -import styles from "../index.module.css"; - -export function CreatePost() { - const router = useRouter(); - const [name, setName] = useState(""); - - const createPost = api.post.create.useMutation({ - onSuccess: () => { - router.refresh(); - setName(""); - }, - }); - - return ( -
{ - e.preventDefault(); - createPost.mutate({ name }); - }} - className={styles.form} - > - setName(e.target.value)} - className={styles.input} - /> - -
- ); -} diff --git a/cli/template/extras/src/app/_components/post-tw.tsx b/cli/template/extras/src/app/_components/post-tw.tsx new file mode 100644 index 0000000000..768af784a4 --- /dev/null +++ b/cli/template/extras/src/app/_components/post-tw.tsx @@ -0,0 +1,50 @@ +"use client"; + +import { useState } from "react"; + +import { api } from "~/trpc/react"; + +export function LatestPost() { + const [latestPost] = api.post.latest.useSuspenseQuery(); + + const utils = api.useUtils(); + const [name, setName] = useState(""); + const createPost = api.post.create.useMutation({ + onSuccess: async () => { + await utils.post.invalidate(); + setName(""); + }, + }); + + return ( +
+ {latestPost ? ( +

Your most recent post: {latestPost.name}

+ ) : ( +

You have no posts yet.

+ )} +
{ + e.preventDefault(); + createPost.mutate({ name }); + }} + className="flex flex-col gap-2" + > + setName(e.target.value)} + className="w-full rounded-full px-4 py-2 text-black" + /> + +
+
+ ); +} diff --git a/cli/template/extras/src/app/_components/post.tsx b/cli/template/extras/src/app/_components/post.tsx new file mode 100644 index 0000000000..79bee3e909 --- /dev/null +++ b/cli/template/extras/src/app/_components/post.tsx @@ -0,0 +1,54 @@ +"use client"; + +import { useState } from "react"; + +import { api } from "~/trpc/react"; +import styles from "../index.module.css"; + +export function LatestPost() { + const [latestPost] = api.post.latest.useSuspenseQuery(); + + const utils = api.useUtils(); + const [name, setName] = useState(""); + const createPost = api.post.create.useMutation({ + onSuccess: async () => { + await utils.post.invalidate(); + setName(""); + }, + }); + + return ( +
+ {latestPost ? ( +

+ Your most recent post: {latestPost.name} +

+ ) : ( +

You have no posts yet.

+ )} + +
{ + e.preventDefault(); + createPost.mutate({ name }); + }} + className={styles.form} + > + setName(e.target.value)} + className={styles.input} + /> + +
+
+ ); +} diff --git a/cli/template/extras/src/app/page/with-auth-trpc-tw.tsx b/cli/template/extras/src/app/page/with-auth-trpc-tw.tsx index 15053a9468..3e727d4cd8 100644 --- a/cli/template/extras/src/app/page/with-auth-trpc-tw.tsx +++ b/cli/template/extras/src/app/page/with-auth-trpc-tw.tsx @@ -1,82 +1,67 @@ import Link from "next/link"; -import { CreatePost } from "~/app/_components/create-post"; +import { LatestPost } from "~/app/_components/post"; import { getServerAuthSession } from "~/server/auth"; -import { api } from "~/trpc/server"; +import { api, HydrateClient } from "~/trpc/server"; export default async function Home() { const hello = await api.post.hello({ text: "from tRPC" }); const session = await getServerAuthSession(); - return ( -
-
-

- Create T3 App -

-
- -

First Steps →

-
- Just the basics - Everything you need to know to set up your - database and authentication. -
- - -

Documentation →

-
- Learn more about Create T3 App, the libraries it uses, and how to - deploy it. -
- -
-
-

- {hello ? hello.greeting : "Loading tRPC query..."} -

+ void api.post.latest.prefetch(); -
-

- {session && Logged in as {session.user?.name}} -

+ return ( + +
+
+

+ Create T3 App +

+
- {session ? "Sign out" : "Sign in"} +

First Steps →

+
+ Just the basics - Everything you need to know to set up your + database and authentication. +
+ + +

Documentation →

+
+ Learn more about Create T3 App, the libraries it uses, and how + to deploy it. +
-
- - -
-
- ); -} - -async function CrudShowcase() { - const session = await getServerAuthSession(); - if (!session?.user) return null; - - const latestPost = await api.post.getLatest(); +
+

+ {hello ? hello.greeting : "Loading tRPC query..."} +

- return ( -
- {latestPost ? ( -

Your most recent post: {latestPost.name}

- ) : ( -

You have no posts yet.

- )} +
+

+ {session && Logged in as {session.user?.name}} +

+ + {session ? "Sign out" : "Sign in"} + +
+
- -
+ {session?.user && } + + + ); } diff --git a/cli/template/extras/src/app/page/with-auth-trpc.tsx b/cli/template/extras/src/app/page/with-auth-trpc.tsx index d20987bd1d..b7f33ff221 100644 --- a/cli/template/extras/src/app/page/with-auth-trpc.tsx +++ b/cli/template/extras/src/app/page/with-auth-trpc.tsx @@ -1,85 +1,68 @@ import Link from "next/link"; -import { CreatePost } from "~/app/_components/create-post"; +import { LatestPost } from "~/app/_components/post"; import { getServerAuthSession } from "~/server/auth"; -import { api } from "~/trpc/server"; +import { api, HydrateClient } from "~/trpc/server"; import styles from "./index.module.css"; export default async function Home() { const hello = await api.post.hello({ text: "from tRPC" }); const session = await getServerAuthSession(); - return ( -
-
-

- Create T3 App -

-
- -

First Steps →

-
- Just the basics - Everything you need to know to set up your - database and authentication. -
- - -

Documentation →

-
- Learn more about Create T3 App, the libraries it uses, and how to - deploy it. -
- -
-
-

- {hello ? hello.greeting : "Loading tRPC query..."} -

+ void api.post.latest.prefetch(); -
-

- {session && Logged in as {session.user?.name}} -

+ return ( + +
+
+

+ Create T3 App +

+
+ +

First Steps →

+
+ Just the basics - Everything you need to know to set up your + database and authentication. +
+ - {session ? "Sign out" : "Sign in"} +

Documentation →

+
+ Learn more about Create T3 App, the libraries it uses, and how + to deploy it. +
-
- - -
-
- ); -} - -async function CrudShowcase() { - const session = await getServerAuthSession(); - if (!session?.user) return null; - - const latestPost = await api.post.getLatest(); +
+

+ {hello ? hello.greeting : "Loading tRPC query..."} +

- return ( -
- {latestPost ? ( -

- Your most recent post: {latestPost.name} -

- ) : ( -

You have no posts yet.

- )} +
+

+ {session && Logged in as {session.user?.name}} +

+ + {session ? "Sign out" : "Sign in"} + +
+
- -
+ {session?.user && } + + + ); } diff --git a/cli/template/extras/src/app/page/with-trpc-tw.tsx b/cli/template/extras/src/app/page/with-trpc-tw.tsx index 098c79499c..736c194698 100644 --- a/cli/template/extras/src/app/page/with-trpc-tw.tsx +++ b/cli/template/extras/src/app/page/with-trpc-tw.tsx @@ -1,65 +1,53 @@ import Link from "next/link"; -import { CreatePost } from "~/app/_components/create-post"; -import { api } from "~/trpc/server"; +import { LatestPost } from "~/app/_components/post"; +import { api, HydrateClient } from "~/trpc/server"; export default async function Home() { const hello = await api.post.hello({ text: "from tRPC" }); - return ( -
-
-

- Create T3 App -

-
- -

First Steps →

-
- Just the basics - Everything you need to know to set up your - database and authentication. -
- - -

Documentation →

-
- Learn more about Create T3 App, the libraries it uses, and how to - deploy it. -
- -
-
-

- {hello ? hello.greeting : "Loading tRPC query..."} -

-
- - -
-
- ); -} - -async function CrudShowcase() { - const latestPost = await api.post.getLatest(); + void api.post.latest.prefetch(); return ( -
- {latestPost ? ( -

Your most recent post: {latestPost.name}

- ) : ( -

You have no posts yet.

- )} + +
+
+

+ Create T3 App +

+
+ +

First Steps →

+
+ Just the basics - Everything you need to know to set up your + database and authentication. +
+ + +

Documentation →

+
+ Learn more about Create T3 App, the libraries it uses, and how + to deploy it. +
+ +
+
+

+ {hello ? hello.greeting : "Loading tRPC query..."} +

+
- -
+ +
+ + ); } diff --git a/cli/template/extras/src/app/page/with-trpc.tsx b/cli/template/extras/src/app/page/with-trpc.tsx index b8d3bed61c..444e39d282 100644 --- a/cli/template/extras/src/app/page/with-trpc.tsx +++ b/cli/template/extras/src/app/page/with-trpc.tsx @@ -1,68 +1,54 @@ import Link from "next/link"; -import { CreatePost } from "~/app/_components/create-post"; -import { api } from "~/trpc/server"; +import { LatestPost } from "~/app/_components/post"; +import { api, HydrateClient } from "~/trpc/server"; import styles from "./index.module.css"; export default async function Home() { const hello = await api.post.hello({ text: "from tRPC" }); - return ( -
-
-

- Create T3 App -

-
- -

First Steps →

-
- Just the basics - Everything you need to know to set up your - database and authentication. -
- - -

Documentation →

-
- Learn more about Create T3 App, the libraries it uses, and how to - deploy it. -
- -
-
-

- {hello ? hello.greeting : "Loading tRPC query..."} -

-
- - -
-
- ); -} - -async function CrudShowcase() { - const latestPost = await api.post.getLatest(); + void api.post.latest.prefetch(); return ( -
- {latestPost ? ( -

- Your most recent post: {latestPost.name} -

- ) : ( -

You have no posts yet.

- )} + +
+
+

+ Create T3 App +

+
+ +

First Steps →

+
+ Just the basics - Everything you need to know to set up your + database and authentication. +
+ + +

Documentation →

+
+ Learn more about Create T3 App, the libraries it uses, and how + to deploy it. +
+ +
+
+

+ {hello ? hello.greeting : "Loading tRPC query..."} +

+
- -
+ +
+ + ); } From 22a588d3ac675f1d97972a6bbc8b02ba1d6470d4 Mon Sep 17 00:00:00 2001 From: juliusmarminge Date: Fri, 5 Jul 2024 00:42:24 +0200 Subject: [PATCH 3/5] update path in installer --- cli/src/installers/trpc.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cli/src/installers/trpc.ts b/cli/src/installers/trpc.ts index 9c0e0d7594..c21df3a627 100644 --- a/cli/src/installers/trpc.ts +++ b/cli/src/installers/trpc.ts @@ -106,9 +106,9 @@ export const trpcInstaller: Installer = ({ path.join( extrasDir, "src/app/_components", - packages?.tailwind.inUse ? "create-post-tw.tsx" : "create-post.tsx" + packages?.tailwind.inUse ? "post-tw.tsx" : "post.tsx" ), - path.join(projectDir, "src/app/_components/create-post.tsx"), + path.join(projectDir, "src/app/_components/post.tsx"), ] ); } else { From 1676ba4203b1573aaa096bbf0217af52d2531842 Mon Sep 17 00:00:00 2001 From: juliusmarminge Date: Fri, 5 Jul 2024 08:49:59 +0200 Subject: [PATCH 4/5] copy query client file --- cli/src/installers/trpc.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/cli/src/installers/trpc.ts b/cli/src/installers/trpc.ts index c21df3a627..96fd354331 100644 --- a/cli/src/installers/trpc.ts +++ b/cli/src/installers/trpc.ts @@ -109,6 +109,10 @@ export const trpcInstaller: Installer = ({ packages?.tailwind.inUse ? "post-tw.tsx" : "post.tsx" ), path.join(projectDir, "src/app/_components/post.tsx"), + ], + [ + path.join(extrasDir, "src/trpc/query-client.ts"), + path.join(projectDir, "src/trpc/query-client.ts"), ] ); } else { From cf82cb07eb51e020db3277b5a8d00ecc35c6ffb7 Mon Sep 17 00:00:00 2001 From: juliusmarminge Date: Fri, 5 Jul 2024 09:55:13 +0200 Subject: [PATCH 5/5] getlatest --- cli/template/extras/src/app/_components/post-tw.tsx | 2 +- cli/template/extras/src/app/_components/post.tsx | 2 +- cli/template/extras/src/app/page/with-auth-trpc-tw.tsx | 2 +- cli/template/extras/src/app/page/with-auth-trpc.tsx | 2 +- cli/template/extras/src/app/page/with-trpc-tw.tsx | 2 +- cli/template/extras/src/app/page/with-trpc.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/cli/template/extras/src/app/_components/post-tw.tsx b/cli/template/extras/src/app/_components/post-tw.tsx index 768af784a4..ebe15eab4a 100644 --- a/cli/template/extras/src/app/_components/post-tw.tsx +++ b/cli/template/extras/src/app/_components/post-tw.tsx @@ -5,7 +5,7 @@ import { useState } from "react"; import { api } from "~/trpc/react"; export function LatestPost() { - const [latestPost] = api.post.latest.useSuspenseQuery(); + const [latestPost] = api.post.getLatest.useSuspenseQuery(); const utils = api.useUtils(); const [name, setName] = useState(""); diff --git a/cli/template/extras/src/app/_components/post.tsx b/cli/template/extras/src/app/_components/post.tsx index 79bee3e909..1ad8134739 100644 --- a/cli/template/extras/src/app/_components/post.tsx +++ b/cli/template/extras/src/app/_components/post.tsx @@ -6,7 +6,7 @@ import { api } from "~/trpc/react"; import styles from "../index.module.css"; export function LatestPost() { - const [latestPost] = api.post.latest.useSuspenseQuery(); + const [latestPost] = api.post.getLatest.useSuspenseQuery(); const utils = api.useUtils(); const [name, setName] = useState(""); diff --git a/cli/template/extras/src/app/page/with-auth-trpc-tw.tsx b/cli/template/extras/src/app/page/with-auth-trpc-tw.tsx index 3e727d4cd8..fc1cc94356 100644 --- a/cli/template/extras/src/app/page/with-auth-trpc-tw.tsx +++ b/cli/template/extras/src/app/page/with-auth-trpc-tw.tsx @@ -8,7 +8,7 @@ export default async function Home() { const hello = await api.post.hello({ text: "from tRPC" }); const session = await getServerAuthSession(); - void api.post.latest.prefetch(); + void api.post.getLatest.prefetch(); return ( diff --git a/cli/template/extras/src/app/page/with-auth-trpc.tsx b/cli/template/extras/src/app/page/with-auth-trpc.tsx index b7f33ff221..cfeed2f5b5 100644 --- a/cli/template/extras/src/app/page/with-auth-trpc.tsx +++ b/cli/template/extras/src/app/page/with-auth-trpc.tsx @@ -9,7 +9,7 @@ export default async function Home() { const hello = await api.post.hello({ text: "from tRPC" }); const session = await getServerAuthSession(); - void api.post.latest.prefetch(); + void api.post.getLatest.prefetch(); return ( diff --git a/cli/template/extras/src/app/page/with-trpc-tw.tsx b/cli/template/extras/src/app/page/with-trpc-tw.tsx index 736c194698..1fbe614e83 100644 --- a/cli/template/extras/src/app/page/with-trpc-tw.tsx +++ b/cli/template/extras/src/app/page/with-trpc-tw.tsx @@ -6,7 +6,7 @@ import { api, HydrateClient } from "~/trpc/server"; export default async function Home() { const hello = await api.post.hello({ text: "from tRPC" }); - void api.post.latest.prefetch(); + void api.post.getLatest.prefetch(); return ( diff --git a/cli/template/extras/src/app/page/with-trpc.tsx b/cli/template/extras/src/app/page/with-trpc.tsx index 444e39d282..035f250bc3 100644 --- a/cli/template/extras/src/app/page/with-trpc.tsx +++ b/cli/template/extras/src/app/page/with-trpc.tsx @@ -7,7 +7,7 @@ import styles from "./index.module.css"; export default async function Home() { const hello = await api.post.hello({ text: "from tRPC" }); - void api.post.latest.prefetch(); + void api.post.getLatest.prefetch(); return (