Compare commits

...

17 Commits

Author SHA1 Message Date
wobsoriano
fd38c4f983 chore: release v0.4.1 2022-11-12 20:16:38 -08:00
wobsoriano
48d4c6342f update playground 2022-11-12 20:16:29 -08:00
wobsoriano
297c3d52f4 docs: update usage 2022-11-12 20:15:52 -08:00
wobsoriano
0f9653d1a4 remove /module 2022-11-12 20:12:36 -08:00
wobsoriano
85998101c7 feat: remove nuxt 3 wrappers for client 2022-11-12 20:10:50 -08:00
wobsoriano
d6cb770154 update installation instructions 2022-11-12 18:41:44 -08:00
wobsoriano
c222008524 update installation instructions 2022-11-12 18:41:16 -08:00
wobsoriano
9cd21eb300 update readme docs url 2022-11-12 18:40:15 -08:00
wobsoriano
b4e83dbb0b add back preset 2022-11-12 18:38:25 -08:00
wobsoriano
0fa63c86ba test node preset 2022-11-12 18:31:35 -08:00
wobsoriano
7371dc4c10 update docs 2022-11-12 18:28:26 -08:00
wobsoriano
77ab5f0dc6 reinstall deps 2022-11-12 18:20:07 -08:00
wobsoriano
ba15d15d67 remove patched @vueuse/head 2022-11-12 18:17:10 -08:00
wobsoriano
7999039088 update github config 2022-11-12 18:13:49 -08:00
wobsoriano
dc15500074 dont prerender index 2022-11-12 18:13:00 -08:00
wobsoriano
99a83562aa add tmp docs link 2022-11-12 18:09:34 -08:00
wobsoriano
e04344d508 docs: remove package manager 2022-11-12 18:08:22 -08:00
21 changed files with 214 additions and 418 deletions

1
client.d.ts vendored
View File

@@ -1 +0,0 @@
export * from './dist/client/index'

View File

@@ -1,5 +1,26 @@
export default defineAppConfig({
docus: {
title: 'tRPC Nuxt'
title: 'tRPC Nuxt',
image: 'https://og-image.vercel.app/tRPC-Nuxt',
alt: 'tRPC-Nuxt cover',
url: 'https://trpc-nuxt.vercel.app',
debug: false,
aside: {
level: 1
},
footer: {
credits: {
icon: 'IconDocus',
text: 'Powered by Docus',
href: 'https://docus.com'
},
icons: [
{
label: 'NuxtJS',
href: 'https://nuxtjs.org',
component: 'IconNuxt'
}
]
}
}
})

View File

