fix: workaround for cannot pass function to module config: nuxt/nuxt#20933

Author: n0099

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<DehydrateOptions>((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
+      }, {}))
     })
   }
 

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<keyof DehydrateOptions>;
 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 = {