From 3fc261d5e7f126e865b3e7aea0a4f0abeba45e9a Mon Sep 17 00:00:00 2001 From: Ryan Gannon Date: Tue, 13 Jun 2023 15:00:38 +0100 Subject: [PATCH] Example: Added a basic example with a product call --- examples/basic-example/.gitignore | 23 ++++ examples/basic-example/.npmrc | 2 + examples/basic-example/.prettierrc | 5 + examples/basic-example/README.md | 63 +++++++++ examples/basic-example/app.vue | 127 ++++++++++++++++++ examples/basic-example/nuxt.config.ts | 7 + examples/basic-example/package.json | 22 +++ examples/basic-example/plugins/client.ts | 22 +++ examples/basic-example/public/favicon.ico | Bin 0 -> 4286 bytes .../basic-example/server/api/trpc/[trpc].ts | 9 ++ examples/basic-example/server/trpc/context.ts | 9 ++ .../server/trpc/routers/index.ts | 27 ++++ examples/basic-example/server/trpc/trpc.ts | 20 +++ examples/basic-example/server/tsconfig.json | 3 + examples/basic-example/tsconfig.json | 4 + 15 files changed, 343 insertions(+) create mode 100644 examples/basic-example/.gitignore create mode 100644 examples/basic-example/.npmrc create mode 100644 examples/basic-example/.prettierrc create mode 100644 examples/basic-example/README.md create mode 100644 examples/basic-example/app.vue create mode 100644 examples/basic-example/nuxt.config.ts create mode 100644 examples/basic-example/package.json create mode 100644 examples/basic-example/plugins/client.ts create mode 100644 examples/basic-example/public/favicon.ico create mode 100644 examples/basic-example/server/api/trpc/[trpc].ts create mode 100644 examples/basic-example/server/trpc/context.ts create mode 100644 examples/basic-example/server/trpc/routers/index.ts create mode 100644 examples/basic-example/server/trpc/trpc.ts create mode 100644 examples/basic-example/server/tsconfig.json create mode 100644 examples/basic-example/tsconfig.json diff --git a/examples/basic-example/.gitignore b/examples/basic-example/.gitignore new file mode 100644 index 0000000..768a14e --- /dev/null +++ b/examples/basic-example/.gitignore @@ -0,0 +1,23 @@ +# Nuxt dev/build outputs +.output +.nuxt +.nitro +.cache +dist + +# Node dependencies +node_modules + +# Logs +logs +*.log + +# Misc +.DS_Store +.fleet +.idea + +# Local env files +.env +.env.* +!.env.example diff --git a/examples/basic-example/.npmrc b/examples/basic-example/.npmrc new file mode 100644 index 0000000..cf04042 --- /dev/null +++ b/examples/basic-example/.npmrc @@ -0,0 +1,2 @@ +shamefully-hoist=true +strict-peer-dependencies=false diff --git a/examples/basic-example/.prettierrc b/examples/basic-example/.prettierrc new file mode 100644 index 0000000..76e280e --- /dev/null +++ b/examples/basic-example/.prettierrc @@ -0,0 +1,5 @@ +{ + "tabWidth": 2, + "singleQuote": true, + "semi": false +} diff --git a/examples/basic-example/README.md b/examples/basic-example/README.md new file mode 100644 index 0000000..595dda9 --- /dev/null +++ b/examples/basic-example/README.md @@ -0,0 +1,63 @@ +# Nuxt 3 Minimal Starter + +Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. + +## Setup + +Make sure to install the dependencies: + +```bash +# npm +npm install + +# pnpm +pnpm install + +# yarn +yarn install +``` + +## Development Server + +Start the development server on `http://localhost:3000`: + +```bash +# npm +npm run dev + +# pnpm +pnpm run dev + +# yarn +yarn dev +``` + +## Production + +Build the application for production: + +```bash +# npm +npm run build + +# pnpm +pnpm run build + +# yarn +yarn build +``` + +Locally preview production build: + +```bash +# npm +npm run preview + +# pnpm +pnpm run preview + +# yarn +yarn preview +``` + +Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. diff --git a/examples/basic-example/app.vue b/examples/basic-example/app.vue new file mode 100644 index 0000000..ad57c0b --- /dev/null +++ b/examples/basic-example/app.vue @@ -0,0 +1,127 @@ + + + + + diff --git a/examples/basic-example/nuxt.config.ts b/examples/basic-example/nuxt.config.ts new file mode 100644 index 0000000..efca6b3 --- /dev/null +++ b/examples/basic-example/nuxt.config.ts @@ -0,0 +1,7 @@ +// https://nuxt.com/docs/api/configuration/nuxt-config +export default defineNuxtConfig({ + devtools: { enabled: true }, + build: { + transpile: ['trpc-nuxt'], + }, +}) diff --git a/examples/basic-example/package.json b/examples/basic-example/package.json new file mode 100644 index 0000000..3fe4d38 --- /dev/null +++ b/examples/basic-example/package.json @@ -0,0 +1,22 @@ +{ + "name": "nuxt-app", + "private": true, + "scripts": { + "build": "nuxt build", + "dev": "nuxt dev", + "generate": "nuxt generate", + "preview": "nuxt preview", + "postinstall": "nuxt prepare" + }, + "devDependencies": { + "@nuxt/devtools": "latest", + "@types/node": "^18", + "nuxt": "^3.5.2" + }, + "dependencies": { + "@trpc/client": "^10.28.0", + "@trpc/server": "^10.28.0", + "trpc-nuxt": "^0.10.5", + "zod": "^3.21.4" + } +} diff --git a/examples/basic-example/plugins/client.ts b/examples/basic-example/plugins/client.ts new file mode 100644 index 0000000..cd9d668 --- /dev/null +++ b/examples/basic-example/plugins/client.ts @@ -0,0 +1,22 @@ +import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client' +import type { AppRouter } from '~/server/trpc/routers' + +export default defineNuxtPlugin(() => { + /** + * createTRPCNuxtClient adds a `useQuery` composable + * built on top of `useAsyncData`. + */ + const client = createTRPCNuxtClient({ + links: [ + httpBatchLink({ + url: '/api/trpc', + }), + ], + }) + + return { + provide: { + client, + }, + } +}) diff --git a/examples/basic-example/public/favicon.ico b/examples/basic-example/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..18993ad91cfd43e03b074dd0b5cc3f37ab38e49c GIT binary patch literal 4286 zcmeHLOKuuL5PjK%MHWVi6lD zOGiREbCw`xmFozJ^aNatJY>w+g ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8 zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^ z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&wcHSn81VH1N~`0gvwH{ z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e ({}) + +export type Context = inferAsyncReturnType diff --git a/examples/basic-example/server/trpc/routers/index.ts b/examples/basic-example/server/trpc/routers/index.ts new file mode 100644 index 0000000..26bd74f --- /dev/null +++ b/examples/basic-example/server/trpc/routers/index.ts @@ -0,0 +1,27 @@ +import { z } from 'zod' +import { publicProcedure, router } from '../trpc' + +export const appRouter = router({ + hello: publicProcedure + .input( + z.object({ + text: z.string().nullish(), + }) + ) + .query(({ input }) => { + console.log(input) + return { + greeting: `hello ${input?.text ?? 'world'}`, + } + }), + products: publicProcedure.query(async () => { + return { + title: 'TRPC Nuxt', + price: 12.0, + description: 'Check out the trpc-nuxt repo', + } + }), +}) + +// export type definition of API +export type AppRouter = typeof appRouter diff --git a/examples/basic-example/server/trpc/trpc.ts b/examples/basic-example/server/trpc/trpc.ts new file mode 100644 index 0000000..82e8507 --- /dev/null +++ b/examples/basic-example/server/trpc/trpc.ts @@ -0,0 +1,20 @@ +/** + * This is your entry point to setup the root configuration for tRPC on the server. + * - `initTRPC` should only be used once per app. + * - We export only the functionality that we use so we can enforce which base procedures should be used + * + * Learn how to create protected base procedures and other things below: + * @see https://trpc.io/docs/v10/router + * @see https://trpc.io/docs/v10/procedures + */ +import { initTRPC } from '@trpc/server' +import { Context } from '../trpc/context' + +const t = initTRPC.context().create() + +/** + * Unprotected procedure + **/ +export const publicProcedure = t.procedure +export const router = t.router +export const middleware = t.middleware diff --git a/examples/basic-example/server/tsconfig.json b/examples/basic-example/server/tsconfig.json new file mode 100644 index 0000000..b9ed69c --- /dev/null +++ b/examples/basic-example/server/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../.nuxt/tsconfig.server.json" +} diff --git a/examples/basic-example/tsconfig.json b/examples/basic-example/tsconfig.json new file mode 100644 index 0000000..a746f2a --- /dev/null +++ b/examples/basic-example/tsconfig.json @@ -0,0 +1,4 @@ +{ + // https://nuxt.com/docs/guide/concepts/typescript + "extends": "./.nuxt/tsconfig.json" +}