Dependent Query conditions

[BlackMarq20]

Are you able to specify a key as a dependent query? In looking at the documentation, the enabled flag is using the result of the user query, however if this query was executed in say another component, would it be possible to just specify the key? or do you need to also execute useQuery in that component?

// Get the user
const { data: user } = useQuery(['user', email], getUserByEmail)

// Then get the user's projects
const { isIdle, data: projects } = useQuery(
  ['projects', user.id],
  getProjectsByUser,
  {
    // `user` would be `null` at first (falsy),
    // so the query will not execute until the user exists
    enabled: user,
  }
)


Something like this?
const { isIdle, data: projects } = useQuery(
  ['projects', user.id],
  getProjectsByUser,
  {
    enabled: ['user', 'another query']
  }
)

[tannerlinsley]

Its definitely better to have it be data driven like the example above. The one below is not supported natively by useQuery, but you could potentially use queryCache.getQueryData() for each of those checks if it’s in another component.

[BlackMarq20]

If I didn’t use the cache, would the useQuery use the cache?

[tannerlinsley]

I’m not sure what you mean. Elaborate?

[BlackMarq20]

So let's say I fire out Query A in component A, then in Component B I also need to fire off Query A, if I didn't use queryCache.getQueryData() would useQuery return a cached result or fire off a new query.

[tannerlinsley]

Both depending on timing. If the data had already been resolved from component A, then component B would load immediately with the cached data, then it would also trigger a background refetch to get it again. Unless you crank up the stale time on the query, then in that case it if component B loaded before the stale time was up, it would use the cached data, but not trigger a background refetch.