mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 20:19:33 +01:00
Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
899369a0a6 | ||
|
|
08857b0f45 | ||
|
|
5b94433b8f | ||
|
|
38fb3edf22 | ||
|
|
4f2f88bea2 |
@@ -64,7 +64,7 @@ const client = useClient() // auto-imported
|
||||
const users = await client.query('getUsers')
|
||||
|
||||
const addUser = async () => {
|
||||
const mutate = await client.mutation('createUser', {
|
||||
const newUser = await client.mutation('createUser', {
|
||||
name: 'wagmi'
|
||||
})
|
||||
}
|
||||
|
||||
14
package.json
14
package.json
@@ -1,10 +1,7 @@
|
||||
{
|
||||
"name": "trpc-nuxt",
|
||||
"type": "module",
|
||||
"version": "0.1.0",
|
||||
"publishConfig": {
|
||||
"directory": "package"
|
||||
},
|
||||
"version": "0.1.1",
|
||||
"packageManager": "pnpm@7.1.0",
|
||||
"license": "MIT",
|
||||
"main": "./dist/module.cjs",
|
||||
@@ -24,13 +21,8 @@
|
||||
"dist",
|
||||
"*.d.ts"
|
||||
],
|
||||
"clean-publish": {
|
||||
"withoutPublish": true,
|
||||
"tempDir": "package"
|
||||
},
|
||||
"scripts": {
|
||||
"prepublishOnly": "rimraf ./package && nr build && clean-publish",
|
||||
"postpublish": "rimraf ./package",
|
||||
"prepublishOnly": "nr build",
|
||||
"build": "nuxt-module-build",
|
||||
"play": "nr build && nuxi dev playground",
|
||||
"lint": "eslint .",
|
||||
@@ -42,6 +34,7 @@
|
||||
"@nuxt/kit": "^3.0.0-rc.3",
|
||||
"@trpc/client": "^9.23.3",
|
||||
"@trpc/server": "^9.23.2",
|
||||
"defu": "^6.0.0",
|
||||
"fs-extra": "^10.1.0",
|
||||
"h3": "^0.7.8",
|
||||
"pathe": "^0.3.0",
|
||||
@@ -53,7 +46,6 @@
|
||||
"@nuxt/module-builder": "latest",
|
||||
"@types/fs-extra": "^9.0.13",
|
||||
"bumpp": "^7.1.1",
|
||||
"clean-publish": "^4.0.0",
|
||||
"eslint": "^8.14.0",
|
||||
"nuxt": "^3.0.0-rc.3",
|
||||
"ohash": "^0.1.0",
|
||||
|
||||
51
package/.gitignore
vendored
51
package/.gitignore
vendored
@@ -1,51 +0,0 @@
|
||||
# Dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
*.log*
|
||||
|
||||
# Temp directories
|
||||
.temp
|
||||
.tmp
|
||||
.cache
|
||||
|
||||
# Yarn
|
||||
**/.yarn/cache
|
||||
**/.yarn/*state*
|
||||
|
||||
# Generated dirs
|
||||
dist
|
||||
|
||||
# Nuxt
|
||||
.nuxt
|
||||
.output
|
||||
.vercel_build_output
|
||||
.build-*
|
||||
.env
|
||||
.netlify
|
||||
|
||||
# Env
|
||||
.env
|
||||
|
||||
# Testing
|
||||
reports
|
||||
coverage
|
||||
*.lcov
|
||||
.nyc_output
|
||||
|
||||
# VSCode
|
||||
.vscode
|
||||
|
||||
# Intellij idea
|
||||
*.iml
|
||||
.idea
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
.AppleDB
|
||||
.AppleDesktop
|
||||
Network Trash Folder
|
||||
Temporary Items
|
||||
.apdisk
|
||||
@@ -1,2 +0,0 @@
|
||||
ignore-workspace-root-check=true
|
||||
shamefully-hoist=true
|
||||
@@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2022 Robert Soriano <https://github.com/wobsoriano>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -1,141 +0,0 @@
|
||||
# tRPC-Nuxt
|
||||
|
||||
[](https://www.npmjs.com/package/trpc-nuxt)
|
||||
|
||||
End-to-end typesafe APIs with [tRPC.io](https://trpc.io/) in Nuxt applications.
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm i trpc-nuxt
|
||||
```
|
||||
|
||||
```ts
|
||||
// nuxt.config.ts
|
||||
import { defineNuxtConfig } from 'nuxt'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
modules: ['trpc-nuxt'],
|
||||
trpc: {
|
||||
baseURL: 'http://localhost:3000', // defaults to http://localhost:3000
|
||||
trpcURL: '/api/trpc', // defaults to /api/trpc
|
||||
},
|
||||
typescript: {
|
||||
strict: true // set this to true to make input/output types work
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Expose your tRPC [routes](https://trpc.io/docs/router) under `~/server/trpc/index.ts`:
|
||||
|
||||
```ts
|
||||
// ~/server/trpc/index.ts
|
||||
import type { inferAsyncReturnType } from '@trpc/server'
|
||||
import * as trpc from '@trpc/server'
|
||||
import { z } from 'zod' // yup/superstruct/zod/myzod/custom
|
||||
|
||||
export const router = trpc.router()
|
||||
// queries and mutations...
|
||||
.query('getUsers', {
|
||||
async resolve(req) {
|
||||
// use your ORM of choice
|
||||
return await UserModel.all()
|
||||
},
|
||||
})
|
||||
.mutation('createUser', {
|
||||
// validate input with Zod
|
||||
input: z.object({ name: z.string().min(5) }),
|
||||
async resolve(req) {
|
||||
// use your ORM of choice
|
||||
return await UserModel.create({
|
||||
data: req.input,
|
||||
})
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
Use the client like so:
|
||||
|
||||
```ts
|
||||
const client = useClient() // auto-imported
|
||||
|
||||
const users = await client.query('getUsers')
|
||||
|
||||
const addUser = async () => {
|
||||
const mutate = await client.mutation('createUser', {
|
||||
name: 'wagmi'
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## useAsyncQuery
|
||||
|
||||
A thin wrapper around [`useAsyncData`](https://v3.nuxtjs.org/api/composables/use-async-data/) and `client.query()`.
|
||||
|
||||
The first argument is a `[path, input]`-tuple - if the `input` is optional, you can omit the, `input`-part.
|
||||
|
||||
You'll notice that you get autocompletion on the `path` and automatic typesafety on the `input`.
|
||||
|
||||
```ts
|
||||
const {
|
||||
data,
|
||||
pending,
|
||||
error,
|
||||
refresh
|
||||
} = await useAsyncQuery(['getUser', { id: 69 }], {
|
||||
// pass useAsyncData options here
|
||||
server: true
|
||||
})
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
trpc-nuxt accepts the following options exposed under `~/server/trpc.index.ts`:
|
||||
|
||||
```ts
|
||||
import * as trpc from '@trpc/server'
|
||||
import type { inferAsyncReturnType } from '@trpc/server'
|
||||
import type { CompatibilityEvent } from 'h3'
|
||||
import type { OnErrorPayload } from 'trpc-nuxt/api'
|
||||
|
||||
export const router = trpc.router<inferAsyncReturnType<typeof createContext>>()
|
||||
|
||||
// Optional
|
||||
// https://trpc.io/docs/context
|
||||
export const createContext = (event: CompatibilityEvent) => {
|
||||
// ...
|
||||
return {
|
||||
/** context data */
|
||||
}
|
||||
}
|
||||
|
||||
// Optional
|
||||
// https://trpc.io/docs/caching#using-responsemeta--to-cache-responses
|
||||
export const responseMeta = () => {
|
||||
// ...
|
||||
return {
|
||||
// { headers: ... }
|
||||
}
|
||||
}
|
||||
|
||||
// Optional
|
||||
// https://trpc.io/docs/error-handling#handling-errors
|
||||
export const onError = (payload: OnErrorPayload<typeof router>) => {
|
||||
// Do whatever here like send to bug reporting and stuff
|
||||
}
|
||||
```
|
||||
|
||||
## Recipes
|
||||
|
||||
- [Validation](/recipes/validation.md)
|
||||
- [Authorization](/recipes/authorization.md)
|
||||
- [Error Handling](/recipes/error-handling.md)
|
||||
- [Error Formatting](/recipes/error-formatting.md)
|
||||
|
||||
Learn more about tRPC.io [here](https://trpc.io/docs).
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
1
package/api.d.ts
vendored
1
package/api.d.ts
vendored
@@ -1 +0,0 @@
|
||||
export * from './dist/runtime/api'
|
||||
@@ -1,39 +0,0 @@
|
||||
{
|
||||
"name": "trpc-nuxt",
|
||||
"type": "module",
|
||||
"version": "0.0.3",
|
||||
"publishConfig": {
|
||||
"directory": "package"
|
||||
},
|
||||
"packageManager": "pnpm@7.1.0",
|
||||
"license": "MIT",
|
||||
"main": "./dist/module.cjs",
|
||||
"types": "./dist/types.d.ts",
|
||||
"exports": {
|
||||
"./package.json": "./package.json",
|
||||
".": {
|
||||
"import": "./dist/module.mjs",
|
||||
"require": "./dist/module.cjs"
|
||||
},
|
||||
"./api": {
|
||||
"import": "./dist/runtime/api.mjs",
|
||||
"types": "./dist/runtime/api.d.ts"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"*.d.ts"
|
||||
],
|
||||
"dependencies": {
|
||||
"@nuxt/kit": "^3.0.0-rc.3",
|
||||
"@trpc/client": "^9.23.3",
|
||||
"@trpc/server": "^9.23.2",
|
||||
"fs-extra": "^10.1.0",
|
||||
"h3": "^0.7.8",
|
||||
"pathe": "^0.3.0",
|
||||
"ufo": "^0.8.4"
|
||||
},
|
||||
"scripts": {
|
||||
"postpublish": "rimraf ./package"
|
||||
}
|
||||
}
|
||||
7
package/playground/.gitignore
vendored
7
package/playground/.gitignore
vendored
@@ -1,7 +0,0 @@
|
||||
node_modules
|
||||
*.log*
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
.output
|
||||
.env
|
||||
@@ -1,31 +0,0 @@
|
||||
# dev playground
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on http://localhost:3000
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
pnpm preview
|
||||
```
|
||||
@@ -1,18 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const { data, error } = await useAsyncQuery(['getUser', { username: 'jcena' }], {
|
||||
lazy: true,
|
||||
})
|
||||
|
||||
const client = useClient()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="data">
|
||||
{{ JSON.stringify(data, null, 2) }}
|
||||
</div>
|
||||
<div v-else-if="error">
|
||||
asdx {{ JSON.stringify(error, null, 2) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,13 +0,0 @@
|
||||
import { defineNuxtConfig } from 'nuxt'
|
||||
import Module from '..'
|
||||
|
||||
// https://v3.nuxtjs.org/api/configuration/nuxt.config
|
||||
export default defineNuxtConfig({
|
||||
modules: [Module],
|
||||
runtimeConfig: {
|
||||
baseURL: 'http://localhost:3000',
|
||||
},
|
||||
typescript: {
|
||||
strict: true,
|
||||
},
|
||||
})
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"name": "playground",
|
||||
"private": true
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
// ~/server/trpc/index.ts
|
||||
import { ZodError, z } from 'zod'
|
||||
import * as trpc from '@trpc/server'
|
||||
import type { inferAsyncReturnType } from '@trpc/server'
|
||||
import type { CompatibilityEvent } from 'h3'
|
||||
import type { ResponseMetaFnPayload } from 'trpc-nuxt/api'
|
||||
// import superjson from 'superjson'
|
||||
|
||||
const fakeUsers = [
|
||||
{ id: 1, username: 'jcena' },
|
||||
{ id: 2, username: 'dbatista' },
|
||||
{ id: 3, username: 'jbiden' },
|
||||
]
|
||||
|
||||
export const router = trpc
|
||||
.router<inferAsyncReturnType<typeof createContext>>()
|
||||
.formatError(({ shape, error }) => {
|
||||
return {
|
||||
...shape,
|
||||
data: {
|
||||
...shape.data,
|
||||
zodError:
|
||||
error.code === 'BAD_REQUEST'
|
||||
&& error.cause instanceof ZodError
|
||||
? error.cause.flatten()
|
||||
: null,
|
||||
},
|
||||
}
|
||||
})
|
||||
.query('getUsers', {
|
||||
resolve() {
|
||||
return fakeUsers
|
||||
},
|
||||
})
|
||||
.query('getUser', {
|
||||
// validate input with Zod
|
||||
input: z.object({
|
||||
username: z.string().min(5),
|
||||
}),
|
||||
resolve(req) {
|
||||
return fakeUsers.find(i => i.username === req.input.username) ?? null
|
||||
},
|
||||
})
|
||||
.mutation('createUser', {
|
||||
input: z.object({ username: z.string().min(5) }),
|
||||
resolve(req) {
|
||||
const newUser = {
|
||||
id: fakeUsers.length + 1,
|
||||
username: req.input.username,
|
||||
}
|
||||
fakeUsers.push(newUser)
|
||||
return newUser
|
||||
},
|
||||
})
|
||||
|
||||
export const createContext = (event: CompatibilityEvent) => {
|
||||
event.res.setHeader('x-ssr', 1)
|
||||
return {}
|
||||
}
|
||||
|
||||
export const responseMeta = (opts: ResponseMetaFnPayload<any>) => {
|
||||
// const nuxtApp = useNuxtApp()
|
||||
// const client = useClient()
|
||||
// console.log(opts)
|
||||
|
||||
// if (nuxtApp.nuxtState) {
|
||||
// nuxtApp.nuxtState.trpc = client.runtime.transformer.serialize({
|
||||
// ctx: opts.ctx,
|
||||
// errors: opts.errors,
|
||||
// })
|
||||
// }
|
||||
// else {
|
||||
// nuxtApp.nuxtState = {
|
||||
// trpc: client.runtime.transformer.serialize({
|
||||
// ctx: opts.ctx,
|
||||
// errors: opts.errors,
|
||||
// }),
|
||||
// }
|
||||
// }
|
||||
|
||||
return {}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
packages:
|
||||
- playground/*
|
||||
@@ -1,102 +0,0 @@
|
||||
## 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.
|
||||
|
||||
### Create context from request headers
|
||||
|
||||
```ts
|
||||
// ~/server/trpc/index.ts
|
||||
import type { inferAsyncReturnType } 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({ req }: 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,
|
||||
}
|
||||
}
|
||||
|
||||
type Context = inferAsyncReturnType<typeof createContext>
|
||||
|
||||
// [..] Define API handler and app router
|
||||
```
|
||||
|
||||
### Option 1: Authorize using resolver
|
||||
|
||||
```ts
|
||||
import { TRPCError } from '@trpc/server'
|
||||
|
||||
export const router = trpc
|
||||
.router<Context>()
|
||||
// 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 TRPCError({ code: 'UNAUTHORIZED' })
|
||||
|
||||
return {
|
||||
secret: 'sauce',
|
||||
}
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### Option 2: Authorize using middleware
|
||||
|
||||
```ts
|
||||
import * as trpc from '@trpc/server'
|
||||
import { TRPCError } from '@trpc/server'
|
||||
|
||||
// Merging routers: https://trpc.io/docs/merging-routers
|
||||
|
||||
export const router = trpc
|
||||
.router<Context>()
|
||||
// this is accessible for everyone
|
||||
.query('hello', {
|
||||
input: z.string().nullish(),
|
||||
resolve: ({ input, ctx }) => {
|
||||
return `hello ${input ?? ctx.user?.name ?? 'world'}`
|
||||
},
|
||||
})
|
||||
.merge(
|
||||
'admin.',
|
||||
trpc.router<Context>()
|
||||
// this protects all procedures defined next in this router
|
||||
.middleware(async ({ ctx, next }) => {
|
||||
if (!ctx.user?.isAdmin)
|
||||
throw new TRPCError({ code: 'UNAUTHORIZED' })
|
||||
|
||||
return next()
|
||||
})
|
||||
.query('secret', {
|
||||
resolve: ({ ctx }) => {
|
||||
return {
|
||||
secret: 'sauce',
|
||||
}
|
||||
},
|
||||
}),
|
||||
)
|
||||
```
|
||||
|
||||
Learn more about authorization [here](https://trpc.io/docs/authorization).
|
||||
@@ -1,41 +0,0 @@
|
||||
## Error Formatting
|
||||
|
||||
The error formatting in your router will be inferred all the way to your client (& Vue components).
|
||||
|
||||
### Adding custom formatting
|
||||
|
||||
```ts
|
||||
// ~/server/trpc/index.ts
|
||||
import * as trpc from '@trpc/server'
|
||||
|
||||
export const router = trpc.router<Context>()
|
||||
.formatError(({ shape, error }) => {
|
||||
return {
|
||||
...shape,
|
||||
data: {
|
||||
...shape.data,
|
||||
zodError:
|
||||
error.code === 'BAD_REQUEST'
|
||||
&& error.cause instanceof ZodError
|
||||
? error.cause.flatten()
|
||||
: null,
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Usage in Vue
|
||||
|
||||
```html
|
||||
<script setup lang="ts">
|
||||
const { error } = await useAsyncQuery(['getUser', { id: 69 }])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<pre v-if="error?.data?.zodError">
|
||||
{{ JSON.stringify(error.data.zodError, null, 2) }}
|
||||
</pre>
|
||||
</template>
|
||||
```
|
||||
|
||||
Learn more about error formatting [here](https://trpc.io/docs/error-formatting).
|
||||
@@ -1,15 +0,0 @@
|
||||
## Handling errors
|
||||
|
||||
All errors that occur in a procedure go through the `onError` method before being sent to the client. Here you can handle or change errors.
|
||||
|
||||
```ts
|
||||
// ~/server/trpc/index.ts
|
||||
import * as trpc from '@trpc/server'
|
||||
|
||||
export function onError({ error, type, path, input, ctx, req }) {
|
||||
console.error('Error:', error)
|
||||
if (error.code === 'INTERNAL_SERVER_ERROR') {
|
||||
// send to bug reporting
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -1,49 +0,0 @@
|
||||
## Validation
|
||||
|
||||
tRPC works out-of-the-box with yup/superstruct/zod/myzod/custom validators.
|
||||
|
||||
### Input Validation
|
||||
|
||||
```ts
|
||||
// ~/server/trpc/index.ts
|
||||
import { z } from 'zod'
|
||||
|
||||
export const router = trpc
|
||||
.router()
|
||||
.mutation('createUser', {
|
||||
// validate input with Zod
|
||||
input: z.object({
|
||||
name: z.string().min(5)
|
||||
}),
|
||||
async resolve(req) {
|
||||
// use your ORM of choice
|
||||
return await UserModel.create({
|
||||
data: req.input,
|
||||
})
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### Output Validation
|
||||
|
||||
```ts
|
||||
// ~/server/trpc/index.ts
|
||||
import { z } from 'zod'
|
||||
|
||||
export const router = trpc
|
||||
.router()
|
||||
.query('hello', {
|
||||
// validate output with Zod
|
||||
output: z.object({
|
||||
greeting: z.string()
|
||||
}),
|
||||
// expects return type of { greeting: string }
|
||||
resolve() {
|
||||
return {
|
||||
greeting: 'hello!',
|
||||
}
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
Learn more about input validation [here](https://trpc.io/docs/router#input-validation).
|
||||
@@ -1,61 +0,0 @@
|
||||
import { fileURLToPath } from 'url'
|
||||
import { dirname, join } from 'pathe'
|
||||
|
||||
import { addServerHandler, defineNuxtModule } from '@nuxt/kit'
|
||||
import fs from 'fs-extra'
|
||||
|
||||
export interface ModuleOptions {
|
||||
baseURL: string
|
||||
trpcURL: string
|
||||
}
|
||||
|
||||
export default defineNuxtModule<ModuleOptions>({
|
||||
meta: {
|
||||
name: 'trpc-nuxt',
|
||||
configKey: 'trpc',
|
||||
},
|
||||
defaults: {
|
||||
baseURL: 'http://localhost:3000',
|
||||
trpcURL: '/api/trpc',
|
||||
},
|
||||
async setup(options, nuxt) {
|
||||
const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
|
||||
nuxt.options.build.transpile.push(runtimeDir)
|
||||
|
||||
const clientPath = join(nuxt.options.buildDir, 'trpc-client.ts')
|
||||
const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
|
||||
|
||||
addServerHandler({
|
||||
route: `${options.trpcURL}/*`,
|
||||
handler: handlerPath,
|
||||
})
|
||||
|
||||
nuxt.hook('autoImports:extend', (imports) => {
|
||||
imports.push(
|
||||
{ name: 'useClient', from: clientPath },
|
||||
{ name: 'useAsyncQuery', from: join(runtimeDir, 'client') },
|
||||
)
|
||||
})
|
||||
|
||||
await fs.ensureDir(dirname(clientPath))
|
||||
|
||||
await fs.writeFile(clientPath, `
|
||||
import * as trpc from '@trpc/client'
|
||||
import type { router } from '~/server/trpc'
|
||||
|
||||
const client = trpc.createTRPCClient<typeof router>({
|
||||
url: '${options.baseURL}${options.trpcURL}',
|
||||
})
|
||||
|
||||
export const useClient = () => client
|
||||
`)
|
||||
|
||||
await fs.writeFile(handlerPath, `
|
||||
import { createTRPCHandler } from 'trpc-nuxt/api'
|
||||
import * as functions from '~/server/trpc'
|
||||
|
||||
export default createTRPCHandler(functions)
|
||||
`)
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
import { resolveHTTPResponse } from '@trpc/server'
|
||||
import type {
|
||||
AnyRouter,
|
||||
ProcedureType,
|
||||
ResponseMeta,
|
||||
TRPCError,
|
||||
inferRouterContext,
|
||||
inferRouterError,
|
||||
} from '@trpc/server'
|
||||
import { createURL } from 'ufo'
|
||||
import type { CompatibilityEvent } from 'h3'
|
||||
import { defineEventHandler, isMethod, useBody } from 'h3'
|
||||
import type { TRPCResponse } from '@trpc/server/dist/declarations/src/rpc'
|
||||
|
||||
type MaybePromise<T> = T | Promise<T>
|
||||
|
||||
export type CreateContextFn<TRouter extends AnyRouter> = (event: CompatibilityEvent) => MaybePromise<inferRouterContext<TRouter>>
|
||||
|
||||
export interface ResponseMetaFnPayload<TRouter extends AnyRouter> {
|
||||
data: TRPCResponse<unknown, inferRouterError<TRouter>>[]
|
||||
ctx?: inferRouterContext<TRouter>
|
||||
paths?: string[]
|
||||
type: ProcedureType | 'unknown'
|
||||
errors: TRPCError[]
|
||||
}
|
||||
|
||||
export type ResponseMetaFn<TRouter extends AnyRouter> = (opts: ResponseMetaFnPayload<TRouter>) => ResponseMeta
|
||||
|
||||
export interface OnErrorPayload<TRouter extends AnyRouter> {
|
||||
error: TRPCError
|
||||
type: ProcedureType | 'unknown'
|
||||
path: string | undefined
|
||||
req: CompatibilityEvent['req']
|
||||
input: unknown
|
||||
ctx: undefined | inferRouterContext<TRouter>
|
||||
}
|
||||
|
||||
export type OnErrorFn<TRouter extends AnyRouter> = (opts: OnErrorPayload<TRouter>) => void
|
||||
|
||||
export function createTRPCHandler<Router extends AnyRouter>({
|
||||
router,
|
||||
createContext,
|
||||
responseMeta,
|
||||
onError,
|
||||
}: {
|
||||
router: Router
|
||||
createContext?: CreateContextFn<Router>
|
||||
responseMeta?: ResponseMetaFn<Router>
|
||||
onError?: OnErrorFn<Router>
|
||||
}) {
|
||||
const url = '/api/trpc'
|
||||
|
||||
return defineEventHandler(async (event) => {
|
||||
const {
|
||||
req,
|
||||
res,
|
||||
} = event
|
||||
|
||||
const $url = createURL(req.url)
|
||||
|
||||
event.context.hello = 'world'
|
||||
|
||||
const httpResponse = await resolveHTTPResponse({
|
||||
router,
|
||||
req: {
|
||||
method: req.method,
|
||||
headers: req.headers,
|
||||
body: isMethod(event, 'GET') ? null : await useBody(event),
|
||||
query: $url.searchParams,
|
||||
},
|
||||
path: $url.pathname.substring(url.length + 1),
|
||||
createContext: async () => createContext?.(event),
|
||||
responseMeta,
|
||||
onError: (o) => {
|
||||
onError?.({
|
||||
...o,
|
||||
req,
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
const { status, headers, body } = httpResponse
|
||||
|
||||
res.statusCode = status
|
||||
|
||||
Object.keys(headers).forEach((key) => {
|
||||
res.setHeader(key, headers[key])
|
||||
})
|
||||
|
||||
return body
|
||||
})
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
import type {
|
||||
AsyncData,
|
||||
AsyncDataOptions,
|
||||
KeyOfRes,
|
||||
PickFrom,
|
||||
_Transform,
|
||||
} from 'nuxt/dist/app/composables/asyncData'
|
||||
import type { ProcedureRecord, inferHandlerInput, inferProcedureInput, inferProcedureOutput } from '@trpc/server'
|
||||
import type { TRPCClientErrorLike } from '@trpc/client'
|
||||
import { objectHash } from 'ohash'
|
||||
// @ts-expect-error: Resolved by Nuxt
|
||||
import { useAsyncData, useState } from '#imports'
|
||||
// @ts-expect-error: Resolved by Nuxt
|
||||
import { useClient } from '#build/trpc-client'
|
||||
// @ts-expect-error: Resolved by Nuxt
|
||||
import type { router } from '~/server/trpc'
|
||||
|
||||
type AppRouter = typeof router
|
||||
|
||||
type inferProcedures<
|
||||
TObj extends ProcedureRecord<any, any, any, any, any, any>,
|
||||
> = {
|
||||
[TPath in keyof TObj]: {
|
||||
input: inferProcedureInput<TObj[TPath]>
|
||||
output: inferProcedureOutput<TObj[TPath]>
|
||||
};
|
||||
}
|
||||
|
||||
type TQueries = AppRouter['_def']['queries']
|
||||
type TError = TRPCClientErrorLike<AppRouter>
|
||||
|
||||
type TQueryValues = inferProcedures<AppRouter['_def']['queries']>
|
||||
|
||||
export async function useAsyncQuery<
|
||||
TPath extends keyof TQueryValues & string,
|
||||
TOutput extends TQueryValues[TPath]['output'] = TQueryValues[TPath]['output'],
|
||||
Transform extends _Transform<TOutput> = _Transform<TOutput, TOutput>,
|
||||
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
|
||||
>(
|
||||
pathAndInput: [path: TPath, ...args: inferHandlerInput<TQueries[TPath]>],
|
||||
options: AsyncDataOptions<TOutput, Transform, PickKeys> = {},
|
||||
): Promise<AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TError>> {
|
||||
const client = useClient()
|
||||
const key = `${pathAndInput[0]}-${objectHash(pathAndInput[1] ? JSON.stringify(pathAndInput[1]) : '')}`
|
||||
const serverError = useState<TError | null>(`error-${key}`, () => null)
|
||||
const { error, data, ...rest } = await useAsyncData(
|
||||
key,
|
||||
() => client.query(...pathAndInput),
|
||||
options,
|
||||
)
|
||||
|
||||
// @ts-expect-error: Resolved by Nuxt
|
||||
if (process.server && error.value && !serverError.value)
|
||||
serverError.value = error.value as any
|
||||
|
||||
if (data.value)
|
||||
serverError.value = null
|
||||
|
||||
return {
|
||||
...rest,
|
||||
data,
|
||||
error: serverError,
|
||||
} as any
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "./playground/.nuxt/tsconfig.json"
|
||||
}
|
||||
@@ -1,18 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
const { data, error } = await useAsyncQuery(['getUser', { username: 'jcena' }], {
|
||||
lazy: true,
|
||||
const { data, pending, error } = await useAsyncQuery(['getUser', { username: 'jcena' }], {
|
||||
lazy: false,
|
||||
transform: data => data || null,
|
||||
})
|
||||
|
||||
const client = useClient()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="data">
|
||||
{{ JSON.stringify(data, null, 2) }}
|
||||
</div>
|
||||
<div v-else-if="error">
|
||||
asdx {{ JSON.stringify(error, null, 2) }}
|
||||
</div>
|
||||
<div v-if="pending">
|
||||
Loading...
|
||||
</div>
|
||||
<div v-else-if="error">
|
||||
Error: {{ JSON.stringify(error, null, 2) }}
|
||||
</div>
|
||||
<div v-else>
|
||||
User {{ JSON.stringify(data, null, 2) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
14
pnpm-lock.yaml
generated
14
pnpm-lock.yaml
generated
@@ -12,7 +12,7 @@ importers:
|
||||
'@trpc/server': ^9.23.2
|
||||
'@types/fs-extra': ^9.0.13
|
||||
bumpp: ^7.1.1
|
||||
clean-publish: ^4.0.0
|
||||
defu: ^6.0.0
|
||||
eslint: ^8.14.0
|
||||
fs-extra: ^10.1.0
|
||||
h3: ^0.7.8
|
||||
@@ -28,6 +28,7 @@ importers:
|
||||
'@nuxt/kit': 3.0.0-rc.3
|
||||
'@trpc/client': 9.23.4_@trpc+server@9.23.4
|
||||
'@trpc/server': 9.23.4
|
||||
defu: 6.0.0
|
||||
fs-extra: 10.1.0
|
||||
h3: 0.7.8
|
||||
pathe: 0.3.0
|
||||
@@ -38,7 +39,6 @@ importers:
|
||||
'@nuxt/module-builder': 0.1.7
|
||||
'@types/fs-extra': 9.0.13
|
||||
bumpp: 7.1.1
|
||||
clean-publish: 4.0.0
|
||||
eslint: 8.15.0
|
||||
nuxt: 3.0.0-rc.3
|
||||
ohash: 0.1.0
|
||||
@@ -1695,16 +1695,6 @@ packages:
|
||||
resolution: {integrity: sha512-SXgeMX9VwDe7iFFaEWkA5AstuER9YKqy4EhHqr4DVqkwmD9rpVimkMKWHdjn30Ja45txyjhSn63lVX69eVCckg==}
|
||||
dev: true
|
||||
|
||||
/clean-publish/4.0.0:
|
||||
resolution: {integrity: sha512-PcOxJSnPgncx/ANmgPw8hj9DDtdLHTxIc6Vh/yXCX7IA9w1oUSx2POL0Vno/7omhyrKxMKTpnRh2wlzwH5zaCw==}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
cross-spawn: 7.0.3
|
||||
fast-glob: 3.2.11
|
||||
lilconfig: 2.0.5
|
||||
micromatch: 4.0.5
|
||||
dev: true
|
||||
|
||||
/clean-regexp/1.0.0:
|
||||
resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
|
||||
engines: {node: '>=4'}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { fileURLToPath } from 'url'
|
||||
import { dirname, join } from 'pathe'
|
||||
import { defu } from 'defu'
|
||||
|
||||
import { addServerHandler, defineNuxtModule } from '@nuxt/kit'
|
||||
import fs from 'fs-extra'
|
||||
@@ -25,8 +26,14 @@ export default defineNuxtModule<ModuleOptions>({
|
||||
const clientPath = join(nuxt.options.buildDir, 'trpc-client.ts')
|
||||
const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
|
||||
|
||||
// Final resolved configuration
|
||||
const finalConfig = nuxt.options.runtimeConfig.public.trpc = defu(nuxt.options.runtimeConfig.public.trpc, {
|
||||
baseURL: options.baseURL,
|
||||
trpcURL: options.trpcURL,
|
||||
})
|
||||
|
||||
addServerHandler({
|
||||
route: `${options.trpcURL}/*`,
|
||||
route: `${finalConfig.trpcURL}/*`,
|
||||
handler: handlerPath,
|
||||
})
|
||||
|
||||
@@ -44,7 +51,7 @@ export default defineNuxtModule<ModuleOptions>({
|
||||
import type { router } from '~/server/trpc'
|
||||
|
||||
const client = trpc.createTRPCClient<typeof router>({
|
||||
url: '${options.baseURL}${options.trpcURL}',
|
||||
url: '${finalConfig.baseURL}${finalConfig.trpcURL}',
|
||||
})
|
||||
|
||||
export const useClient = () => client
|
||||
@@ -52,9 +59,15 @@ export default defineNuxtModule<ModuleOptions>({
|
||||
|
||||
await fs.writeFile(handlerPath, `
|
||||
import { createTRPCHandler } from 'trpc-nuxt/api'
|
||||
import { useRuntimeConfig } from '#imports'
|
||||
import * as functions from '~/server/trpc'
|
||||
|
||||
export default createTRPCHandler(functions)
|
||||
const { trpc: { trpcURL } } = useRuntimeConfig().public
|
||||
|
||||
export default createTRPCHandler({
|
||||
...functions,
|
||||
trpcURL
|
||||
})
|
||||
`)
|
||||
},
|
||||
})
|
||||
|
||||
@@ -42,14 +42,14 @@ export function createTRPCHandler<Router extends AnyRouter>({
|
||||
createContext,
|
||||
responseMeta,
|
||||
onError,
|
||||
trpcURL,
|
||||
}: {
|
||||
router: Router
|
||||
createContext?: CreateContextFn<Router>
|
||||
responseMeta?: ResponseMetaFn<Router>
|
||||
onError?: OnErrorFn<Router>
|
||||
trpcURL: string
|
||||
}) {
|
||||
const url = '/api/trpc'
|
||||
|
||||
return defineEventHandler(async (event) => {
|
||||
const {
|
||||
req,
|
||||
@@ -68,7 +68,7 @@ export function createTRPCHandler<Router extends AnyRouter>({
|
||||
body: isMethod(event, 'GET') ? null : await useBody(event),
|
||||
query: $url.searchParams,
|
||||
},
|
||||
path: $url.pathname.substring(url.length + 1),
|
||||
path: $url.pathname.substring(trpcURL.length + 1),
|
||||
createContext: async () => createContext?.(event),
|
||||
responseMeta,
|
||||
onError: (o) => {
|
||||
|
||||
Reference in New Issue
Block a user