A query function can be literally any function that returns a promise. The promise that is returned should either resolve the data or throw an error.
All of the following are valid query function configurations:
For React Query to determine a query has errored, the query function must throw. Any error that is thrown in the query function will be persisted on the
error state of the query.
While most utilities like
graphql-request automatically throw errors for unsuccessful HTTP calls, some utilities like
fetch do not throw errors by default. If that's the case, you'll need to throw them on your own. Here is a simple way to do that with the popular
Query keys are not just for uniquely identifying the data you are fetching, but are also conveniently passed into your query function and while not always necessary, this makes it possible to extract your query functions if needed:
[queryKey, queryFn, config] signature is supported throughout React Query's API, you can also use an object to express the same configuration: