Reuse Query Settings using the queryOptions API

[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.