How to persist the manually cached data between page refresh in vue

[jai2201]

Hi,

I try to maintain a global cache of all the contacts fetched throughout from different places in the application by doing this

function addContactsToCacheQuery(contacts: Contacts[] | undefined) {
    if (!contacts) {
        return;
    }
    const queryKey = ['contact-cache'];

    // append the new contacts to the existing data
    const existingData = queryClient.getQueryData<ContactCacheItem[]>(queryKey) ?? [];
    const newData = existingData.concat(contacts.map(createContactCacheItem));

    queryClient.setQueryData(queryKey, uniqBy(newData, 'id'));
}

And then use this for returning the initialData in useQuery API calls

This works fine, but I want to persist this data stored in ['contact-cache'] key even with page refresh, how can I do that ?

I tried this, but it didn't work

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: Infinity,
      persister: experimental_createPersister({
        storage: localStorage,
        maxAge: 1000 * 60 * 60 * 12, // 12 hours
      }),
    },
  }
});

app.use(VueQueryPlugin, {queryClient});

And then use this exported queryClient from here in the function addContactsToCacheQuery, but it didn't store the key 'contact-cache' in localStorage and hence the data got lost after refresh.

How can I achieve this ?

Thanks

[jai2201]

I basically am looking for a way to persist seeded cache into the key ['contact-cache'] in vue. @TkDodo or anyone else - if you can help 🙏

[jai2201]

bumping this up!