arthur/trpc-nuxt
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/trpc-nuxt.git synced 2026-01-14 12:14:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

remove clean-publish

Browse Source
This commit is contained in:
Robert Soriano
2022-05-19 01:23:20 -07:00
parent 6d6d3a6978
commit 4f2f88bea2
23 changed files with 1 additions and 857 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@@ -2,9 +2,6 @@
"name": "trpc-nuxt",
"type": "module",
"version": "0.1.0",
"publishConfig": {
"directory": "package"
},
"packageManager": "pnpm@7.1.0",
"license": "MIT",
"main": "./dist/module.cjs",
@@ -29,8 +26,7 @@
"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 .",
@@ -53,7 +49,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
View File

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

2
package/.npmrc
View File

@@ -1,2 +0,0 @@
ignore-workspace-root-check=true
shamefully-hoist=true

21
package/LICENSE
View File

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

141
package/README.md
View File

@@ -1,141 +0,0 @@
# tRPC-Nuxt
[![Version](https://img.shields.io/npm/v/trpc-nuxt?style=flat&colorA=000000&colorB=000000)](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
View File

@@ -1 +0,0 @@
export * from './dist/runtime/api'

39
package/package.json
View File

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

@@ -1,7 +0,0 @@
node_modules
*.log*
.nuxt
.nitro
.cache
.output
.env

31
package/playground/README.md
View File

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

18
package/playground/app.vue
View File

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

13
package/playground/nuxt.config.ts
View File

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

4
package/playground/package.json
View File

@@ -1,4 +0,0 @@
{
"name": "playground",
"private": true
}

82
package/playground/server/trpc/index.ts
View File

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

2
package/pnpm-workspace.yaml
View File

@@ -1,2 +0,0 @@
packages:
- playground/*

102
package/recipes/authorization.md
View File

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

41
package/recipes/error-formatting.md
View File

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

15
package/recipes/error-handling.md
View File

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

49
package/recipes/validation.md
View File

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

61
package/src/module.ts
View File

@@ -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)
`)
},
})

92
package/src/runtime/api.ts
View File

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

64
package/src/runtime/client.ts
View File

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

3
package/tsconfig.json
View File

@@ -1,3 +0,0 @@
{
"extends": "./playground/.nuxt/tsconfig.json"
}

12
pnpm-lock.yaml generated
View File

@@ -12,7 +12,6 @@ importers:
'@trpc/server': ^9.23.2
'@types/fs-extra': ^9.0.13
bumpp: ^7.1.1
clean-publish: ^4.0.0
eslint: ^8.14.0
fs-extra: ^10.1.0
h3: ^0.7.8
@@ -38,7 +37,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 +1693,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'}