mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 12:14:40 +01:00
update readme
This commit is contained in:
55
README.md
55
README.md
@@ -7,7 +7,7 @@ End-to-end typesafe APIs with [tRPC.io](https://trpc.io/) in Nuxt applications.
|
|||||||
## Install
|
## Install
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm i trpc-nuxt -D
|
npm i trpc-nuxt
|
||||||
```
|
```
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
@@ -75,7 +75,7 @@ console.log(farewell); // => 👈 goodbye
|
|||||||
|
|
||||||
## Recipes
|
## Recipes
|
||||||
|
|
||||||
### Input validation with [Zod](https://github.com/colinhacks/zod)
|
### Validation
|
||||||
|
|
||||||
tRPC works out-of-the-box with yup/superstruct/zod/myzod/custom validators. Learn more about input validation [here](https://trpc.io/docs/router#input-validation).
|
tRPC works out-of-the-box with yup/superstruct/zod/myzod/custom validators. Learn more about input validation [here](https://trpc.io/docs/router#input-validation).
|
||||||
|
|
||||||
@@ -99,6 +99,57 @@ export const router = trpc
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Authorization
|
||||||
|
|
||||||
|
The `createContext`-function is called for each incoming request so here you can add contextual information about the calling user from the request object. Learn more about authorization [here](https://trpc.io/docs/authorization).
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import * as trpc from '@trpc/server'
|
||||||
|
import type { CompatibilityEvent } from 'h3'
|
||||||
|
import { decodeAndVerifyJwtToken } from '~/somewhere/in/your/app/utils'
|
||||||
|
|
||||||
|
// The app's context - is generated for each incoming request
|
||||||
|
export async function createContext(event: CompatibilityEvent) {
|
||||||
|
// Create your context based on the request object
|
||||||
|
// Will be available as `ctx` in all your resolvers
|
||||||
|
|
||||||
|
// This is just an example of something you'd might want to do in your ctx fn
|
||||||
|
async function getUserFromHeader() {
|
||||||
|
if (req.headers.authorization) {
|
||||||
|
const user = await decodeAndVerifyJwtToken(req.headers.authorization.split(' ')[1])
|
||||||
|
return user
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
const user = await getUserFromHeader()
|
||||||
|
|
||||||
|
return {
|
||||||
|
user,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const router = trpc
|
||||||
|
.router<inferAsyncReturnType<typeof createContext>>()
|
||||||
|
// open for anyone
|
||||||
|
.query('hello', {
|
||||||
|
input: z.string().nullish(),
|
||||||
|
resolve: ({ input, ctx }) => {
|
||||||
|
return `hello ${input ?? ctx.user?.name ?? 'world'}`
|
||||||
|
},
|
||||||
|
})
|
||||||
|
// checked in resolver
|
||||||
|
.query('secret', {
|
||||||
|
resolve: ({ ctx }) => {
|
||||||
|
if (!ctx.user)
|
||||||
|
throw new trpc.TRPCError({ code: 'UNAUTHORIZED' })
|
||||||
|
|
||||||
|
return {
|
||||||
|
secret: 'sauce',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
Learn more about tRPC.io [here](https://trpc.io/docs).
|
Learn more about tRPC.io [here](https://trpc.io/docs).
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|||||||
@@ -1,20 +1,11 @@
|
|||||||
# Nuxt 3 Minimal Starter
|
# dev playground
|
||||||
|
|
||||||
Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
|
|
||||||
|
|
||||||
## Setup
|
## Setup
|
||||||
|
|
||||||
Make sure to install the dependencies:
|
Make sure to install the dependencies:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# yarn
|
pnpm install
|
||||||
yarn install
|
|
||||||
|
|
||||||
# npm
|
|
||||||
npm install
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm install --shamefully-hoist
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Development Server
|
## Development Server
|
||||||
@@ -22,7 +13,7 @@ pnpm install --shamefully-hoist
|
|||||||
Start the development server on http://localhost:3000
|
Start the development server on http://localhost:3000
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
pnpm dev
|
||||||
```
|
```
|
||||||
|
|
||||||
## Production
|
## Production
|
||||||
@@ -30,13 +21,11 @@ npm run dev
|
|||||||
Build the application for production:
|
Build the application for production:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run build
|
pnpm build
|
||||||
```
|
```
|
||||||
|
|
||||||
Locally preview production build:
|
Locally preview production build:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run preview
|
pnpm preview
|
||||||
```
|
```
|
||||||
|
|
||||||
Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information.
|
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import * as trpc from '@trpc/server'
|
import * as trpc from '@trpc/server'
|
||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
|
import type { CompatibilityEvent } from 'h3'
|
||||||
|
|
||||||
export const router = trpc
|
export const router = trpc
|
||||||
.router()
|
.router()
|
||||||
@@ -14,10 +15,12 @@ export const router = trpc
|
|||||||
})
|
})
|
||||||
|
|
||||||
// optional
|
// optional
|
||||||
export const createContext = () => {
|
export const createContext = (event: CompatibilityEvent) => {
|
||||||
// ...
|
|
||||||
return {
|
return {
|
||||||
/** context data */
|
user: {
|
||||||
|
id: 69,
|
||||||
|
name: 'robert',
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user