arthur/trpc-nuxt
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/trpc-nuxt.git synced 2026-01-25 17:30:33 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
0e240663ca98968905d8cf6e9b60fbb7465583f9
trpc-nuxt/docs/.vercel/output/static/api/_content/query/UqPRVLFJyN.json
wobsoriano 0e240663ca remove local pnpm deps
2022-11-02 09:18:00 -07:00

1 line
58 KiB
JSON
Raw Blame History

{"_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"}]}]}]}]},"body":{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"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└── [..]"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"initTRPC"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'@trpc/server'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// Avoid exporting the entire t-object since it's not very"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// descriptive and can be confusing to newcomers used to t"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// meaning translation in i18n libraries."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"initTRPC"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// Base router and procedure helpers"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"router"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"router"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"publicProcedure"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"procedure"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"z"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'zod'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"publicProcedure"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"router"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'../trpc'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"appRouter"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"router"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"hello"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"publicProcedure"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"z"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"object"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"z"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"nullish"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"(({ "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"greeting"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"`hello "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"??"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'world'"}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// export type definition of API"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"AppRouter"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"typeof"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"appRouter"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"createNuxtApiHandler"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'trpc-nuxt'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"appRouter"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'@/server/trpc/routers'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// export API handler"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"createNuxtApiHandler"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"router"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"appRouter"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"createContext"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" ({}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"})"}]}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"httpBatchLink"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'@trpc/client'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"createTRPCNuxtProxyClient"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'trpc-nuxt/client'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"AppRouter"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'@/server/trpc/routers'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"defineNuxtPlugin"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"createTRPCNuxtProxyClient"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"AppRouter"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"links"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"httpBatchLink"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"/**"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":" * If you want to use SSR, you need to use the server's full URL"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":" * "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"@link"}]},{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":" https://trpc.io/docs/ssr"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":" **/"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'http://localhost:3000/api/trpc'"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"provide"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"$client"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"useNuxtApp"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5fb678"},"children":[{"type":"text","value":"// query and mutate uses useAsyncData under the hood"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"pending"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a574"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d69d00"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"$client"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"hello"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e18fd1"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"({ "}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-a930e7"},"children":[{"type":"text","value":"'client'"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"v-if"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"pending"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"Loading"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"v-else-if"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-d213e2"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"Error:"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" {{ "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"v-else"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">{{ "}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"hello"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"greeting"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" }}</"}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-f79d7d"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-ca0e09"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-8358df"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f79d7d{color:#D19A66}.ct-e18fd1{color:#61AFEF}.ct-c3a574{color:#56B6C2}.ct-d213e2{color:#E5C07B}.ct-5fb678{color:#7F848E}.ct-a930e7{color:#98C379}.ct-ca0e09{color:#E06C75}.ct-8358df{color:#ABB2BF}.ct-d69d00{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"recommended-file-structure","depth":2,"text":"Recommended file structure"},{"id":"1-create-a-trpc-router","depth":2,"text":"1. Create a tRPC router"},{"id":"2-create-trpc-client-plugin","depth":2,"text":"2. Create tRPC client plugin"},{"id":"3-make-api-requests","depth":2,"text":"3. Make API requests"}]}},"_type":"markdown","_id":"content:1.get-started:2.usage.md","_source":"content","_file":"1.get-started/2.usage.md","_extension":"md"}
Reference in New Issue View Git Blame Copy Permalink