Jordi Comments

Jordi

•Created by ygor perez on 5/9/2023 in #❓-help

how to persist the query client?

have come across this one on google, but just as an FYI for anyone, you'll want to add in superjson to ensure serialisation of dates doesn't break

import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
import { useQueryClient } from "@tanstack/react-query";
import {
  persistQueryClient,
  removeOldestQuery,
  type PersistedClient,
} from "@tanstack/react-query-persist-client";
import { useEffect } from "react";
import superjson from "superjson";

const usePersistQueryClient = () => {
  const queryClient = useQueryClient();
  useEffect(() => {
    const localStoragePersister = createSyncStoragePersister({
      storage: window.localStorage,
      throttleTime: 1000,
      retry: removeOldestQuery,
      serialize: (data) => superjson.serialize(data) ?? "",
      deserialize: (data) => superjson.deserialize(data) ?? {},
    });

    persistQueryClient({
      queryClient,
      persister: localStoragePersister,
      maxAge: 60 * 60 * 24,
    });
  }, []);
};

export default usePersistQueryClient;

import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
import { useQueryClient } from "@tanstack/react-query";
import {
  persistQueryClient,
  removeOldestQuery,
  type PersistedClient,
} from "@tanstack/react-query-persist-client";
import { useEffect } from "react";
import superjson from "superjson";

const usePersistQueryClient = () => {
  const queryClient = useQueryClient();
  useEffect(() => {
    const localStoragePersister = createSyncStoragePersister({
      storage: window.localStorage,
      throttleTime: 1000,
      retry: removeOldestQuery,
      serialize: (data) => superjson.serialize(data) ?? "",
      deserialize: (data) => superjson.deserialize(data) ?? {},
    });

    persistQueryClient({
      queryClient,
      persister: localStoragePersister,
      maxAge: 60 * 60 * 24,
    });
  }, []);
};

export default usePersistQueryClient;

18 replies

TtRPC

•Created by Jordi on 2/22/2024 in #❓-help

Reduce `isPending` time for prefetched Queries?

3 replies