How to manage the query key correctly

[tianleiyiji123]

How to effectively and reasonably manage the key field in each query? When creating a query, the query may change according to the parameters, and then when you want to use the query again on another page, the key cannot be clearly known

[TkDodo]

I usually manage the keys in global client state, or in router state, like:

myUrl/todos/1

if I switch to a different todo, I update the url:

myUrl/todos/5

and all subscribers will re-render and re-fetch (if you use something like react-router).

so the url is a good global state manager for these kinds of things

[tianleiyiji123]

I will wrap the query in a hook. I want to call this method directly to clear the cache, but because there are parameters, I don’t know which key’s cache needs to be cleared on other pages.

[TkDodo]

So you perform a mutation, and then redirect to a different page before the mutation is finished?

[tianleiyiji123]

No, for example, from a communication list page, each list is a communication task. Click the button to communicate, and it will jump to the communication details page. When the communication is completed, I want to trigger invalidateQueries to update the list, but at this time I It is impossible to know the key of the previous list query on the details page.

[TkDodo]

it sounds like list and detail are clearly related, so for example:

communication-list-key: ['communications']
communication-detail-key (with id: 15): ['communications', 15]

so it's invaliateQueries(['communications']) in this case. I'm clearly not getting the full picture - maybe some example runnable codesandbox code would help

[tianleiyiji123]

Yes, you can succeed in this way. But when it comes to key maintenance in a relatively large project, I think we need to find a good maintenance method. As you said, the key is maintained through routing, but in this way, when you need to operate the query in other components or other pages, you will use the key repeatedly to confirm a query, which is not convenient at this time.