mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 20:19:33 +01:00
Compare commits
17 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fd38c4f983 | ||
|
|
48d4c6342f | ||
|
|
297c3d52f4 | ||
|
|
0f9653d1a4 | ||
|
|
85998101c7 | ||
|
|
d6cb770154 | ||
|
|
c222008524 | ||
|
|
9cd21eb300 | ||
|
|
b4e83dbb0b | ||
|
|
0fa63c86ba | ||
|
|
7371dc4c10 | ||
|
|
77ab5f0dc6 | ||
|
|
ba15d15d67 | ||
|
|
7999039088 | ||
|
|
dc15500074 | ||
|
|
99a83562aa | ||
|
|
e04344d508 |
1
client.d.ts
vendored
1
client.d.ts
vendored
@@ -1 +0,0 @@
|
||||
export * from './dist/client/index'
|
||||
@@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
```
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
})
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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',
|
||||
|
||||
17
module.mjs
17
module.mjs
@@ -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')
|
||||
}
|
||||
})
|
||||
24
package.json
24
package.json
@@ -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"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
@@ -1,4 +1,3 @@
|
||||
// https://v3.nuxtjs.org/api/configuration/nuxt.config
|
||||
export default defineNuxtConfig({
|
||||
modules: ['trpc-nuxt/module']
|
||||
})
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
53
pnpm-lock.yaml
generated
@@ -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==}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
127
src/index.ts
127
src/index.ts
@@ -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
|
||||
})
|
||||
}
|
||||
|
||||
126
src/server.ts
126
src/server.ts
@@ -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
|
||||
})
|
||||
}
|
||||
@@ -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}`
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user