mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 20:19:33 +01:00
Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
dd05285d65 | ||
|
|
d058ff241a | ||
|
|
fb4894e264 | ||
|
|
186faff140 | ||
|
|
b9cdb228b7 | ||
|
|
1e67434a8f | ||
|
|
019bb20e50 | ||
|
|
695ce4c56e | ||
|
|
38649b7023 |
@@ -103,7 +103,7 @@ const {
|
||||
|
||||
## useClientHeaders
|
||||
|
||||
A composable that lets you add additional properties to pass to the tRPC Client. It uses `useStorage` from [@vueuse/core](https://vueuse.org/core/usestorage).
|
||||
A composable that lets you add additional properties to pass to the tRPC Client. It uses `useState` from [nuxt 3](https://v3.nuxtjs.org/api/composables/use-state).
|
||||
|
||||
```ts
|
||||
const headers = useClientHeaders()
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "trpc-nuxt",
|
||||
"type": "module",
|
||||
"version": "0.2.5",
|
||||
"version": "0.2.7",
|
||||
"packageManager": "pnpm@7.5.0",
|
||||
"license": "MIT",
|
||||
"main": "./dist/module.cjs",
|
||||
@@ -33,10 +33,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/kit": "3.0.0-rc.8",
|
||||
"@trpc/client": "^9.27.0",
|
||||
"@trpc/server": "^9.27.0",
|
||||
"@vueuse/core": "^9.1.0",
|
||||
"@vueuse/nuxt": "^9.1.0",
|
||||
"@trpc/client": "^9.27.1",
|
||||
"@trpc/server": "^9.27.1",
|
||||
"dedent": "^0.7.0",
|
||||
"defu": "^6.0.0",
|
||||
"h3": "^0.7.10",
|
||||
|
||||
@@ -4,7 +4,7 @@ const headers = useClientHeaders()
|
||||
const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])
|
||||
|
||||
const addHeader = () => {
|
||||
// headers.value.cookie = 'counter=69'
|
||||
headers.value.authorization = 'Bearer abcdefghijklmnop'
|
||||
console.log(headers.value)
|
||||
}
|
||||
|
||||
|
||||
84
pnpm-lock.yaml
generated
84
pnpm-lock.yaml
generated
@@ -8,11 +8,9 @@ importers:
|
||||
'@antfu/ni': ^0.16.2
|
||||
'@nuxt/kit': 3.0.0-rc.8
|
||||
'@nuxt/module-builder': ^0.1.7
|
||||
'@trpc/client': ^9.27.0
|
||||
'@trpc/server': ^9.27.0
|
||||
'@trpc/client': ^9.27.1
|
||||
'@trpc/server': ^9.27.1
|
||||
'@types/dedent': ^0.7.0
|
||||
'@vueuse/core': ^9.1.0
|
||||
'@vueuse/nuxt': ^9.1.0
|
||||
bumpp: ^7.2.0
|
||||
dedent: ^0.7.0
|
||||
defu: ^6.0.0
|
||||
@@ -27,10 +25,8 @@ importers:
|
||||
zod: ^3.16.0
|
||||
dependencies:
|
||||
'@nuxt/kit': 3.0.0-rc.8
|
||||
'@trpc/client': 9.27.0_@trpc+server@9.27.0
|
||||
'@trpc/server': 9.27.0
|
||||
'@vueuse/core': 9.1.0
|
||||
'@vueuse/nuxt': 9.1.0
|
||||
'@trpc/client': 9.27.1_@trpc+server@9.27.1
|
||||
'@trpc/server': 9.27.1
|
||||
dedent: 0.7.0
|
||||
defu: 6.0.0
|
||||
h3: 0.7.10
|
||||
@@ -965,17 +961,17 @@ packages:
|
||||
estree-walker: 2.0.2
|
||||
picomatch: 2.3.1
|
||||
|
||||
/@trpc/client/9.27.0_@trpc+server@9.27.0:
|
||||
resolution: {integrity: sha512-Yh+oDBiANArjDx69bSnXqIK36wjlRm8iGLQkMmrvTTFwVRt3hgfreCzjyj4PgNEd4SNX4iGrhLLPIDHeH+qlJA==}
|
||||
/@trpc/client/9.27.1_@trpc+server@9.27.1:
|
||||
resolution: {integrity: sha512-srh3s1ekhV5fssqxdE5DagcW+bnWUXp4LWkuHTunPDUL5BaIs6l0FXE4wKMv9AFAcCw7xJOFx8VSwFl/raXqKQ==}
|
||||
peerDependencies:
|
||||
'@trpc/server': 9.27.0
|
||||
'@trpc/server': 9.27.1
|
||||
dependencies:
|
||||
'@babel/runtime': 7.18.9
|
||||
'@trpc/server': 9.27.0
|
||||
'@trpc/server': 9.27.1
|
||||
dev: false
|
||||
|
||||
/@trpc/server/9.27.0:
|
||||
resolution: {integrity: sha512-5A/d5U9Y8L6+4q46a9gLackTyMRUFyNubo6JlIpSxtea/wW8teR6Azux4gg/uKIM3+6+lgg/HxQHWvwkG0VOSg==}
|
||||
/@trpc/server/9.27.1:
|
||||
resolution: {integrity: sha512-r/Fg3DuuYhIvXx5ZSmQ+VVyeV8kZ+N5aa6B7KkDg5wY+o7c1kDygCl+ZJ8XgwNg+yM2JPXPZxetWmyUw/YvWNQ==}
|
||||
dev: false
|
||||
|
||||
/@trysound/sax/0.2.0:
|
||||
@@ -1039,10 +1035,6 @@ packages:
|
||||
resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
|
||||
dev: true
|
||||
|
||||
/@types/web-bluetooth/0.0.15:
|
||||
resolution: {integrity: sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==}
|
||||
dev: false
|
||||
|
||||
/@typescript-eslint/eslint-plugin/5.30.6_rywvbqnelbznwddhxv2glfjuay:
|
||||
resolution: {integrity: sha512-J4zYMIhgrx4MgnZrSDD7sEnQp7FmhKNOaqaOpaoQ/SfdMfRB/0yvK74hTnvH+VQxndZynqs5/Hn4t+2/j9bADg==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
@@ -1321,18 +1313,6 @@ packages:
|
||||
resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
|
||||
dev: true
|
||||
|
||||
/@vueuse/core/9.1.0:
|
||||
resolution: {integrity: sha512-BIroqvXEqt826aE9r3K5cox1zobuPuAzdYJ36kouC2TVhlXvFKIILgFVWrpp9HZPwB3aLzasmG3K87q7TSyXZg==}
|
||||
dependencies:
|
||||
'@types/web-bluetooth': 0.0.15
|
||||
'@vueuse/metadata': 9.1.0
|
||||
'@vueuse/shared': 9.1.0
|
||||
vue-demi: 0.13.7
|
||||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
- vue
|
||||
dev: false
|
||||
|
||||
/@vueuse/head/0.7.9_vue@3.2.37:
|
||||
resolution: {integrity: sha512-5wnRiH2XIUSLLXJDLDDTcpvAg5QXgTIVZl46AU7to/T91KHsdBLHSE4WhRO7kP0jbkAhlxnx64E29cQtwBrMjg==}
|
||||
peerDependencies:
|
||||
@@ -1341,37 +1321,6 @@ packages:
|
||||
vue: 3.2.37
|
||||
dev: true
|
||||
|
||||
/@vueuse/metadata/9.1.0:
|
||||
resolution: {integrity: sha512-8OEhlog1iaAGTD3LICZ8oBGQdYeMwByvXetOtAOZCJOzyCRSwqwdggTsmVZZ1rkgYIEqgUBk942AsAPwM21s6A==}
|
||||
dev: false
|
||||
|
||||
/@vueuse/nuxt/9.1.0:
|
||||
resolution: {integrity: sha512-ejWjv8IPo2sSCQ81lY5TtzszWvnqRUYsBTrK0XOJGMDIeUHc6/gQbwezyb9OY3yJvIvQ3sGBbLo1iW04Rk7ZhA==}
|
||||
dependencies:
|
||||
'@nuxt/kit': 3.0.0-rc.8
|
||||
'@vueuse/core': 9.1.0
|
||||
'@vueuse/metadata': 9.1.0
|
||||
local-pkg: 0.4.2
|
||||
vue-demi: 0.13.7
|
||||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
- esbuild
|
||||
- rollup
|
||||
- supports-color
|
||||
- vite
|
||||
- vue
|
||||
- webpack
|
||||
dev: false
|
||||
|
||||
/@vueuse/shared/9.1.0:
|
||||
resolution: {integrity: sha512-pB/3njQu4tfJJ78ajELNda0yMG6lKfpToQW7Soe09CprF1k3QuyoNi1tBNvo75wBDJWD+LOnr+c4B5HZ39jY/Q==}
|
||||
dependencies:
|
||||
vue-demi: 0.13.7
|
||||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
- vue
|
||||
dev: false
|
||||
|
||||
/abbrev/1.1.1:
|
||||
resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
|
||||
dev: true
|
||||
@@ -6689,19 +6638,6 @@ packages:
|
||||
ufo: 0.8.5
|
||||
dev: true
|
||||
|
||||
/vue-demi/0.13.7:
|
||||
resolution: {integrity: sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==}
|
||||
engines: {node: '>=12'}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
peerDependencies:
|
||||
'@vue/composition-api': ^1.0.0-rc.1
|
||||
vue: ^3.0.0-0 || ^2.6.0
|
||||
peerDependenciesMeta:
|
||||
'@vue/composition-api':
|
||||
optional: true
|
||||
dev: false
|
||||
|
||||
/vue-eslint-parser/8.3.0_eslint@8.19.0:
|
||||
resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
|
||||
@@ -26,9 +26,6 @@ export default defineNuxtModule<ModuleOptions>({
|
||||
const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
|
||||
const trpcOptionsPath = join(nuxt.options.srcDir, 'server/trpc')
|
||||
|
||||
// Add vueuse
|
||||
nuxt.options.modules.push('@vueuse/nuxt')
|
||||
|
||||
// Final resolved configuration
|
||||
const finalConfig = nuxt.options.runtimeConfig.public.trpc = defu(nuxt.options.runtimeConfig.public.trpc, {
|
||||
baseURL: options.baseURL,
|
||||
|
||||
@@ -9,7 +9,6 @@ import type { ProcedureRecord, inferHandlerInput, inferProcedureInput, inferProc
|
||||
import type { TRPCClient, TRPCClientErrorLike } from '@trpc/client'
|
||||
import { objectHash } from 'ohash'
|
||||
import type { Ref } from 'vue'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import { useAsyncData, useNuxtApp, useState } from '#app'
|
||||
import type { router } from '~/server/trpc'
|
||||
|
||||
@@ -79,5 +78,5 @@ export function useClient(): TRPCClient<AppRouter> {
|
||||
}
|
||||
|
||||
export function useClientHeaders(initialValue: MaybeRef<Record<string, any>> = {}): Ref<Record<string, any>> {
|
||||
return useStorage('trpc-nuxt-header', initialValue)
|
||||
return useState('trpc-nuxt-header', () => initialValue)
|
||||
}
|
||||
|
||||
@@ -13,13 +13,10 @@ export default defineNuxtPlugin((nuxtApp) => {
|
||||
const client = trpc.createTRPCClient<AppRouter>({
|
||||
url: `${config.baseURL}${config.endpoint}`,
|
||||
headers: () => {
|
||||
if (nuxtApp.ssrContext) {
|
||||
return {
|
||||
...unref(otherHeaders),
|
||||
...headers,
|
||||
}
|
||||
return {
|
||||
...unref(otherHeaders),
|
||||
...headers,
|
||||
}
|
||||
return {}
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user