Manually updating persisted cache using setQueryData doesn't work in VueJS

[jai2201]

Hi,

I am prefetching query on mount of my VueJS application and persisting the data in indexedDB

const sdk = useSDK();
const queryClient = useQueryClient();

useQuery({
  queryKey: buildContactsIndexQueryKey(),
  queryFn: async () => {
    let allContacts = [];
    if ($currentUser.value) {
      async function fetchContacts(cursor) {
        const { data } = await sdk.contacts.getAll({
          select: {
            id: true,
            first_name: true,
            last_name: true,
            full_name: true,
            image_url: true,
            job_title: true,
            last_seen_at: true,
          },
          cursor,
          take: 1500,
          where: {
            ignore_merge: false,
            is_archived: false,
          },
        });
        const fetchedContacts = data?.items ?? [];
        allContacts = allContacts.concat(fetchedContacts.map(createContactCacheItem));
        const nextCursor = data?.nextCursor;
        if (nextCursor) {
          await fetchContacts(nextCursor);
        }
      }
      await fetchContacts();
      return allContacts;
    }
    return [];
  },
  persister: experimental_createPersister({
    storage: {
      getItem: (key: string) => get(key),
      setItem: (key: string, value: string) => set(key, value),
      removeItem: (key: string) => del(key),
    },
    maxAge: 1000 * 60 * 60 * 24, // 24 hours
  }),
  staleTime: 1000 * 60 * 60, // 1 hour
});

and then once any mutation is done related with contacts, I want to manually update this cache persisted in my indexedDB to include that new created contact/update it's name/other fields, but it doesn't seem to work -

export function useCreateContact() {
  const sdk = useSDK();
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async (contact: CreateContactData) => {
      const res = await sdk.contacts.createContacts([contact]);
      return res?.data?.contacts?.[0];
    },
    onSettled: () => {
      queryClient.setQueryData(buildContactsIndexQueryKey(), (old: ContactCacheItem[]) => [...old, newInsertedContact]);
    },
  });
}

But it's not working and not updating the cache stored in indexedDB. Is there a way to do so ?

[jai2201]

@TkDodo , if you have any suggestions here please ?

[TkDodo]

• setQueryData() should be persisted too, right? #6310