[devtools] Add a way to invalidate a custom key

[Barbapapazes]

Hey 👋,

Thanks for making the new devtools, It's super useful to efficiently handle loading and error state without manually playing with the Network tab of the Chrome Inspector.

Currently, it's possible to invalidate a query but do you think it could be possible to invalidate a custom key?

For example, I have a key ['items', 1, 'sub-item'] and ['items', 1, 'another'] and I would like to invalidate ['items'] to automatically invalidate the two keys.

[posva]

Thanks! I’m glad you like it! I think some invalidate all makes sense but isn’t it too tedious to manually write the key to invalidate?
When do you want to invalidate in the way you describe?

[Barbapapazes]

I'm building a dashboard where all data are linked. This means that when you create one somewhere, you have to invalidate a lot of queries. Within code, it's easy by using a parent key like ['items'] and I would like to do it from the devtools to see how the dashboard behave when it happens. So it's not really a "custom" key but more a parent key.

A more realistic example of code I wrote:

export const POSTS_QUERY_KEYS = {
  root: ['posts'] as const,
  post: (id: number) => [...POSTS_QUERY_KEYS.root, id] as const,
  comments: (id: number) => [...POSTS_QUERY_KEYS.post(id), 'comments'] as const,
  history: (id: number) => [...POSTS_QUERY_KEYS.post(id), 'history'] as const,
  itemsA: (id: number) => [...POSTS_QUERY_KEYS.post(id), 'items-a'] as const,
  itemsB: (id: number) => [...POSTS_QUERY_KEYS.post(id), 'items-b'] as const,
}

[posva]

I think we could add

• invalidate all button somewhere global
• a dropdown next to the invalidate button that allows to invalidate up to the root.

Something like this but with a better design (the button should still show invalidate and the current behavior would be the same, this is just a generated image):