From 99dcfc701251844b84a9c3c38b64eb1cef3f84a9 Mon Sep 17 00:00:00 2001 From: n0099 Date: Fri, 23 May 2025 22:25:14 +0000 Subject: [PATCH 1/6] feat: allow passing `DehydrateOptions` as nuxt module option to `dehydrate()` --- packages/vue-query-nuxt/src/runtime/plugin.ts | 4 ++-- packages/vue-query-nuxt/src/runtime/utils.ts | 8 +++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/vue-query-nuxt/src/runtime/plugin.ts b/packages/vue-query-nuxt/src/runtime/plugin.ts index a6562c9a..2159cf52 100644 --- a/packages/vue-query-nuxt/src/runtime/plugin.ts +++ b/packages/vue-query-nuxt/src/runtime/plugin.ts @@ -5,7 +5,7 @@ import { pluginHook } from "#build/internal.vue-query-plugin-hook" import { defineNuxtPlugin, useRuntimeConfig, useState } from "#imports" export default defineNuxtPlugin((nuxt) => { - const { stateKey, queryClientOptions, vueQueryPluginOptions } = getVueQueryOptions(useRuntimeConfig()) + const { stateKey, queryClientOptions, vueQueryPluginOptions, dehydrateOptions } = getVueQueryOptions(useRuntimeConfig()) const vueQueryState = useState(stateKey) const queryClient = new QueryClient(queryClientOptions) @@ -16,7 +16,7 @@ export default defineNuxtPlugin((nuxt) => { if (import.meta.server) { nuxt.hooks.hook("app:rendered", () => { - vueQueryState.value = dehydrate(queryClient) + vueQueryState.value = dehydrate(queryClient, dehydrateOptions) }) } diff --git a/packages/vue-query-nuxt/src/runtime/utils.ts b/packages/vue-query-nuxt/src/runtime/utils.ts index 074ad144..1c5ba1d7 100644 --- a/packages/vue-query-nuxt/src/runtime/utils.ts +++ b/packages/vue-query-nuxt/src/runtime/utils.ts @@ -1,4 +1,4 @@ -import type { QueryClientConfig, VueQueryPluginOptions } from "@tanstack/vue-query" +import type { QueryClientConfig, VueQueryPluginOptions, DehydrateOptions } from "@tanstack/vue-query" import type { RuntimeConfig } from "nuxt/schema" export const NAME = "vue-query-nuxt" as const @@ -19,7 +19,8 @@ export interface ModuleOptions { stateKey: string autoImports: VueQueryComposables | false queryClientOptions: QueryClientConfig | undefined - vueQueryPluginOptions: VueQueryPluginOptions + vueQueryPluginOptions: VueQueryPluginOptions, + dehydrateOptions: DehydrateOptions } export const defaults: ModuleOptions = { @@ -28,7 +29,8 @@ export const defaults: ModuleOptions = { queryClientOptions: { defaultOptions: { queries: { staleTime: 5000 } } }, - vueQueryPluginOptions: {} + vueQueryPluginOptions: {}, + dehydrateOptions: {} } export function getVueQueryOptions(config: RuntimeConfig) { return config.public[configKey] as ModuleOptions From 6f7dfce99c0075665e4f2cf8c5aca5068d1abe40 Mon Sep 17 00:00:00 2001 From: n0099 Date: Sun, 25 May 2025 20:32:45 +0000 Subject: [PATCH 2/6] fix: workaround for cannot pass function to module config: https://github.com/nuxt/nuxt/issues/20933 --- packages/vue-query-nuxt/src/runtime/plugin.ts | 14 +++++++++++--- packages/vue-query-nuxt/src/runtime/utils.ts | 3 ++- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/vue-query-nuxt/src/runtime/plugin.ts b/packages/vue-query-nuxt/src/runtime/plugin.ts index 2159cf52..058f5af4 100644 --- a/packages/vue-query-nuxt/src/runtime/plugin.ts +++ b/packages/vue-query-nuxt/src/runtime/plugin.ts @@ -1,6 +1,6 @@ -import type { DehydratedState } from "@tanstack/vue-query" +import type { DehydratedState, DehydrateOptions } from "@tanstack/vue-query" import { QueryClient, VueQueryPlugin, dehydrate, hydrate } from "@tanstack/vue-query" -import { getVueQueryOptions } from "./utils" +import { getVueQueryOptions, dehydrateOptionKeys } from "./utils" import { pluginHook } from "#build/internal.vue-query-plugin-hook" import { defineNuxtPlugin, useRuntimeConfig, useState } from "#imports" @@ -16,7 +16,15 @@ export default defineNuxtPlugin((nuxt) => { if (import.meta.server) { nuxt.hooks.hook("app:rendered", () => { - vueQueryState.value = dehydrate(queryClient, dehydrateOptions) + vueQueryState.value = dehydrate(queryClient, dehydrateOptionKeys.reduce((newDehydrateOptions, key) => { + if (dehydrateOptions[key] !== undefined) { + // https://stackoverflow.com/questions/64408632/typescript-inconsistent-check-for-undefined-why-do-i-need-an-exclamation-poin + // https://stackoverflow.com/questions/60077761/typescript-null-check-doesnt-work-inside-array-map-function/60077855#60077855 + const narrowedValue = dehydrateOptions[key] + newDehydrateOptions[key] = () => narrowedValue + } + return newDehydrateOptions + }, {})) }) } diff --git a/packages/vue-query-nuxt/src/runtime/utils.ts b/packages/vue-query-nuxt/src/runtime/utils.ts index 1c5ba1d7..9ab9d388 100644 --- a/packages/vue-query-nuxt/src/runtime/utils.ts +++ b/packages/vue-query-nuxt/src/runtime/utils.ts @@ -15,12 +15,13 @@ const composables = [ ] as const type VueQueryComposables = typeof composables +export const dehydrateOptionKeys = ['shouldDehydrateMutation', 'shouldDehydrateQuery', 'shouldRedactErrors'] as Array; export interface ModuleOptions { stateKey: string autoImports: VueQueryComposables | false queryClientOptions: QueryClientConfig | undefined vueQueryPluginOptions: VueQueryPluginOptions, - dehydrateOptions: DehydrateOptions + dehydrateOptions: { [P in typeof dehydrateOptionKeys[number]]?: boolean } } export const defaults: ModuleOptions = { From b36330e74c8a7dbcd948b83b3ad5804650c6ac37 Mon Sep 17 00:00:00 2001 From: n0099 Date: Mon, 26 May 2025 00:29:10 +0000 Subject: [PATCH 3/6] Revert "fix: workaround for cannot pass function to module config: https://github.com/nuxt/nuxt/issues/20933" This reverts commit 6f7dfce99c0075665e4f2cf8c5aca5068d1abe40. --- packages/vue-query-nuxt/src/runtime/plugin.ts | 14 +++----------- packages/vue-query-nuxt/src/runtime/utils.ts | 3 +-- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/vue-query-nuxt/src/runtime/plugin.ts b/packages/vue-query-nuxt/src/runtime/plugin.ts index 058f5af4..2159cf52 100644 --- a/packages/vue-query-nuxt/src/runtime/plugin.ts +++ b/packages/vue-query-nuxt/src/runtime/plugin.ts @@ -1,6 +1,6 @@ -import type { DehydratedState, DehydrateOptions } from "@tanstack/vue-query" +import type { DehydratedState } from "@tanstack/vue-query" import { QueryClient, VueQueryPlugin, dehydrate, hydrate } from "@tanstack/vue-query" -import { getVueQueryOptions, dehydrateOptionKeys } from "./utils" +import { getVueQueryOptions } from "./utils" import { pluginHook } from "#build/internal.vue-query-plugin-hook" import { defineNuxtPlugin, useRuntimeConfig, useState } from "#imports" @@ -16,15 +16,7 @@ export default defineNuxtPlugin((nuxt) => { if (import.meta.server) { nuxt.hooks.hook("app:rendered", () => { - vueQueryState.value = dehydrate(queryClient, dehydrateOptionKeys.reduce((newDehydrateOptions, key) => { - if (dehydrateOptions[key] !== undefined) { - // https://stackoverflow.com/questions/64408632/typescript-inconsistent-check-for-undefined-why-do-i-need-an-exclamation-poin - // https://stackoverflow.com/questions/60077761/typescript-null-check-doesnt-work-inside-array-map-function/60077855#60077855 - const narrowedValue = dehydrateOptions[key] - newDehydrateOptions[key] = () => narrowedValue - } - return newDehydrateOptions - }, {})) + vueQueryState.value = dehydrate(queryClient, dehydrateOptions) }) } diff --git a/packages/vue-query-nuxt/src/runtime/utils.ts b/packages/vue-query-nuxt/src/runtime/utils.ts index 9ab9d388..1c5ba1d7 100644 --- a/packages/vue-query-nuxt/src/runtime/utils.ts +++ b/packages/vue-query-nuxt/src/runtime/utils.ts @@ -15,13 +15,12 @@ const composables = [ ] as const type VueQueryComposables = typeof composables -export const dehydrateOptionKeys = ['shouldDehydrateMutation', 'shouldDehydrateQuery', 'shouldRedactErrors'] as Array; export interface ModuleOptions { stateKey: string autoImports: VueQueryComposables | false queryClientOptions: QueryClientConfig | undefined vueQueryPluginOptions: VueQueryPluginOptions, - dehydrateOptions: { [P in typeof dehydrateOptionKeys[number]]?: boolean } + dehydrateOptions: DehydrateOptions } export const defaults: ModuleOptions = { From 84958af1b08cf8e2ed88b04b511d19188bb38e9c Mon Sep 17 00:00:00 2001 From: n0099 Date: Mon, 26 May 2025 00:40:04 +0000 Subject: [PATCH 4/6] Revert "feat: allow passing `DehydrateOptions` as nuxt module option to `dehydrate()`" This reverts commit 99dcfc701251844b84a9c3c38b64eb1cef3f84a9. --- packages/vue-query-nuxt/src/runtime/plugin.ts | 4 ++-- packages/vue-query-nuxt/src/runtime/utils.ts | 8 +++----- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/vue-query-nuxt/src/runtime/plugin.ts b/packages/vue-query-nuxt/src/runtime/plugin.ts index 2159cf52..a6562c9a 100644 --- a/packages/vue-query-nuxt/src/runtime/plugin.ts +++ b/packages/vue-query-nuxt/src/runtime/plugin.ts @@ -5,7 +5,7 @@ import { pluginHook } from "#build/internal.vue-query-plugin-hook" import { defineNuxtPlugin, useRuntimeConfig, useState } from "#imports" export default defineNuxtPlugin((nuxt) => { - const { stateKey, queryClientOptions, vueQueryPluginOptions, dehydrateOptions } = getVueQueryOptions(useRuntimeConfig()) + const { stateKey, queryClientOptions, vueQueryPluginOptions } = getVueQueryOptions(useRuntimeConfig()) const vueQueryState = useState(stateKey) const queryClient = new QueryClient(queryClientOptions) @@ -16,7 +16,7 @@ export default defineNuxtPlugin((nuxt) => { if (import.meta.server) { nuxt.hooks.hook("app:rendered", () => { - vueQueryState.value = dehydrate(queryClient, dehydrateOptions) + vueQueryState.value = dehydrate(queryClient) }) } diff --git a/packages/vue-query-nuxt/src/runtime/utils.ts b/packages/vue-query-nuxt/src/runtime/utils.ts index 1c5ba1d7..074ad144 100644 --- a/packages/vue-query-nuxt/src/runtime/utils.ts +++ b/packages/vue-query-nuxt/src/runtime/utils.ts @@ -1,4 +1,4 @@ -import type { QueryClientConfig, VueQueryPluginOptions, DehydrateOptions } from "@tanstack/vue-query" +import type { QueryClientConfig, VueQueryPluginOptions } from "@tanstack/vue-query" import type { RuntimeConfig } from "nuxt/schema" export const NAME = "vue-query-nuxt" as const @@ -19,8 +19,7 @@ export interface ModuleOptions { stateKey: string autoImports: VueQueryComposables | false queryClientOptions: QueryClientConfig | undefined - vueQueryPluginOptions: VueQueryPluginOptions, - dehydrateOptions: DehydrateOptions + vueQueryPluginOptions: VueQueryPluginOptions } export const defaults: ModuleOptions = { @@ -29,8 +28,7 @@ export const defaults: ModuleOptions = { queryClientOptions: { defaultOptions: { queries: { staleTime: 5000 } } }, - vueQueryPluginOptions: {}, - dehydrateOptions: {} + vueQueryPluginOptions: {} } export function getVueQueryOptions(config: RuntimeConfig) { return config.public[configKey] as ModuleOptions From 90fe9ca349f64a4442e0a1de77c5d843392e95e4 Mon Sep 17 00:00:00 2001 From: n0099 Date: Mon, 26 May 2025 00:46:27 +0000 Subject: [PATCH 5/6] feat: allow returning `HydrateOptions` & `DehydrateOptions` in `virtual:pluginHook.ts` --- packages/vue-query-nuxt/src/runtime/plugin.ts | 6 +++--- packages/vue-query-nuxt/src/runtime/types.ts | 4 ++-- packages/vue-query-nuxt/src/runtime/virtual:pluginHook.ts | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/vue-query-nuxt/src/runtime/plugin.ts b/packages/vue-query-nuxt/src/runtime/plugin.ts index a6562c9a..769d09f2 100644 --- a/packages/vue-query-nuxt/src/runtime/plugin.ts +++ b/packages/vue-query-nuxt/src/runtime/plugin.ts @@ -10,17 +10,17 @@ export default defineNuxtPlugin((nuxt) => { const queryClient = new QueryClient(queryClientOptions) // The plugin hook is replaced by the user provided vue-query.config.ts and allow advanced modifications - const { pluginReturn, vueQueryPluginOptions: hookOptions } = pluginHook({ queryClient, nuxt }) + const { pluginReturn, vueQueryPluginOptions: hookOptions, hydrateOptions, dehydrateOptions } = pluginHook({ queryClient, nuxt }) nuxt.vueApp.use(VueQueryPlugin, { queryClient, ...vueQueryPluginOptions, ...hookOptions }) if (import.meta.server) { nuxt.hooks.hook("app:rendered", () => { - vueQueryState.value = dehydrate(queryClient) + vueQueryState.value = dehydrate(queryClient, dehydrateOptions) }) } - if (import.meta.client) hydrate(queryClient, vueQueryState.value) + if (import.meta.client) hydrate(queryClient, vueQueryState.value, hydrateOptions) return pluginReturn }) diff --git a/packages/vue-query-nuxt/src/runtime/types.ts b/packages/vue-query-nuxt/src/runtime/types.ts index 66369801..030a91ac 100644 --- a/packages/vue-query-nuxt/src/runtime/types.ts +++ b/packages/vue-query-nuxt/src/runtime/types.ts @@ -1,5 +1,5 @@ import type { NuxtApp } from "nuxt/app" -import type { QueryClient, VueQueryPluginOptions } from "@tanstack/vue-query" +import type { DehydrateOptions, HydrateOptions, QueryClient, VueQueryPluginOptions } from "@tanstack/vue-query" export type NuxtPluginReturn = | void @@ -13,4 +13,4 @@ export interface PluginHookParameters { queryClient: QueryClient } -export interface PluginHookReturn { pluginReturn: NuxtPluginReturn; vueQueryPluginOptions?: VueQueryPluginOptions } +export interface PluginHookReturn { pluginReturn: NuxtPluginReturn; vueQueryPluginOptions?: VueQueryPluginOptions, hydrateOptions?: HydrateOptions, dehydrateOptions?: DehydrateOptions } diff --git a/packages/vue-query-nuxt/src/runtime/virtual:pluginHook.ts b/packages/vue-query-nuxt/src/runtime/virtual:pluginHook.ts index dc2ee619..ddb11ac0 100644 --- a/packages/vue-query-nuxt/src/runtime/virtual:pluginHook.ts +++ b/packages/vue-query-nuxt/src/runtime/virtual:pluginHook.ts @@ -6,5 +6,5 @@ import type { PluginHookParameters, PluginHookReturn } from "./types" // eslint-disable-next-line unused-imports/no-unused-vars export function pluginHook(pluginHookParameters: PluginHookParameters): PluginHookReturn { - return { pluginReturn: {}, vueQueryPluginOptions: {} } + return { pluginReturn: {}, vueQueryPluginOptions: {}, hydrateOptions: {}, dehydrateOptions: {} } } From 6ee7a5d69ecef044070078744dc0710759a46ed4 Mon Sep 17 00:00:00 2001 From: n0099 Date: Mon, 26 May 2025 01:51:55 +0000 Subject: [PATCH 6/6] feat: better api of `PluginHookReturn.pluginReturn` --- packages/vue-query-nuxt/src/module.ts | 2 +- packages/vue-query-nuxt/src/runtime/plugin.ts | 3 ++- packages/vue-query-nuxt/src/runtime/types.ts | 15 ++++++++------- .../src/runtime/virtual:pluginHook.ts | 2 +- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/vue-query-nuxt/src/module.ts b/packages/vue-query-nuxt/src/module.ts index 2b70e03d..e04283ed 100644 --- a/packages/vue-query-nuxt/src/module.ts +++ b/packages/vue-query-nuxt/src/module.ts @@ -56,7 +56,7 @@ export default defineNuxtModule({ else { logger.info("No vue-query.config.ts file found.") } - return "export function pluginHook() { return { pluginReturn: null, vueQueryPluginOptions: null}}" + return "export function pluginHook() { return {} }" } }) diff --git a/packages/vue-query-nuxt/src/runtime/plugin.ts b/packages/vue-query-nuxt/src/runtime/plugin.ts index 769d09f2..7bd4a5d6 100644 --- a/packages/vue-query-nuxt/src/runtime/plugin.ts +++ b/packages/vue-query-nuxt/src/runtime/plugin.ts @@ -22,5 +22,6 @@ export default defineNuxtPlugin((nuxt) => { if (import.meta.client) hydrate(queryClient, vueQueryState.value, hydrateOptions) - return pluginReturn + if (pluginReturn !== undefined) return pluginReturn + return; }) diff --git a/packages/vue-query-nuxt/src/runtime/types.ts b/packages/vue-query-nuxt/src/runtime/types.ts index 030a91ac..5d137f7c 100644 --- a/packages/vue-query-nuxt/src/runtime/types.ts +++ b/packages/vue-query-nuxt/src/runtime/types.ts @@ -1,11 +1,7 @@ -import type { NuxtApp } from "nuxt/app" +import type { NuxtApp, Plugin } from "nuxt/app" import type { DehydrateOptions, HydrateOptions, QueryClient, VueQueryPluginOptions } from "@tanstack/vue-query" -export type NuxtPluginReturn = -| void -| Promise -| Promise<{ provide?: Record | undefined }> -| { provide?: Record | undefined } +export type NuxtPluginReturn = ReturnType // NuxtApp & _NuxtApp are different so we use any export interface PluginHookParameters { @@ -13,4 +9,9 @@ export interface PluginHookParameters { queryClient: QueryClient } -export interface PluginHookReturn { pluginReturn: NuxtPluginReturn; vueQueryPluginOptions?: VueQueryPluginOptions, hydrateOptions?: HydrateOptions, dehydrateOptions?: DehydrateOptions } +export interface PluginHookReturn { + pluginReturn?: NuxtPluginReturn, + vueQueryPluginOptions?: VueQueryPluginOptions, + hydrateOptions?: HydrateOptions, + dehydrateOptions?: DehydrateOptions +} diff --git a/packages/vue-query-nuxt/src/runtime/virtual:pluginHook.ts b/packages/vue-query-nuxt/src/runtime/virtual:pluginHook.ts index ddb11ac0..2ce92681 100644 --- a/packages/vue-query-nuxt/src/runtime/virtual:pluginHook.ts +++ b/packages/vue-query-nuxt/src/runtime/virtual:pluginHook.ts @@ -6,5 +6,5 @@ import type { PluginHookParameters, PluginHookReturn } from "./types" // eslint-disable-next-line unused-imports/no-unused-vars export function pluginHook(pluginHookParameters: PluginHookParameters): PluginHookReturn { - return { pluginReturn: {}, vueQueryPluginOptions: {}, hydrateOptions: {}, dehydrateOptions: {} } + return {} }