From 1e67434a8f0d81f8a66879370c25a1946db93cc4 Mon Sep 17 00:00:00 2001 From: Mahdi Boomeri Date: Wed, 31 Aug 2022 19:13:29 +0430 Subject: [PATCH 1/3] fix: useClientHeaders returning an empty object --- src/runtime/client.ts | 3 +-- src/runtime/plugin.ts | 9 +++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/runtime/client.ts b/src/runtime/client.ts index 38348a9..c7b179f 100644 --- a/src/runtime/client.ts +++ b/src/runtime/client.ts @@ -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 { } export function useClientHeaders(initialValue: MaybeRef> = {}): Ref> { - return useStorage('trpc-nuxt-header', initialValue) + return useState('trpc-nuxt-header', () => initialValue) } diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts index 423510c..04d43c5 100644 --- a/src/runtime/plugin.ts +++ b/src/runtime/plugin.ts @@ -13,13 +13,10 @@ export default defineNuxtPlugin((nuxtApp) => { const client = trpc.createTRPCClient({ url: `${config.baseURL}${config.endpoint}`, headers: () => { - if (nuxtApp.ssrContext) { - return { - ...unref(otherHeaders), - ...headers, - } + return { + ...unref(otherHeaders), + ...headers, } - return {} }, }) From b9cdb228b7ee3b60c10f347eadcad2b759502efe Mon Sep 17 00:00:00 2001 From: Mahdi Boomeri Date: Wed, 31 Aug 2022 19:17:44 +0430 Subject: [PATCH 2/3] refactor: remove vueuse dependency --- package.json | 2 -- pnpm-lock.yaml | 64 -------------------------------------------------- src/module.ts | 3 --- 3 files changed, 69 deletions(-) diff --git a/package.json b/package.json index 44bfbf1..9353c16 100644 --- a/package.json +++ b/package.json @@ -35,8 +35,6 @@ "@nuxt/kit": "3.0.0-rc.8", "@trpc/client": "^9.27.1", "@trpc/server": "^9.27.1", - "@vueuse/core": "^9.1.0", - "@vueuse/nuxt": "^9.1.0", "dedent": "^0.7.0", "defu": "^6.0.0", "h3": "^0.7.10", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5ddd447..c56f89d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,8 +11,6 @@ importers: '@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 @@ -29,8 +27,6 @@ importers: '@nuxt/kit': 3.0.0-rc.8 '@trpc/client': 9.27.1_@trpc+server@9.27.1 '@trpc/server': 9.27.1 - '@vueuse/core': 9.1.0 - '@vueuse/nuxt': 9.1.0 dedent: 0.7.0 defu: 6.0.0 h3: 0.7.10 @@ -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} diff --git a/src/module.ts b/src/module.ts index 1859c23..104a37c 100644 --- a/src/module.ts +++ b/src/module.ts @@ -26,9 +26,6 @@ export default defineNuxtModule({ 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, From 186faff140536b6be7fae88e90ad9161ea0278b0 Mon Sep 17 00:00:00 2001 From: Mahdi Boomeri Date: Wed, 31 Aug 2022 19:19:27 +0430 Subject: [PATCH 3/3] docs: replaced useStorage with useState in useClientHeaders --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 90b7e28..a6503a6 100644 --- a/README.md +++ b/README.md @@ -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()