T
TanStack•3y ago
sensitive-blue

Nuxt 3 persistent cache

I'm trying to convert the Nuxt SSR plugin example into a localstorage persister. But i'm getting stuck on the different QueryClients between the @tanstack/vue-query package and the @tanstack/query-core package. Did anyone manage to get this to work in Nuxt 3? This is my plugin at the moment but it fails on the QueryClient 
import { QueryClient, DehydratedState, dehydrate, hydrate } from '@tanstack/query-core'
import { VueQueryPlugin, VueQueryPluginOptions } from '@tanstack/vue-query'
import { persistQueryClient } from '@tanstack/query-persist-client-core'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

import { useState } from '#app'

export default defineNuxtPlugin((nuxt) => {
  const vueQueryState = useState<DehydratedState | null>('vue-query')

  const options: VueQueryPluginOptions = {
    queryClientConfig: {
      defaultOptions: {
        queries: {
          cacheTime: 1000 * 60 * 60 * 24,
          staleTime: 1000 * 60 * 60 * 24,
        },
      },
    },
    clientPersister: (queryClient: QueryClient) => {

      return persistQueryClient({
        queryClient,
        persister: createSyncStoragePersister({storage: window.localStorage}),
      })
    },
  }
nuxt.vueApp.use(VueQueryPlugin, options)

  if (process.server) {
    nuxt.hooks.hook('app:rendered', () => {
      vueQueryState.value = dehydrate(queryClient)
    })
  }

  if (process.client) {
    nuxt.hooks.hook('app:created', () => {
      hydrate(queryClient, vueQueryState.value)
    })
  }
}) 
import { QueryClient, DehydratedState, dehydrate, hydrate } from '@tanstack/query-core'
import { VueQueryPlugin, VueQueryPluginOptions } from '@tanstack/vue-query'
import { persistQueryClient } from '@tanstack/query-persist-client-core'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

import { useState } from '#app'

export default defineNuxtPlugin((nuxt) => {
  const vueQueryState = useState<DehydratedState | null>('vue-query')

  const options: VueQueryPluginOptions = {
    queryClientConfig: {
      defaultOptions: {
        queries: {
          cacheTime: 1000 * 60 * 60 * 24,
          staleTime: 1000 * 60 * 60 * 24,
        },
      },
    },
    clientPersister: (queryClient: QueryClient) => {

      return persistQueryClient({
        queryClient,
        persister: createSyncStoragePersister({storage: window.localStorage}),
      })
    },
  }
nuxt.vueApp.use(VueQueryPlugin, options)

  if (process.server) {
    nuxt.hooks.hook('app:rendered', () => {
      vueQueryState.value = dehydrate(queryClient)
    })
  }

  if (process.client) {
    nuxt.hooks.hook('app:created', () => {
      hydrate(queryClient, vueQueryState.value)
    })
  }
})
2 Replies
compatible-crimson
compatible-crimson•3y ago
Is it only a type error? Cause you can import QueryClient from @tanstack/vue-query, not @tanstack/query-core If it's another error, could you provide a codesandbox with a reproduction and description what exactly does not work for you?
sensitive-blue
sensitive-blueOP•3y ago
I think i found my issue. The packages were not using the same @query-core versions. after upgrading them all to: 
 "@tanstack/vue-query": "^4.26.1",
 "@tanstack/query-persist-client-core": "^4.26.1",
 "@tanstack/query-sync-storage-persister": "^4.26.1",
 "@tanstack/vue-query": "^4.26.1",
 "@tanstack/query-persist-client-core": "^4.26.1",
 "@tanstack/query-sync-storage-persister": "^4.26.1",
I was able to build and run my app again. Now i have some hydration warnings and no cache in localstorage yet. So any advice would still be much appreciated. SSR does not work with localstorage. That is only available client side. Makes sense. So is there a way to persist a json page config even after reloading the browser when using SSR?

Did you find this page helpful?