mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 20:19:33 +01:00
119 lines
2.7 KiB
Markdown
119 lines
2.7 KiB
Markdown
---
|
|
title: Simple
|
|
description: tRPC-Nuxt provides first class integration with tRPC.
|
|
---
|
|
|
|
# Simple Usage
|
|
|
|
## 1. Create a tRPC router
|
|
|
|
Initialize your tRPC backend using the `initTRPC` function and create your first router.
|
|
|
|
::code-group
|
|
|
|
```ts [server/trpc/trpc.ts]
|
|
/**
|
|
* 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'
|
|
|
|
const t = initTRPC.create()
|
|
|
|
/**
|
|
* Unprotected procedure
|
|
**/
|
|
export const publicProcedure = t.procedure;
|
|
|
|
export const router = t.router;
|
|
export const middleware = t.middleware;
|
|
```
|
|
|
|
```ts [server/api/trpc/[trpc].ts]
|
|
/**
|
|
* This is the API-handler of your app that contains all your API routes.
|
|
* On a bigger app, you will probably want to split this file up into multiple files.
|
|
*/
|
|
import { createNuxtApiHandler } from 'trpc-nuxt'
|
|
import { publicProcedure, router } from '~/server/trpc/trpc'
|
|
import { z } from 'zod'
|
|
|
|
export const appRouter = router({
|
|
hello: publicProcedure
|
|
// This is the input schema of your procedure
|
|
.input(
|
|
z.object({
|
|
text: z.string().nullish(),
|
|
}),
|
|
)
|
|
.query(({ input }) => {
|
|
// This is what you're returning to your client
|
|
return {
|
|
greeting: `hello ${input?.text ?? 'world'}`,
|
|
}
|
|
}),
|
|
})
|
|
|
|
// export only the type definition of the API
|
|
// None of the actual implementation is exposed to the client
|
|
export type AppRouter = typeof appRouter;
|
|
|
|
// export API handler
|
|
export default createNuxtApiHandler({
|
|
router: appRouter,
|
|
createContext: () => ({}),
|
|
})
|
|
```
|
|
|
|
::
|
|
|
|
## 2. Create tRPC client plugin
|
|
|
|
Create a strongly-typed plugin using your API's type signature.
|
|
|
|
```ts [plugins/client.ts]
|
|
import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client'
|
|
import type { AppRouter } from '~/server/api/trpc/[trpc]'
|
|
|
|
export default defineNuxtPlugin(() => {
|
|
/**
|
|
* createTRPCNuxtClient adds a `useQuery` composable
|
|
* built on top of `useAsyncData`.
|
|
*/
|
|
const client = createTRPCNuxtClient<AppRouter>({
|
|
links: [
|
|
httpBatchLink({
|
|
url: '/api/trpc',
|
|
}),
|
|
],
|
|
})
|
|
|
|
return {
|
|
provide: {
|
|
client,
|
|
},
|
|
}
|
|
})
|
|
```
|
|
|
|
## 3. Make an API request
|
|
|
|
```vue [pages/index.vue]
|
|
<script setup lang="ts">
|
|
const { $client } = useNuxtApp()
|
|
|
|
const { data: hello } = await $client.hello.useQuery({ text: 'client' })
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<p>{{ hello?.greeting }}</p>
|
|
</div>
|
|
</template>
|
|
```
|