Implement a client-side search using React Query

[00:00] Create a new piece of state, which we'll just put near the useQuery hook that we've had before. And let's just use the simplest possible approach and that would be a native use state with an initial empty string. And we're going to filter the employees objects, which we can see on the right hand side, using a [00:20] last name, first name, whatever we choose. So that's just going to be a string property. So we've got search name and the set search name callback. So let's also create a simple corresponding input element, which is going to be an input of type text. Let's also put a nice placeholder so that it will [00:40] say search by name. Let's also synchronize the input with the value. So the value is going to be the search name. And finally, the unchanged callback, which is going to basically use the event e. I'm not going to wrap it with useCallback, nothing like that. So [00:59] set search name and e dot target dot value. And here we go. So whenever we type something over here, like John, this is already put into the React state. So it's not yet bound to what is the data that is being loaded by the query. So let's do it [01:19] now. So const client site filtered employees. Since we are going to filter it client side, we are going to load whatever we've got on the server and we are just filtering it on the client side. So right now, let's be gentle and let's wrap it with the use memo call [01:39] over here. So what we're going to put here is basically we want to filter the data, the array, but since it could not exist, we have to use optional chaining. So what we want to do right now is that for a given employee, what we want to make [01:59] sure is that the employee, let's just filter it by last name and just to make sure that casing doesn't, fake our results, let's just make both sides, move to lowercase. And let's also put the search name dot to lowercase. [02:19] And we can now assume that this is going to work correctly. So if the data is there, we're just going to return what the employees are. If the data is not here, it's going to return simply undefined. So also what we need to put over here, I don't have the linter turned on, so [02:39] we need also to put what is the data so that use memo would reload and reevaluate whenever this dependency change. And also we would put the search name over here. So everything is ready. We just need to use the client side filtered employee value over here. So we're going to replace it here [02:59] within the employee listing. So let's just replace it here. And TypeScript is yelling because employee listing expects that employees would be basically an array, so it cannot be undefined. But in our case, this could be undefined. So we can use 2 different approaches. 1 would be more implicit. The other one would [03:19] be more explicit. The implicit one is that since we know that if is pending and error are already covered, then the data has to be here. So this one couldn't be undefined. We can figure it out. TypeScript cannot figure it out. So we could basically put the not null assertion, though [03:39] it's not really readable. Why do we assume that this expression cannot be undefined? So either we can leave it, but also there is no problem to basically wrap this also with a conditional rendering. So let's save it and let's see how would this application behave if we refresh the page. [03:58] So the data has been loaded. We've got one query that is currently fresh for now. And as we type something into the search name filter, we can see that Bertram Krushevski is being displayed as the only one accordingly. And we can see that the same query without any refetching [04:18] has been used to share the data. So this is the way how we can implement client side filtering.