Reuse Query Settings using the queryOptions API

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet
Published 5 months ago
Updated a week ago

queryOptions lets you pull the options of a query out into its own variable. This is useful because there are many cases where you'd need to reuse the options: re-fetches, running different query types, etc.

[00:00] Use the query options functions, which we're going to directly import from the 10stack React query package. And the query options will allow us to create the configuration for a query without defining a query itself yet. So let's create an export const employees [00:20] query. Note that this is not going to be a hook. This is just going to be a query definition, query declaration, whatever. So let's just use the query options functions, and we're just going to cut away all the settings for this certain query. And we're going to use it back within our hook so that there are no [00:39] breaking changes. So the whole point of extracting away the query options is that we might use it within just use query, but we could also use that within the use queries if we want to run multiple queries at the same time. Or if we want to use the use suspense [00:59] query or use suspense queries, and there is many, many different places where we would like to use it. Also, if we wanted to directly work with the query client object, for instance, to prefetch a query, refetch a query, and so on and so forth, we might need to use the definition of the [01:19] query by passing what is the definition over here. So one more important thing is that when we use the query options functions, there is a data tag defined here within the query key. And this allows us to pass just the key definition [01:39] of our query, and it will remember what is the type returned from the server's response related to that query. So we'll be able to, for instance, prefetch or refetch a given query only by the query key, but react query will figure out what is the type [01:58] related to it, which is going to be super useful. Now if we want to make directly use of the employee's query, we can go back to our component and replace our custom hook with simply use query and importing the employees query options, which we have defined, and [02:18] they use query over here. And we can remove the one right here. And let's just refresh our page so that we can see that all the data is being correctly displayed.

egghead
egghead
~ 37 seconds ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today