A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server. If your method modifies data on the server, we recommend using Mutations instead.
To subscribe to a query in your components or custom hooks, call the
useQuery hook with at least:
The unique key you provide is used internally for refetching, caching, and sharing your queries throughout your application.
The query results returned by
useQuery contains all of the information about the query that you'll need for templating and any other usage of the data:
result object contains a few very important states you'll need to be aware of to be productive. A query can only be in one of the following states at any given moment:
status === 'loading'- The query has no data and is currently fetching
status === 'error'- The query encountered an error
status === 'success'- The query was successful and data is available
status === 'idle'- The query is currently disabled (you'll learn more about this in a bit)
Beyond those primary states, more information is available depending on the state of the query:
error- If the query is in an
isErrorstate, the error is available via the
data- If the query is in a
successstate, the data is available via the
isFetching- In any state, if the query is fetching at any time (including background refetching)
For most queries, it's usually sufficient to check for the
isLoading state, then the
isError state, then finally, assume that the data is available and render the successful state:
If booleans aren't your thing, you can always use the
status state as well:
For an alternative way of performing status checks, have a look at the Community Resources.