@@ -5,20 +5,18 @@ description: tRPC-Nuxt provides first class integration with tRPC.
# Installation
## 1. Add to existing Nuxt project
::code-group
```bash [pnpm]
pnpm add @trpc/server@next @trpc/client@next trpc-nuxt@beta zod
pnpm add @trpc/server@next @trpc/client@next trpc-nuxt zod
```
```bash [npm]
npm install @trpc/server@next @trpc/client@next trpc-nuxt@beta zod
npm install @trpc/server@next @trpc/client@next trpc-nuxt zod
```
```bash [yarn]
yarn add @trpc/server@next @trpc/client@next trpc-nuxt@beta zod
yarn add @trpc/server@next @trpc/client@next trpc-nuxt zod
```
::
@@ -35,16 +33,6 @@ For making typesafe API calls from your client.
Most examples use [Zod](https://github.com/colinhacks/zod) for input validation and tRPC.io highly recommends it, though it isn't required.
## 2. Install module
This will transpile `trpc-nuxt` and exclude `trpc-nuxt/client` from optimized dependencies by Vite.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['trpc-nuxt/module']
})
```
::
## Next Steps

View File

@@ -88,15 +88,14 @@ If you need to split your router into several subrouters, you can implement them
## 2. Create tRPC client plugin
Create a set of strongly-typed composables using your API's type signature.
Create a strongly-typed plugin using your API's type signature.
```ts [plugins/client.ts]
import { httpBatchLink } from '@trpc/client'
import { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'
import { httpBatchLink, createTRPCProxyClient } from '@trpc/client'
import type { AppRouter } from '@/server/trpc/routers'
export default defineNuxtPlugin(() => {
const client = createTRPCNuxtProxyClient<AppRouter>({
const client = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
/**
@@ -122,19 +121,10 @@ export default defineNuxtPlugin(() => {
<script setup lang="ts">
const { $client } = useNuxtApp()
// query and mutate uses useAsyncData under the hood
const { data, pending, error } = await $client.hello.query({ text: 'client' })
const data = await $client.hello.query({ text: 'client' })
</script>
<template>
<div v-if="pending">
Loading...
</div>
<div v-else-if="error?.data?.code">
Error: {{ error.data.code }}
</div>
<div v-else>
<p>{{ hello.data?.greeting }}</p>
</div>
<p>{{data?.greeting }}</p>
</template>
```

View File

@@ -1,6 +1,6 @@
---
title: "tRPC Nuxt"
description: "A supa simple wrapper arousnd supabase-js to enable usage and integration within Nuxt."
description: "End-to-end typesafe APIs in Nuxt applications."
navigation: false
layout: page
---
@@ -13,7 +13,7 @@ cta:
secondary:
- Star on GitHub ->
- https://github.com/wobsoriano/trpc-nuxt
snippet: npm install trpc-nuxt@beta
snippet: npm install trpc-nuxt
---
#title

View File

@@ -6,9 +6,9 @@ export default defineNuxtConfig({
modules: ['@nuxtlabs/github-module'],
extends: process.env.DOCUS_THEME_PATH || '@nuxt-themes/docus',
github: {
owner: 'nuxt',
repo: 'content',
branch: 'main'
owner: 'wobsoriano',
repo: 'trpc-nuxt',
branch: 'next'
},
colorMode: {
preference: 'dark'
@@ -17,10 +17,6 @@ export default defineNuxtConfig({
transpile: [/content-edge/, /github-module/]
},
nitro: {
prerender: {
crawlLinks: true,
routes: ['/']
},
preset: 'vercel'
}
})

View File

@@ -8,12 +8,12 @@
"preview": "nuxi preview"
},
"dependencies": {
"@vueuse/head": "^1.0.3",
"nuxt": "^3.0.0-rc.13",
"@nuxtjs/tailwindcss": "^6.1.3"
},
"devDependencies": {
"@nuxt-themes/docus": "npm:@nuxt-themes/docus-edge@latest",
"@nuxtlabs/github-module": "npm:@nuxtlabs/github-module-edge@latest"
},
"packageManager": "yarn@1.22.19"
}
}

View File

@@ -1,14 +1,6 @@
import { defineTheme } from 'pinceau'
export default defineTheme({
title: 'tRPC-Nuxt',
cover: {
src: 'https://og-image.vercel.app/tRPC-Nuxt',
alt: 'tRPC-Nuxt conver'
},
aside: {
level: 1
},
colors: {
primary: {
50: '#BFEDFC',

View File

@@ -1,17 +0,0 @@
import { defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
meta: {
name: 'trpc-nuxt',
configKey: 'trpc',
compatibility: {
nuxt: '^3.0.0-rc.13'
}
},
setup (_moduleOptions, nuxt) {
nuxt.options.build.transpile.push('trpc-nuxt')
nuxt.options.vite.optimizeDeps = nuxt.options.vite.optimizeDeps || {}
nuxt.options.vite.optimizeDeps.exclude = nuxt.options.vite.optimizeDeps.exclude || []
nuxt.options.vite.optimizeDeps.exclude.push('trpc-nuxt/client')
}
})

View File

@@ -1,30 +1,21 @@
{
"name": "trpc-nuxt",
"description": "End-to-end typesafe APIs in Nuxt applications.",
"type": "module",
"version": "0.4.0",
"version": "0.4.1",
"license": "MIT",
"sideEffects": false,
"exports": {
"./package.json": "./package.json",
".": {
"require": "./dist/index.cjs",
"import": "./dist/index.mjs"
},
"./client": {
"require": "./dist/client/index.cjs",
"import": "./dist/client/index.mjs"
},
"./module": {
"import": "./module.mjs"
}
},
"main": "./dist/index.mjs",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"dist",
"client.d.ts",
"module.mjs"
"dist"
],
"scripts": {
"dev": "concurrently \"pnpm build --watch\" \"pnpm --filter playground dev\"",
@@ -57,11 +48,6 @@
"tsup": "6.4.0",
"typescript": "^4.7.4"
},
"pnpm": {
"patchedDependencies": {
"nuxt@3.0.0-rc.13": "patches/nuxt@3.0.0-rc.13.patch"
}
},
"eslintConfig": {
"extends": [
"@nuxtjs/eslint-config-typescript"
@@ -77,6 +63,8 @@
"eslintIgnore": [
"*.json",
"node_modules",
"*.md"
"*.md",
"dist",
".output"
]
}

View File

@@ -1,22 +0,0 @@
diff --git a/dist/head/runtime/lib/vueuse-head.plugin.mjs b/dist/head/runtime/lib/vueuse-head.plugin.mjs
index a3278e56986d8e8efb099c502c82d9661a36d846..148a8879ba433072cecd15995cfd5b1b69941124 100644
--- a/dist/head/runtime/lib/vueuse-head.plugin.mjs
+++ b/dist/head/runtime/lib/vueuse-head.plugin.mjs
@@ -4,7 +4,7 @@ import { defineNuxtPlugin, useRouter } from "#app";
import { appHead } from "#build/nuxt.config.mjs";
export default defineNuxtPlugin((nuxtApp) => {
const head = createHead();
- head.addEntry(appHead, { resolved: true });
+ head.addHeadObjs(appHead, { resolved: true });
nuxtApp.vueApp.use(head);
if (process.client) {
let pauseDOMUpdates = true;
@@ -25,7 +25,7 @@ export default defineNuxtPlugin((nuxtApp) => {
}
nuxtApp._useHead = (_meta, options) => {
if (process.server) {
- head.addEntry(_meta, options);
+ head.addHeadObjs(_meta, options);
return;
}
const cleanUp = head.addReactiveEntry(_meta, options);

View File

@@ -1,4 +1,3 @@
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
modules: ['trpc-nuxt/module']
})

View File

@@ -17,17 +17,13 @@ const addTodo = async () => {
title,
completed: false
})
console.log(x.data.value)
console.log(x)
} catch (e) {
console.log(e)
}
}
const { data: todos, pending, error, refresh } = await $client.todo.getTodos.query(undefined, {
trpc: {
abortOnUnmount: true
}
})
const { data: todos, pending, error, refresh } = await useAsyncData(() => $client.todo.getTodos.query())
</script>
<template>

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
const route = useRoute()
const { $client } = useNuxtApp()
const { data: todo, pending, error } = await $client.todo.getTodo.query(Number(route.params.id))
const { data: todo, pending, error } = await useAsyncData(() => $client.todo.getTodo.query(Number(route.params.id)))
</script>
<template>

View File

@@ -1,10 +1,9 @@
import { httpBatchLink, loggerLink } from '@trpc/client'
import { createTRPCNuxtProxyClient } from 'trpc-nuxt/client'
import { createTRPCProxyClient, httpBatchLink, loggerLink } from '@trpc/client'
import superjson from 'superjson'
import type { AppRouter } from '~~/server/trpc/routers'
export default defineNuxtPlugin(() => {
const client = createTRPCNuxtProxyClient<AppRouter>({
const client = createTRPCProxyClient<AppRouter>({
transformer: superjson,
links: [
// adds pretty logs to your console in development and logs errors in production

53
pnpm-lock.yaml generated
View File

@@ -1,10 +1,5 @@
lockfileVersion: 5.4
patchedDependencies:
nuxt@3.0.0-rc.13:
hash: lfucpimd3sd5ppglk4zvewtojq
path: patches/nuxt@3.0.0-rc.13.patch
importers:
.:
@@ -26,7 +21,7 @@ importers:
dependencies:
h3: 0.8.6
nanoid: 4.0.0
nuxt: 3.0.0-rc.13_lfucpimd3sd5ppglk4zvewtojq_rmayb2veg2btbq6mbmnyivgasy
nuxt: 3.0.0-rc.13_rmayb2veg2btbq6mbmnyivgasy
ohash: 0.1.5
ufo: 0.8.6
devDependencies:
@@ -45,9 +40,11 @@ importers:
'@nuxt-themes/docus': npm:@nuxt-themes/docus-edge@latest
'@nuxtjs/tailwindcss': ^6.1.3
'@nuxtlabs/github-module': npm:@nuxtlabs/github-module-edge@latest
'@vueuse/head': ^1.0.3
nuxt: ^3.0.0-rc.13
dependencies:
'@nuxtjs/tailwindcss': 6.1.3
'@vueuse/head': 1.0.3
nuxt: 3.0.0-rc.13
devDependencies:
'@nuxt-themes/docus': /@nuxt-themes/docus-edge/0.1.0-2a7c428_nuxt@3.0.0-rc.13
@@ -1823,6 +1820,19 @@ packages:
dependencies:
'@unhead/schema': 0.5.1
/@unhead/vue/0.5.1:
resolution: {integrity: sha512-s4y4uj3NMqaUs0K+WQXbWGj/2+Glk/DEJ9yeJOcJIiro/+IhUMByD71jyCM43Xn8YBPy14VY/ZYb9ZFU2WCZgw==}
peerDependencies:
vue: '>=2.7 || >=3'
dependencies:
'@unhead/dom': 0.5.1
'@unhead/schema': 0.5.1
'@vueuse/shared': 9.5.0
unhead: 0.5.1
transitivePeerDependencies:
- '@vue/composition-api'
dev: false
/@unhead/vue/0.5.1_vue@3.2.45:
resolution: {integrity: sha512-s4y4uj3NMqaUs0K+WQXbWGj/2+Glk/DEJ9yeJOcJIiro/+IhUMByD71jyCM43Xn8YBPy14VY/ZYb9ZFU2WCZgw==}
peerDependencies:
@@ -1836,8 +1846,8 @@ packages:
transitivePeerDependencies:
- '@vue/composition-api'
/@unocss/reset/0.46.4:
resolution: {integrity: sha512-Bd5LlvJj2A0wdJIAjzXF2+SL5gVJlAItk0ZO88OR2q2UZnqAYDrjWGfZGyNQKttKPWNuTH87IC6/8FFjoIAtxA==}
/@unocss/reset/0.46.5:
resolution: {integrity: sha512-DU1sisNixEaUsnfDdbU+POaedJLKUtalHnOOce2Txxrcakf7M2/I5/9cRIXt5diVbPjIyoDPcx+7Gn8K0cTGqg==}
dev: true
/@vercel/nft/0.22.1:
@@ -2018,8 +2028,20 @@ packages:
- vue
dev: true
/@vueuse/head/1.0.0_vue@3.2.45:
resolution: {integrity: sha512-wighjD6iLxEitpg6EDeS5dGDB9tcOSMhpblrAOKR6qBP93U3cjG72n0LhlBUD9miu41lNxXFVGHgSc6BVJ9BMg==}
/@vueuse/head/1.0.3:
resolution: {integrity: sha512-RV8jeydEKzIwGZUpRJoYAyf7L6HpNA8ZfBgKSq/fxQkg8lpSe8PxRPhvd9PAFhjSeDEeZ//eIA04wPaQyeZ77Q==}
peerDependencies:
vue: '>=2.7 || >=3'
dependencies:
'@unhead/schema': 0.5.1
'@unhead/ssr': 0.5.1
'@unhead/vue': 0.5.1
transitivePeerDependencies:
- '@vue/composition-api'
dev: false
/@vueuse/head/1.0.3_vue@3.2.45:
resolution: {integrity: sha512-RV8jeydEKzIwGZUpRJoYAyf7L6HpNA8ZfBgKSq/fxQkg8lpSe8PxRPhvd9PAFhjSeDEeZ//eIA04wPaQyeZ77Q==}
peerDependencies:
vue: '>=2.7 || >=3'
dependencies:
@@ -2059,7 +2081,6 @@ packages:
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: true
/@vueuse/shared/9.5.0_vue@3.2.45:
resolution: {integrity: sha512-HnnCWU1Vg9CVWRCcI8ohDKDRB2Sc4bTgT1XAIaoLSfVHHn+TKbrox6pd3klCSw4UDxkhDfOk8cAdcK+Z5KleCA==}
@@ -6227,7 +6248,7 @@ packages:
'@nuxt/vite-builder': 3.0.0-rc.13_vue@3.2.45
'@vue/reactivity': 3.2.45
'@vue/shared': 3.2.45
'@vueuse/head': 1.0.0_vue@3.2.45
'@vueuse/head': 1.0.3_vue@3.2.45
chokidar: 3.5.3
cookie-es: 0.5.0
defu: 6.1.0
@@ -6280,7 +6301,7 @@ packages:
- vls
- vti
/nuxt/3.0.0-rc.13_lfucpimd3sd5ppglk4zvewtojq_rmayb2veg2btbq6mbmnyivgasy:
/nuxt/3.0.0-rc.13_rmayb2veg2btbq6mbmnyivgasy:
resolution: {integrity: sha512-iqAwrYzFuKK5HuJRa1XQ/K2WUYdOI7JjxYLWAJyAejzvUO/+Pj87fhqozzymlJxrdKM53UqBfur+KN+DE0nRzw==}
engines: {node: ^14.16.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
hasBin: true
@@ -6293,7 +6314,7 @@ packages:
'@nuxt/vite-builder': 3.0.0-rc.13_rgiu7gbsivji2gk3ajcqz5t5x4
'@vue/reactivity': 3.2.45
'@vue/shared': 3.2.45
'@vueuse/head': 1.0.0_vue@3.2.45
'@vueuse/head': 1.0.3_vue@3.2.45
chokidar: 3.5.3
cookie-es: 0.5.0
defu: 6.1.0
@@ -6346,7 +6367,6 @@ packages:
- vls
- vti
dev: false
patched: true
/object-assign/4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
@@ -6620,7 +6640,7 @@ packages:
/pinceau/0.6.17:
resolution: {integrity: sha512-bvG24PoHpMiOV38OAF4bDhg3BLy7+sEP05wmneCNf+LgU4uwaRUku0S68yKHUIFT3ck8NRX5FejJgwKJfMMNnA==}
dependencies:
'@unocss/reset': 0.46.4
'@unocss/reset': 0.46.5
'@volar/vue-language-core': 1.0.9
chroma-js: 2.4.2
consola: 2.15.3
@@ -8838,7 +8858,6 @@ packages:
peerDependenciesMeta:
'@vue/composition-api':
optional: true
dev: true
/vue-demi/0.13.11_vue@3.2.45:
resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}

View File

@@ -1,66 +0,0 @@
import type { CreateTRPCClientOptions, inferRouterProxyClient } from '@trpc/client'
import { createTRPCProxyClient } from '@trpc/client'
import type {
AnyRouter
} from '@trpc/server'
import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared'
import { hash } from 'ohash'
import { nanoid } from 'nanoid'
import type { DecoratedProcedureRecord } from './types'
// @ts-expect-error: Nuxt auto-imports
import { getCurrentInstance, onScopeDispose, useAsyncData } from '#imports'
/**
* Calculates the key used for `useAsyncData` call
*/
export function getQueryKey (
path: string,
input: unknown
): string {
return input === undefined ? path : `${path}-${hash(input || '')}`
}
function createNuxtProxyDecoration<TRouter extends AnyRouter> (name: string, client: inferRouterProxyClient<TRouter>) {
return createRecursiveProxy((opts) => {
const args = opts.args
const pathCopy = [name, ...opts.path]
// The last arg is for instance `.mutate` or `.query()`
const lastArg = pathCopy.pop()!
const path = pathCopy.join('.')
const [input, otherOptions] = args
const queryKey = lastArg === 'mutate' ? nanoid() : getQueryKey(path, input)
const { trpc, ...asyncDataOptions } = otherOptions || {} as any
let controller: AbortController
if (trpc?.abortOnUnmount) {
if (getCurrentInstance()) {
onScopeDispose(() => {
controller?.abort?.()
})
}
controller = typeof AbortController !== 'undefined' ? new AbortController() : {} as AbortController
}
return useAsyncData(queryKey, () => (client as any)[path][lastArg](input, {
signal: controller?.signal,
...trpc
}), asyncDataOptions)
})
}
export function createTRPCNuxtProxyClient<TRouter extends AnyRouter> (opts: CreateTRPCClientOptions<TRouter>) {
const client = createTRPCProxyClient(opts)
const decoratedClient = createFlatProxy((key) => {
return createNuxtProxyDecoration(key, client)
}) as DecoratedProcedureRecord<TRouter['_def']['record'], TRouter>
return decoratedClient
}

View File

@@ -1,85 +0,0 @@
import type { TRPCClientErrorLike, TRPCRequestOptions } from '@trpc/client'
import type { TRPCSubscriptionObserver } from '@trpc/client/dist/internals/TRPCClient'
import type {
AnyMutationProcedure,
AnyProcedure,
AnyQueryProcedure,
AnyRouter,
AnySubscriptionProcedure,
ProcedureArgs,
ProcedureRouterRecord,
inferProcedureInput,
inferProcedureOutput
} from '@trpc/server'
import type { Unsubscribable, inferObservableValue } from '@trpc/server/observable'
import type {
AsyncData,
AsyncDataOptions,
KeyOfRes,
PickFrom,
_Transform
} from 'nuxt/dist/app/composables/asyncData'
// Modified @trpc/client and @trpc/react-query types
// https://github.com/trpc/trpc/blob/next/packages/client/src/createTRPCClientProxy.ts
// https://github.com/trpc/trpc/blob/next/packages/react-query/src/createTRPCReact.tsx
interface TRPCOptions extends TRPCRequestOptions {
abortOnUnmount?: boolean
}
type SubscriptionResolver<
TProcedure extends AnyProcedure,
TRouter extends AnyRouter,
> = (
...args: [
input: ProcedureArgs<TProcedure['_def']>[0],
opts: ProcedureArgs<TProcedure['_def']>[1] &
Partial<
TRPCSubscriptionObserver<
inferObservableValue<inferProcedureOutput<TProcedure>>,
TRPCClientErrorLike<TRouter>
>
>,
]
) => Unsubscribable
type DecorateProcedure<
TProcedure extends AnyProcedure,
TRouter extends AnyRouter,
> = TProcedure extends AnyQueryProcedure
? {
query: <
TData = inferProcedureOutput<TProcedure>,
Transform extends _Transform<TData> = _Transform<TData, TData>,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
>(
input: inferProcedureInput<TProcedure>,
opts?: AsyncDataOptions<TData, Transform, PickKeys> & { trpc: TRPCOptions },
) => AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TRPCClientErrorLike<TProcedure>>
} : TProcedure extends AnyMutationProcedure ? {
mutate: <
TData = inferProcedureOutput<TProcedure>,
Transform extends _Transform<TData> = _Transform<TData, TData>,
PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
>(
input: inferProcedureInput<TProcedure>,
opts?: AsyncDataOptions<TData, Transform, PickKeys> & { trpc: TRPCOptions },
) => AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, TRPCClientErrorLike<TProcedure>>
} : TProcedure extends AnySubscriptionProcedure ? {
subscribe: SubscriptionResolver<TProcedure, TRouter>
} : never
/**
* @internal
*/
export type DecoratedProcedureRecord<
TProcedures extends ProcedureRouterRecord,
TRouter extends AnyRouter,
> = {
[TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
? DecoratedProcedureRecord<TProcedures[TKey]['_def']['record'], TRouter>
: TProcedures[TKey] extends AnyProcedure
? DecorateProcedure<TProcedures[TKey], TRouter>
: never;
}

View File

@@ -1 +1,126 @@
export * from './server'
import type { ResponseMeta } from '@trpc/server/http'
import { resolveHTTPResponse } from '@trpc/server/http'
import type {
AnyRouter,
ProcedureType,
inferRouterContext,
inferRouterError
} from '@trpc/server'
import {
TRPCError
} from '@trpc/server'
import { createURL } from 'ufo'
import type { H3Event } from 'h3'
import { createError, defineEventHandler, isMethod, readBody } from 'h3'
import type { TRPCResponse } from '@trpc/server/rpc'
type MaybePromise<T> = T | Promise<T>
export type CreateContextFn<TRouter extends AnyRouter> = (event: H3Event) => 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: H3Event['req']
input: unknown
ctx: undefined | inferRouterContext<TRouter>
}
export type OnErrorFn<TRouter extends AnyRouter> = (opts: OnErrorPayload<TRouter>) => void
export interface ResolveHTTPRequestOptions<TRouter extends AnyRouter> {
router: TRouter
createContext?: CreateContextFn<TRouter>
responseMeta?: ResponseMetaFn<TRouter>
onError?: OnErrorFn<TRouter>
batching?: {
enabled: boolean
}
}
function getPath (event: H3Event): string | null {
if (typeof event.context.params.trpc === 'string') { return event.context.params.trpc }
if (Array.isArray(event.context.params.trpc)) { return event.context.params.trpc.join('/') }
return null
}
export function createNuxtApiHandler<TRouter extends AnyRouter> ({
router,
createContext,
responseMeta,
onError,
batching
}: ResolveHTTPRequestOptions<TRouter>) {
return defineEventHandler(async (event) => {
const {
req,
res
} = event
const $url = createURL(req.url!)
const path = getPath(event)
if (path === null) {
const error = router.getErrorShape({
error: new TRPCError({
message:
'Param "trpc" not found - is the file named `[trpc]`.ts or `[...trpc].ts`?',
code: 'INTERNAL_SERVER_ERROR'
}),
type: 'unknown',
ctx: undefined,
path: undefined,
input: undefined
})
throw createError({
statusCode: 500,
statusMessage: JSON.stringify(error)
})
}
const httpResponse = await resolveHTTPResponse({
batching,
router,
req: {
method: req.method!,
headers: req.headers,
body: isMethod(event, 'GET') ? null : await readBody(event),
query: $url.searchParams
},
path,
createContext: async () => await createContext?.(event),
responseMeta,
onError: (o) => {
onError?.({
...o,
req
})
}
})
const { status, headers, body } = httpResponse
res.statusCode = status
headers && Object.keys(headers).forEach((key) => {
res.setHeader(key, headers[key]!)
})
return body
})
}

View File

@@ -1,126 +0,0 @@
import type { ResponseMeta } from '@trpc/server/http'
import { resolveHTTPResponse } from '@trpc/server/http'
import type {
AnyRouter,
ProcedureType,
inferRouterContext,
inferRouterError
} from '@trpc/server'
import {
TRPCError
} from '@trpc/server'
import { createURL } from 'ufo'
import type { H3Event } from 'h3'
import { createError, defineEventHandler, isMethod, readBody } from 'h3'
import type { TRPCResponse } from '@trpc/server/rpc'
type MaybePromise<T> = T | Promise<T>
export type CreateContextFn<TRouter extends AnyRouter> = (event: H3Event) => 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: H3Event['req']
input: unknown
ctx: undefined | inferRouterContext<TRouter>
}
export type OnErrorFn<TRouter extends AnyRouter> = (opts: OnErrorPayload<TRouter>) => void
export interface ResolveHTTPRequestOptions<TRouter extends AnyRouter> {
router: TRouter
createContext?: CreateContextFn<TRouter>
responseMeta?: ResponseMetaFn<TRouter>
onError?: OnErrorFn<TRouter>
batching?: {
enabled: boolean
}
}
function getPath (event: H3Event): string | null {
if (typeof event.context.params.trpc === 'string') { return event.context.params.trpc }
if (Array.isArray(event.context.params.trpc)) { return event.context.params.trpc.join('/') }
return null
}
export function createNuxtApiHandler<TRouter extends AnyRouter> ({
router,
createContext,
responseMeta,
onError,
batching
}: ResolveHTTPRequestOptions<TRouter>) {
return defineEventHandler(async (event) => {
const {
req,
res
} = event
const $url = createURL(req.url!)
const path = getPath(event)
if (path === null) {
const error = router.getErrorShape({
error: new TRPCError({
message:
'Param "trpc" not found - is the file named `[trpc]`.ts or `[...trpc].ts`?',
code: 'INTERNAL_SERVER_ERROR'
}),
type: 'unknown',
ctx: undefined,
path: undefined,
input: undefined
})
throw createError({
statusCode: 500,
statusMessage: JSON.stringify(error)
})
}
const httpResponse = await resolveHTTPResponse({
batching,
router,
req: {
method: req.method!,
headers: req.headers,
body: isMethod(event, 'GET') ? null : await readBody(event),
query: $url.searchParams
},
path,
createContext: async () => await createContext?.(event),
responseMeta,
onError: (o) => {
onError?.({
...o,
req
})
}
})
const { status, headers, body } = httpResponse
res.statusCode = status
headers && Object.keys(headers).forEach((key) => {
res.setHeader(key, headers[key]!)
})
return body
})
}

View File

@@ -1,15 +1,15 @@
import { defineConfig } from 'tsup'
export default defineConfig({
entry: ['src/index.ts', 'src/client/index.ts'],
entry: ['src/index.ts'],
format: ['cjs', 'esm'],
splitting: false,
clean: true,
external: ['#app', '#imports'],
dts: true,
outExtension({ format }) {
outExtension ({ format }) {
return {
js: format === 'esm' ? '.mjs' : `.${format}`,
js: format === 'esm' ? '.mjs' : `.${format}`
}
},
}
})