Get status of query from custom hook without triggering query

[ondrejvelisek]

Hi everyone,

I just want to ask if this usage of enabled option is expected or if there is more idiomatic way.

Minimal codepen here: https://codesandbox.io/s/exciting-keldysh-2qgd2v?file=/src/index.js

Basically I wrapped useQuery hook in a custom hook to create convenient API without needing to know nothing about react-query. Considering it as implementation detail.

The question is I want to access its data and state. Obviously I do it via returned query result.

But what if I want to asccess query result without triggering the query itself. Just listen to the state which is triggered somewhere else.

The usecase is when the components which trigger the query and needs its data is not rendered. Bud the listening component is.

I run into it multiple times.

Hope it is understandable.

Cheers

[TkDodo]

sure, you can use a disabled observer to just listen to changes that happen to the query by other means and not fetch data by itself. That is what enabled is for.

However, you might also consider just setting a staleTime on your query, so that reads in that time will not trigger a refetch. Usually, this is why people think they want to disable the query - to avoid refetches.

The advantage of this approach is that your "read-only" component will also work if its used in a situation where no other query has yet put data into the cache. By having a disabled observer, you're building implicit dependencies on other components that you need in your tree to actually fill the cache. I find it best to look at components in isolation and make them work on their own.