Get all the queryKeys used on the React tree

[pedroapfilho]

I don't know how doable it is, but it would be very helpful, for some complex error handling cases, to have a way to get all the keys used on a specific tree, like,

Parent
    Children
        Children -> useQuery("todo", fn)
    Children -> useQuery("something", fn)

Then, on the Parent, we could have something like a useGetDownstreamQueryKeys, that gets all the queryKeys from that node, and returns it as an array.

This, in conjunction with Query Observers, could make a very neat error handling case, where we can check if any of the requests downstream failed, and we could show the status of that specific page/widget/whatever, making it easier to handle complex apps error cases.

[DerYeger]

Hi, sine you've asked me on input here regarding my key-hierarchy library:

I don't think key-hierarchy can provide an immediate solution, since query keys can be dynamic data.
One idea I came up with is the following:

const queryKeys = defineKeyHierarchy((dynamic) => ({
  users: {
    getAll: true,
    byId: dynamic<string>().extend({
      get: true,
      update: true,
    }),
  },
}))
const activeQueryKeys = client.getQueriesData({})
const usersKeyBase = queryKeys.users.__key
const childQueryKeys = activeQueryKeys.filter((queryKey) => deepEqual(queryKey.slice(0, usersKeyBase.length), usersKeyBase))

With .__key, you can read the partial key at any point in the hierarchy. Then, just get all active query keys with client.getQueriesData({}) and filter all that have the .__key of interest as a prefix.
For the above example, this should yield all query keys for "user" queries that are active.

Of course, this does not take component hierarchy into account. Just the key hierarchy.