How to simply delete query entry?

[Perdolique]

Hey. I'm removing things on the page, and I want to simply remove a cache entry by a specific key.

At the moment, it's possible by getting all entries by key using cache.getEntries() and then removing each entry one by one using the cache.remove() method. Is there a simple built-in method that allows you to just remove entries by key without refetching? Something like cache.removeEntries({ key: [...] })

[posva]

You have to use cache.remove() with the entry as an argument:

const cache = useQueryCache()
// if you know it exists
cache.remove(cache.get(['my', 'key'])!)
// delete multiple entries at once
cache.getEntries({ key: ['my-root-key'] }).map(entry => cache.remove(entry))

BTW it's better to adapt the gcTime so Pinia Colada removes the entries automatically than removing them manually.

[posva]

Ah I see. The problem comes from the entry being removed while it's still used. An entry must be removed if it's not used anymore (the cache never removes an entry if it's actively being used). What you need is to reset the state entries or to invalidate them. Maybe even handle both queries differently e.g. remove the [notification, type, destination] but invalidate [notification, type]. Let me know if you want to jump in a call to take a deeper look together

[Perdolique]

Yes, ideally, I just need to reset the state of [notification, type, destination] to ensure the request is made again on the next component render, but at the same time, I don't want to invalidate [notification, type], because it will make an additional request to the server that doesn't make much sense, since we ensure the item has been deleted successfully and can be just removed from state/cache.

Your proposed way seems to work (I've created a small playground). But I see a disadvantage of manual handling here. It's a kind of manual work that might be error-prone: every new "child" key should be added to the deletion mutation by hand and can be forgotten. That's why I thought there might be logic that makes it possible to remove a cache entry/change state of the parent, and all children will be automatically marked as stale or so.

At the moment, I'm just researching Pinia Colada out of personal interest and got stuck almost immediately on simple tasks like the above. 😅 Probably because of the expectation: "if parent cache is removed/changed -> parent/children state should react".

I also feel that I missed additional methods, something like makeDataStale() to enforce a query on the next call (including children), removeEntries({ key: [...] }) to avoid repeating cache.getEntries() + entries.forEach(cache.remove) (I feel it might be more performant way, w/o such cycles) or something like that.

[posva]

You can set the entry state with setEntryState() and set it to pending

You don't need to manually remove stuff from the cache. Reduce the gcTime so it's removed early if you really need to. It's still removed after a while if not actively used.

You might not be taking the right approach and overthinking things. Most of the time you just need to invalidate queries in mutations, configure staleTime to your needs and call it a day, Pinia Colada takes care of the fetching and caching automatically.

• makeDataStale() is invalidateQueries()
• removeEntries is not added to keep the lib light. Performance wise it doesn't make a difference

[Perdolique]

Unfortunately, this approach doesn't work correctly out of the box for a few reasons:

1. invalidateQueries making requests that do not need to be made. We know the data on the backend is removed after a successful mutation, and the GET request will always return 404.
2. invalidateQueries with exact: false will also trigger children requests, but it doesn't make sense because of the non-existent parent and will return 404 as well.
3. invalidateQueries with exact: true will keep children's state untouched, and this is the problem as well, because the client will still think the children exist when it does not (children's data becomes stale after parent deletion).

I understand that, ideally, I need to just invalidate the query, but in my case of deleting data on the backend, invalidation doesn't work. Sometimes, the data needs to be invalidated without a network request because we are 100% sure the data in there doesn't exist after mutation. Setting staleTime to 0 also sounds wrong, because other parts of the app may still need that data w/o additional requests.

That's why it might be useful to have a separate method like cache.makeDataStale() or an option like cache.invalidateQueries({ request: false }) that will invalidate data w/o network requests. 🤔

[KsaRedFx]

The closest answer that I've found to what you're looking for is:

    queryCache.setQueriesData({ key: yourQueryKey }, () => undefined); // Or whatever value you want. I want undefined.
    queryCache.invalidateQueries({ key: yourQueryKey }, false); // 2nd parameter tells it to not fetch immediately
    queryCache.getEntries({ key: yourQueryKey }).forEach((entry) => { 
      entry.state.value.status = 'pending'; // Resets the pending status so that `isPending` is true
    });

This has maintained reactivity in my case and everything works as I'd expect. The library could wrap this set of functions in a helper and that would probably make things a lot easier for people while "keeping the lib light", but for now this should work for you