 In our previous video, we wrote a custom hook called useVerify that would go ahead and query the user data from the pocketBaseDB, and that is an asynchronous function and it works. But one gripe that I still have about this function is that it doesn't automatically refresh the data from the database every time we make a change. And so we have to refresh the entire page in order to see this verify indicator change from false to true. So let me give an example for what I'm talking about here. I will go to my pocketBase console here and just remove the verified check mark here next to our user so we can re-verify our user. And look, I changed that in the database and it's still true, right? So to see the changes, I have to refresh the page and now you see it's false. And if I were to click on send verification email again and refresh our email page, then we can see that we have our email arriving in our inbox. Just let me just click on verify, right? It'll bring me to this new page that says successfully verify email address. If I close this page out, it's still false here. I have to forcefully refresh the page in order to see the change from false to true appear in the UI component. Now, we could always use pocketBase's real-time API and subscribe to the database so that we get notified of any changes in real-time and we can write unchanged functions to handle the changes and refresh the UI. Now, unless real-time features are absolutely required and necessary, like in real-time chat apps, I don't really recommend using real-time hooks for everything because there's a much more elegant solution to this problem and that is called useQuery and that's from reactQuery as well. So the problem with subscribing to real-time databases everywhere is that let's say we have multiple components that use this query that checks if the user is verified or not. For example, if we were to have a top bar here, the navigation bar and we're gonna have the auth menu here for users to log in and log out and all the other options in the menu bar, we're gonna be making duplicate requests, duplicate subscriptions in this component as well as in the auth component in the top bar and what ends up happening is number one, the server gets unnecessarily overloaded because so many people are making the same duplicate requests in the same browsers and also our page becomes really slow and to overcome this problem, you would have to write your own caching mechanism to reduce all of these inefficiencies and you can use something at Redux and you can have a global state so that all components can share the same data set, the same information that has been retrieved by the database only once but that approach comes with many other problems in and of itself. For example, you're gonna have to manually, you have to decide when to perform patches like what are the intervals, do you do it every two seconds to check if the data is updated and you have to add so much of the code complexity to your code base just because you're using something at Redux and that's where the use query hook comes into the picture. Now use query hook has all of the functionalities I mentioned previously, it's all baked into this one hook including loading states, automatic caching and error handling and everything else. So I'm going to go to our code here and try and implement this use query hook instead of having to manually do all of this in our custom hook and the use query hook comes from the react query library that we have installed in a previous video. If I would just go to the use login hook, you can see that we're importing use mutation from react query. So it's the same library is just a different hook use mutation is usually used to push and post data to the database and use query is to fetch. So let us come here and import use query. I'm going to take the request verification function and export that separately. So export async function request verification. And then here I'm just going to comment all of this out. And we'll rewrite this hook from scratch. So let's do return use query. Now the use query hook takes in some options. So let's give it a query function, which is just query fn, this function that we provide to the use query hook, it's going to run that function and take the return value. And it will return it to our data object from our took call. So here, instead of returning this, it will return a property called data. And that data is going to contain the return value of this query function right here. All right, so let's copy our query function. It's basically this asynchronous function called check verify. We can just paste it here. And then I'm going to uncomment that. And then instead of set is verify instead of taking the user data verify and sending it to some state that we don't have right now because we get we got rid of that. Instead, we're just going to return users data dot verify. And then let's pass check verify to our query function option. And then I could always just get rid of state now because we're no longer using that. And because the use query hook has automatic caching, we can specify a query key. And what this does is that it identifies this specific query. So if we were to call the same use query hook in a different component, and we give it the same query key that we're giving it here, it's going to check if the cache already exists. And if it does, it doesn't have to go and fetch from the database again. And it has to be unique older versions of react query just takes in a string as the query key. But newer versions, the newest version of react query takes in an array instead. And that's because sometimes we want composite keys to be our query key. For example, right now, we are doing a query to check if a user is verified or not. But this query might vary might change depending on what the user's ID is. So if we were to leave out this ID from our query key, what will happen is that the use query hook will try to use the same query for different users, although it's performing the same functionality, the parameters different, right? So if you try to use the same query, the same cache for different users, it's going to mess up our code, our logic a little. So let me just bring the ID up to the top outside of the check verify functions just so we have access to the ID variable. And then I will just comment this out for now. And let's go and refresh the page. I know that there's going to be a problems because if I just click on log out, we should see problems. And the page isn't rendering. If we were to read the error in a console, it says cannot read properties of now reading ID. So that's here in pb.authstore.model.id. So what I did was I logged out from our UI here, and then authstore.model became undefined because if we're logged out model doesn't exist. So what we could do is we could just add a question mark there. So model if that exists, then we return the ID. If not, it's just going to be undefined or null. And what we can do is we can take in args arguments here in the check verified function, which is basically our query function. And we can console log args to see what we're getting here. And the reason I'm doing this is because the use query hook passes in some arguments that we can use to our query function automatically. And I'll just log it to the console just so you can see what we're getting in the arguments. So these are the arguments we're getting page parameter. But what we're interested in here is specifically the query key. So the query key is an array you can see of length of two, the first argument, the first element is check verified a string second element is undefined because we're not logged in, right? So remember, this is our first element. It's a string called check verified. And that's the second element ID. If I were to add a third element here, and to refresh the page, you can see that the query key now has a length of three. And the third argument is our third element in our array here in the query key array. Great. So now we can just do like cons ID equals to args dot query key. And the first element we can console log the ID. And then let's refresh this. It's undefined. If we were to log in, it should give us our user ID or alternatively, what you could do is just get rid of this entirely. And because the ID constant is already defined outside of our check verified function, we already have access to the ID, right? So we don't even have to get the args from react use query. I'm just doing that to just to show you the concept for understanding if you were to find this useful in the future, you can just get args here and just move this check verified function to a different file or like a util class or refactor the code basically. So now is the moment of truth. Let us uncomment this code in check verified function. We'll go to our auth component here. And because we're looking for the is verified variable, which doesn't exist anymore, because we got rid of that when we were renaming this object to just data, we can just rename data to is verified. And then we'll also need request verification function that I exported separately. So let me just get rid of all the comments here. So remember that we took this function and put it outside of the use verified hook. So let us just import that as well. So import request verification. And then yeah, everything should work now. Let's refresh this page. So remember at the start of the video, I showed you a demo of how we had to refresh our entire page every time we made a change in a database and we wanted to see the changes reflect in the UI and react here. So now, now that we've implemented the use query hook, let's go ahead and manually set this verified user to not verify. I'm going to save the changes. And the moment I click into our react app here, we should see it automatically changes to false without us having to refresh the page. And we're not using any form of real time subscriptions here as well. And that's the magic of the use query hook from react query. If we were to switch tabs or windows and change the focus of the react app, use query will automatically go back and refresh the data that it had in the cache. And they'll just automatically change our verification status here in the UI component. So let's just try to send a verification email again. I will refresh refresh our inbox here. So we got our new email. If I were to click on the verify button, it says we're verified. If I went back to the app, it verified is now true and we didn't have to refresh the page at all. And that's really neat, isn't it? And that's not the only magic thing that use query can do for us because we can go back to our code. If we wanted to, we could also extract a few more things here like is loading because the use query hook automatically helps us deal with the loading state. We can rename that to something else because it clashes with our use login hook. It also has is error. It's just like the use mutation hook. It has all of the properties like is loading and is there is error that we have at our disposal if we were to implement that in the UI components. The use query hook also gives us many other states like data updated that that we can use to extract the last time the data was updated. And there's stuff like refetch you can manually specify a refetch function for use query. And there's also is refetching, which if I came here and just did refetch is refetching, and we can just console.log is refetching. So you can see it's true and then false. If I were to switch away and come back here, it refetched again. And that way our data is at least guaranteed to be more efficiently and more properly synchronized with the database. And that marks the end of this video. If you are interested in react query, I will probably be making more playlists and videos to teach just react query. And I'll see you in the next one.