update readme

This commit is contained in:
Robert Soriano
2022-05-18 07:13:04 -07:00
parent 7dd2a8c363
commit 0e6f890a0a
3 changed files with 64 additions and 21 deletions

View File

@@ -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

View File

@@ -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.

View File

@@ -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',
},
} }
} }