genetic-orange

Possible to persist queries on a per query basis?

I have an expensive query that I want to persist to local storage. It seems I will have to create a persister using createSyncStoragePersister and then add a <Provider> in the react context. But I want it to be saved to localstorage for only a specific query. How can I achieve this?

2 Replies

genetic-orangeOP•2y ago

export const getMetadataDetailsWithReactQuery = async (id: string) => {
    return await queryClient.ensureQueryData({
        queryKey: ["metadataDetails", id],
        queryFn: async () => {
            const { metadataDetails } = await clientGqlService.request(
                MetadataDetailsDocument,
                { metadataId: id },
            );
            return metadataDetails;
        },
        persister: experimental_createPersister({ storage: window.localStorage }),
    });
};

export const getMetadataDetailsWithReactQuery = async (id: string) => {
    return await queryClient.ensureQueryData({
        queryKey: ["metadataDetails", id],
        queryFn: async () => {
            const { metadataDetails } = await clientGqlService.request(
                MetadataDetailsDocument,
                { metadataId: id },
            );
            return metadataDetails;
        },
        persister: experimental_createPersister({ storage: window.localStorage }),
    });
};

genetic-orangeOP•2y ago

https://tanstack.com/query/latest/docs/framework/react/plugins/createPersister

experimental_createPersister | TanStack Query React Docs

Installation This utility comes as a separate package and is available under the '@tanstack/query-persist-client-core' import.

Gaming

Programming

Possible to persist queries on a per query basis?

Did you find this page helpful?