T
TanStack•3y ago
generous-apricot

Allow to persist meta in localStorage

Hi, we notice that when using createSyncStoragePersister the meta of the query is not stored at all. This used to be the case in V3 (and was very handy). Since meta is your own playground it seems that this should be added? (see https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L60) We are currently using it like so, this allows us to specify on a Query level if we want to store it in localStorage or not: 
const queryClient = new QueryClient({
  queryCache,
  defaultOptions: {
    queries: {
      // Set cacheTime to 24h for persisted Cache
      cacheTime: 1000 * 60 * 60 * 24,
      refetchOnWindowFocus: false,
      retry: 2,
      meta: {
        // By default we don't want to store queries in local storage
        localStorage: false,
      },
    },
  },
});


const PersistOptions: PersistQueryClientProviderProps['persistOptions'] = {
  persister: LocalStoragePersistor,
  // Keep persisted cache for 12 hours
  maxAge: 1000 * 60 * 60 * 12,
  dehydrateOptions: {
    dehydrateMutations: false,
    shouldDehydrateQuery: query => !!query.meta?.localStorage,
  },
};
const queryClient = new QueryClient({
  queryCache,
  defaultOptions: {
    queries: {
      // Set cacheTime to 24h for persisted Cache
      cacheTime: 1000 * 60 * 60 * 24,
      refetchOnWindowFocus: false,
      retry: 2,
      meta: {
        // By default we don't want to store queries in local storage
        localStorage: false,
      },
    },
  },
});


const PersistOptions: PersistQueryClientProviderProps['persistOptions'] = {
  persister: LocalStoragePersistor,
  // Keep persisted cache for 12 hours
  maxAge: 1000 * 60 * 60 * 12,
  dehydrateOptions: {
    dehydrateMutations: false,
    shouldDehydrateQuery: query => !!query.meta?.localStorage,
  },
};
GitHub
query/hydration.ts at main · TanStack/query
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - query/hydration.ts at main · TanStack/...
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?