Setup React Query and QueryClientProvider

Fetch and display server data using React Query useQuery hook

Configure React Query Devtools and inspect existing queries

Use fetch, axios, ky, or any other promise-based library within useQuery hook

Display loading, error and successful query state using React Query Type Narrowing

Use isPending, isLoading and isFetching flags with React Query

Extract React Query useQuery into custom hooks

Reuse Query Settings using the queryOptions API

Share fetched state across multiple components using React Query

Implement Parallel Queries execution using multiple useQuery hooks within React Query

Manipulate existing queries with React Query Devtools

Configure staleTime within React Query

Configure gcTime (garbage collection) within React Query

Implement a client-side search using React Query

Implement a server-side search using React Query

Use Type Narrowing without early function returns with React Query

Implement a server-side pagination using React Query

Simplify State Management with React Query

In this lesson you'll see a few concepts from previous lessons come together! 

Instead of just filtering the resulting data from a query in a client-side search, you can actually make your queries dynamic and do that filtering server-side. 

https://app.egghead.io/api/v1/lessons/react-implement-a-server-side-search-using-react-query/subtitles

[00:00] We'll replace the client side search with a server side search. And for this reason, we're going to reuse the search name and its corresponding input. And we're also going to create one more piece of state, which is going to be search nationality and set search nationality setter function.
[00:19] And nationality is simply a property on the employee entity. So let's also create that. The type is going to be nationality. Let's import it. And due to the fact that we're not putting any initial value, TypeScript is going to widen the type into nationality or undefined
[00:40] if initially we haven't passed what the search nationality is. Also, let's use a simple component, which is called nationality dropdown, which we're going to use to search by one more additional criteria. And let's also put the on change so that when there is any kind of nationality that we want
[00:59] to filter by, we're going to use the set search nationality with the value nat. Or for simplicity, we can basically put the callback directly. Now we can also see that this drop down with the nationalities, US, UK, DEFR, and so on. And as we can see, there is a new
[01:19] query that has shown up. And this query is one that I have made just in the meantime, which is used to fuel this drop down with the values. So what we're supposed to do now is we need to make sure that whenever we type any search name or choose a search nationality, this is
[01:39] going to be used to remake a new request and fetch a different set of data. So let's take a look at our HTTP function. So our get employees function is accepting a filters parameter, which includes the nationality and last
[01:59] name properties from the employee type, which we're also making optional so that we can pass one of them or the other or both or none of them, whatever. They're all simply optional. And these filters are being used to create a query string, which becomes a part of the URL just like we do with JSON
[02:18] servers. So let's walk back into the employees query since there is nothing that we have to do within this HTTP function, which basically supports the filter parameters. So our employees query includes a query key, which is right now an array of 2 elements,
[02:39] employees and list. And the thing is, if we want to make a request, which would include either the name or the nationality or both, there would be a new data set that is going to be received. And if we leave the query key to remain as it is right now, React Query is going to treat it as if it was the same request, the
[02:59] same resource. So as long as we're going to keep the same query key, React Query is not going to resend the request. So all in all, depending on the parameters that we're going to define here, React query needs to see that the query key, the identifier would be different. So the question is, what are the parameters
[03:19] that our request depends on? Simply, it's basically the search name and its date nationality. So they need to become the part of the query key. So we're just going to reuse the type from here so that employee search params, let's also create a type over here. So let's make it employee query params just in
[03:38] order to make them separate. And our query options cannot remain as it is. We have to make it a function so that each time we could actually make it a different query because it would include a different query key so that this becomes the employee query params over here.
[03:58] And we can simply use the params right here. And what is important is that neither nationality or last name is more important than the other. So we don't want to put them over here that that would be params dot last name or params dot nationality, because
[04:18] neither of them is more important. But thankfully, we can just put an object over here. So when we will be invalidating, we would be basically invalidating all the list or basically depending on whatever are the parents. So right now, TypeScript is yelling over here because this is expecting a query options object.
[04:38] But actually, right now, we don't need this use employees query anymore because we would have to be passing the params down. So let's just remove this function for now. And just to make things work, we also need to make sure that actually this object is being used over here. So whenever we
[04:58] have the params passed, get employees HTTP function is going to make use of it. So let's just move back to the employees page component, and we can see that these 3 hooks are actually defined in an invalid order. So let's reorder them quickly. And we can see that use query again
[05:17] is expecting an object and employees query is a function. So let's just call it as if it was a function. So what we can pass here is basically what is the last name. So let's pass the search name and the other property nationality, and let's pass the value of the search nationality.
[05:37] Now we don't need the client side filtered employee, the use memo call, because there is nothing basically to do on the client side when it comes to filtering. Filtering is being done on the server side. Moreover, we don't need to be doing this client site filter employee variable. So
[05:57] let's remove it from here as well because we don't need it anymore. And let's just put the data because the result, the data that is being brought by the query response is basically what we want to display immediately. So we've got this type narrowing
[06:17] working back again. So after we save it, we can see that there is a new query that is being created with this extended key with this last name, which is an empty string. So as we're going to type something into the input, we can see that there is a new query being created and the old
[06:36] one has been removed. The old one has been removed because the employee's query has the garbage collection time set to basically removed is basically
[06:56] removed. So as we'll be typing more and more signs over here, we've got crew. We've got Cruz. We can see that the employees which are left basically match the last name over here. So let's also put the value into the nationality. So let's just put it the search
[07:16] name, make it k r, and let's put, let's say, US nationality so that now we can see that the query key includes the last name, which is k r, and nationality, which is American. And we can see that both Carmelo Kris and Shania Kraichik match the last name
[07:36] and both match the nationality. And this is how we can implement server site filtering using React Query.

Implement a server-side search using React Query

Share this video with your friends

Course

Simplify State Management with React Query