Discussion on: React Query: How to organize your keys

[Red Ochsenbein (he/him)]

So, let's just assume this (slightly silly) example. In one part of your application you do have this:

const { data } = useQuery(['the-key'], () => doSomething())

Now, in a different part you have this invalidation code:

queryClient.invalidateQueries(["the-key"])

So far so good. Now let's say someone new in your team is working on a change in the first part and has to change the key for whatever reason. Maybe to this:

const { data } = useQuery(['the-key', id], () => doSomething())

Now the invalidation would no longer work (well, technically it still does, because it would invalidate all 'the-key' cache entries, but it would no longer be as targeted). The new team member wouldn't know about it and nobody might notice it (well, hopefully you'd have some tests in place to catch it, but well, sometimes tests don't catch everything).

By using a unified "key generator function" as I propose in my article the keys would stay in sync everywhere they were used for a specific query function.

[Ivan Jeremic]

I'm pretty sure the invalidation still works even after adding id dependency no matter how manny deps you add you can always just invalidate them with just the key, I'm pretty sure I have a query in my app

useQuery(["my-key",  {  id  }], () => doSomething())

// invalidate with just key works
queryClient.invalidateQueries(["my-key"]);

[Red Ochsenbein (he/him)]

Yes, this works. queryClient.invalidateQueries() would also work. But I'd rather invalidate as little as possible which means I have to be specific with the keys. Also you might want to update the cached data after the mutation (Updates from Mutation Responses) instead of just relying on. In those case you will have to use the exact key.

In the end there are a lot of ways to get to the desired outcome (using prefix matching, using the exact option, using predicate functions...). You'd have to choose the solution that works for you. I usually tend to think of solutions that are easy to follow and prevent as many undesirable side effects as possible by design (i.E. they require lower cognitive work).

[Ivan Jeremic]

I'm sure your use-case requires what you describe, for me creating custom query hooks work fine for now.

[Jack]

It really does

That's 138 unique queries, most of which are used dozens of times across the codebase 😅

[Jack]

From my experience I think you have to explicitly pass { exact: false } to invalidate partial keys. I could be wrong.