React-query: Idle state for dependent queries

[AngusMorton]

Currently, when you have a dependent query the initial state is 'success'. This is awkward because the request succeeded because it hasn't even started, but it's also not loading, and hasn't failed!

So, I want to propose a fourth status 'Idle', which is when the query hasn't done anything yet and is returning the initial state.

For example, in the app I'm building we display a 'no results found' component when the status is 'success' and the result is falsey, however with the current setup we can't tell (without doing extra logic) when the initial state is being returned.

[tannerlinsley]

This would be a pretty massive breaking change for most users, but I see your conundrum. In almost all circumstances, we found that using the same dependency variable you use in your query key to determine the UI state was more than sufficient, so with that said, do you have an example of why you wouldn't be able to do that same?

[AngusMorton]

Yeah, we've been able to work around it in, in a similar way to what you've suggested.

The problem is that for new users of the library, status seems like the right thing to use, except for when it isn't (dependent queries). I think it's worth considering an idle state for the next major version because, currently, using the status flag is confusing and makes it easy to make mistakes.

[tannerlinsley]

Sounds good. I'll consider it for the next major version. In the meantime, I would suggest creating a wrapper hook for useQuery that achieves the status that you want. It may help your users avoid the mistakes you mentioned. Maybe something like this:

import { useQuery as origUseQuery} from 'react-query'

export * from 'react-query'

export function useQuery (...args) {
  const queryInfo = origUseQuery(...args)

  if (typeof queryInfo.query.queryHash === 'undefined') {
    queryInfo.status = 'idle'
  }

  return queryInfo
}

[dbroadhurst]

I'm really confused about how dependant queries work
const { data: resources, error, status } = useQuery('resources', loadResources) const { data, query } = useQuery(resources && ['myself'], loadMyself)
...JSX code to check status, loading, error, success etc.

success has been discussed although I can't seem to get it working using query hash, seems to pass after the loadResources. I've tried to make the keys the same and still does not work

The bigger question is how does status === loading work. I can't use status twice and it seems hacky to have a status for each useQuery.

Maybe it's just a documentation issue but I don't see how 2 or more dependent queries can work without a lot of additional code.