mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-25 17:30:33 +01:00
1 line
9.6 KiB
JSON
1 line
9.6 KiB
JSON
[{"_path":"/get-started/usage","_dir":"get-started","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Usage","description":"tRPC-Nuxt provides first class integration with tRPC.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"h2","props":{"id":"recommended-file-structure"},"children":[{"type":"text","value":"Recommended file structure"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Recommended but not enforced file structure. This is what you get when starting from "},{"type":"element","tag":"a","props":{"href":"../main/example-apps"},"children":[{"type":"text","value":"the examples"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":".\n├── server\n│ ├── api\n│ │ └── trpc\n│ │ └── [trpc].ts # <-- tRPC HTTP handler\n│ │ └── [..]\n│ ├── trpc\n│ │ ├── routers\n│ │ │ ├── index.ts # <-- main app router\n│ │ │ ├── todo.ts # <-- sub routers\n│ │ │ └── [..]\n│ │ ├── context.ts # <-- create app context\n│ │ └── trpc.ts # <-- procedure helpers\n├── plugins\n│ ├── client.ts # <-- tRPC Client as a plugin\n└── [..]\n","language":"graphql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".\n├── server\n│ ├── api\n│ │ └── trpc\n│ │ └── [trpc].ts # <-- tRPC HTTP handler\n│ │ └── [..]\n│ ├── trpc\n│ │ ├── routers\n│ │ │ ├── index.ts # <-- main app router\n│ │ │ ├── todo.ts # <-- sub routers\n│ │ │ └── [..]\n│ │ ├── context.ts # <-- create app context\n│ │ └── trpc.ts # <-- procedure helpers\n├── plugins\n│ ├── client.ts # <-- tRPC Client as a plugin\n└── [..]\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"1-create-a-trpc-router"},"children":[{"type":"text","value":"1. Create a tRPC router"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Initialize your tRPC backend using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"initTRPC"}]},{"type":"text","value":" function and create your first router."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"import { initTRPC } from '@trpc/server'\n\n// Avoid exporting the entire t-object since it's not very\n// descriptive and can be confusing to newcomers used to t\n// meaning translation in i18n libraries.\nconst t = initTRPC.create()\n\n// Base router and procedure helpers\nexport const router = t.router\nexport const publicProcedure = t.procedure\n","filename":"server/trpc/trpc.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { initTRPC } from '@trpc/server'\n\n// Avoid exporting the entire t-object since it's not very\n// descriptive and can be confusing to newcomers used to t\n// meaning translation in i18n libraries.\nconst t = initTRPC.create()\n\n// Base router and procedure helpers\nexport const router = t.router\nexport const publicProcedure = t.procedure\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"import { z } from 'zod'\nimport { publicProcedure, router } from '../trpc'\n\nexport const appRouter = router({\n hello: publicProcedure\n .input(\n z.object({\n text: z.string().nullish(),\n }),\n )\n .query(({ input }) => {\n return {\n greeting: `hello ${input?.text ?? 'world'}`,\n }\n }),\n})\n\n// export type definition of API\nexport type AppRouter = typeof appRouter\n","filename":"server/trpc/routers/index.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { z } from 'zod'\nimport { publicProcedure, router } from '../trpc'\n\nexport const appRouter = router({\n hello: publicProcedure\n .input(\n z.object({\n text: z.string().nullish(),\n }),\n )\n .query(({ input }) => {\n return {\n greeting: `hello ${input?.text ?? 'world'}`,\n }\n }),\n})\n\n// export type definition of API\nexport type AppRouter = typeof appRouter\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"import { createNuxtApiHandler } from 'trpc-nuxt'\nimport { appRouter } from '@/server/trpc/routers'\n\n// export API handler\nexport default createNuxtApiHandler({\n router: appRouter,\n createContext: () => ({}),\n})\n","filename":"server/api/trpc/[trpc].ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { createNuxtApiHandler } from 'trpc-nuxt'\nimport { appRouter } from '@/server/trpc/routers'\n\n// export API handler\nexport default createNuxtApiHandler({\n router: appRouter,\n createContext: () => ({}),\n})\n"}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to split your router into several subrouters, you can implement them in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server/trpc/routers"}]},{"type":"text","value":" directory and import and "},{"type":"element","tag":"a","props":{"href":"https://trpc.io/docs/v10/merging-routers","rel":["nofollow"]},"children":[{"type":"text","value":"merge them"}]},{"type":"text","value":" to a single root "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"appRouter"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"2-create-trpc-client-plugin"},"children":[{"type":"text","value":"2. Create tRPC client plugin"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create a set of strongly-typed composables using your API's type signature."}]},{"type":"element","tag":"code","props":{"code":"import { httpBatchLink } from '@trpc/client'\nimport { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'\nimport type { AppRouter } from '@/server/trpc/routers'\n\nexport default defineNuxtPlugin(() => {\n const client = createTRPCNuxtProxyClient<AppRouter>({\n links: [\n httpBatchLink({\n /**\n * If you want to use SSR, you need to use the server's full URL\n * @link https://trpc.io/docs/ssr\n **/\n url: 'http://localhost:3000/api/trpc',\n }),\n ],\n })\n\n return {\n provide: {\n client,\n },\n }\n})\n","filename":"plugins/client.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { httpBatchLink } from '@trpc/client'\nimport { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'\nimport type { AppRouter } from '@/server/trpc/routers'\n\nexport default defineNuxtPlugin(() => {\n const client = createTRPCNuxtProxyClient<AppRouter>({\n links: [\n httpBatchLink({\n /**\n * If you want to use SSR, you need to use the server's full URL\n * @link https://trpc.io/docs/ssr\n **/\n url: 'http://localhost:3000/api/trpc',\n }),\n ],\n })\n\n return {\n provide: {\n client,\n },\n }\n})\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"3-make-api-requests"},"children":[{"type":"text","value":"3. Make API requests"}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\nconst { $client } = useNuxtApp()\n\n// query and mutate uses useAsyncData under the hood\nconst { data, pending, error } = await $client.hello.query({ text: 'client' })\n</script>\n\n<template>\n <div v-if=\"pending\">\n Loading...\n </div>\n <div v-else-if=\"error?.data?.code\">\n Error: {{ error.data.code }}\n </div>\n <div v-else>\n <p>{{ hello.data?.greeting }}</p>\n </div>\n</template>\n","filename":"pages/index.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup lang=\"ts\">\nconst { $client } = useNuxtApp()\n\n// query and mutate uses useAsyncData under the hood\nconst { data, pending, error } = await $client.hello.query({ text: 'client' })\n</script>\n\n<template>\n <div v-if=\"pending\">\n Loading...\n </div>\n <div v-else-if=\"error?.data?.code\">\n Error: {{ error.data.code }}\n </div>\n <div v-else>\n <p>{{ hello.data?.greeting }}</p>\n </div>\n</template>\n"}]}]}]}]},"_type":"markdown","_id":"content:1.get-started:2.usage.md","_source":"content","_file":"1.get-started/2.usage.md","_extension":"md"},{"_path":"/examples/multiple-routers","_dir":"examples","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Multiple Routers","description":"tRPC-Nuxt provides first class integration with tRPC.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"multi-routers"},"children":[{"type":"text","value":"Multi Routers"}]}]},"_type":"markdown","_id":"content:2.examples:2.multiple-routers.md","_source":"content","_file":"2.examples/2.multiple-routers.md","_extension":"md"}] |