Next.js + Strapi - Filters With React Query

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
in this episode we are going to create some filters so that we can filter our movies uh based on genres and actors that are in it for that we are going to be using react query and also we are going to be using react select so that our select boxes look nice [Music] now before we begin i just want to give a quick shout to cornwall works cornwall works is a wordpress plugin that gives you the ability to create and host voice assistant and chatbot services directly from your website uh conversation logic is broken into workflow components uh which are fully managed through the graphic interface it's something like building a website in a visual composer it supports custom components and extensions so that you can add new functionalities from your plugin or a theme cornover works currently works with amazon alexa google assistant viber and facebook messenger so if you guys are interested in something like this please check them out they're not paying me anything for this this is made by the guys from croatia so i just wanted to give them a shout out and to spread word about their product so if you're interested in something like this please check out convo works just a little note before we begin so i updated my strepy to be version 3.4.5 also i deleted all of the placeholder movies uh got real movies in here and i added some actors and some genres to it so that we have so now we have these five movies which we are going to be filtering throughout our application and as i said at the beginning of this episode we are going to be using react query for that and also we are going to be using uh so react where is this and we are going to be using react select now react query is a performant and powerful data synchronization for react uh which means that you're going to use it to fetch the data and react where it's going to cache that data for you so that you don't have to uh fetch it all the time it's also going to give you status messages for that and it has some pretty nice things for working with fetching data from the client side we are of course not going to go too much into detail here we are just going to use it for our filters but if you want to know more about react query i suggest you check out this video series by the net ninja uh he has a few episodes about react query that are going to go into a bit more detail about react query than what we are going to be doing in this episode so if you want to know a little bit more about it uh check out those videos and also as i said we are going to be using react select which is just going to create these nice select boxes for us in which we can pull single data we can pull multiple data and so on okay so let's first of all just install react query and react select so you go to your console and you just do npm install react query and react select now once this is done we can go to our code editor and inside our fjs we are going to set up our query client provider and our query client you need to do that to use react query so you are going to import uh client query client provider and query client from react query then we are going to define query client like this so query client is equal to new query client and next you need to write your components inside of query client provider so you do query client provider around your components and you need to define a client which we defined right here so it's called query client so client is equal to query client and that's about it so now you have cr query client provider around your components and you can use react query okay so now that we did this let's create a new list of our movies uh which is just going to be a textual list so that we can see how our filters work a little bit better uh that is going to be better than using uh our site as it looks right now so as you can see uh this doesn't look very good for filtering so we are going to create a new route and in that route we are just going to list our movies and then i'm going to show you how the filters work okay so first of all i'm going to create a new file inside of pages directory so we go to pages and in pages i'm going to create a new page called filter movies dot js of course and in here i'm just going to paste this in because i don't want to go through that we already covered this a million times so what we are doing is importing flex and books uh we are returning a container uh we have a title of filter movies filters are going to go here in this box right here and in this box i am mapping through the movies i'm displaying a movie title movie genre so actually i first check if the movie genre exists if it does i want to show the title of that genre and if it doesn't i'm just going to show null so this you need to do this if some of your movies don't have genres attached to them if you don't do this then your application is going to break after that we are going to go through the actors array and we are also checking if there is anything inside of that array if it is then we are going to map through the actors array and show the first and last name of the actors and uh here i'd get server side props we are just fetching the movies just like we did on our index page and we're sending those movies through props and receiving them here right so if i save this and go to the browser and go to the route called filter movies we get something like this now i see that each child in doesn't have a key prop so let's do that first of all so that we could get the rid of that error and that prop is missing right here on the small element so key is just going to be actor dot id save it go to the browser refresh it and uh the warning has disappeared okay so our filters are going to go here this is the list of our movies remember we only have five movies as you can see we're displaying titles genres and actors now since we are going to be filtering our movies by genres and by actors we need to get all of the actors and all of the genres inside of this page because we want to display them in our filters or in our select boxes so first of all i'm just going to change this const data to be const movies data so movies data next i'm going to do pretty much the same thing right like here but i'm just going to get all of the actors so res actors and actors data and i'm going to do the same thing for genres so we are going to go to the genre route and get all of the genres that we have for our movies so res genres we are accessing the genres endpoint and then we are getting the data for those genres and then we are going to send movies data as movies and actors is going to be actors data and we also want to and we also want to send genres of course we need to define them in our props right here so actors and genres okay now we want to get all of those actors and genres inside of select boxes we installed react select so we are going to call it from react select so i'm just going to do import select from react select and now we have access to this select component and select components work kind of like this so first of all you just do select and then you want to define the options that you are getting so options for our select is going to be this one is going to be for actors so i'm just going to say actors okay the next one is going to be instance id since we are going to have two select boxes we need to define instance id for them and we are just going to call it actors next since we are going to have multiple actors that that we can select for this filter uh we are going to set this to be is multi you can of course read more about react select on their documentation page uh then we also want to have a placeholder and the placeholder is just going to be filtered by actors okay and that's about it for now let's just see if this works actually it's not going to work right away because we have two more things to set up so i'm going to show you that so if i go to my browser right now as you can see i have filter by actors but if i click right here i get the actors actually as you can see i can select from them and they appear right here but they're not showing anything they're not showing anything because the default for this is not showing our first name and last name of the actors so we need to define that option label so we are going to go and set get option label and the option label is going to be option and we are going to and we are going to use template string for this so we are going to say option so remember option is just one actor and if we go to [Music] our browser right here and do actors so this is our this is our actor robert de niro for example and it has a first name and the last name so we want to show that inside of our select box so we go right here and do option first name and then we wanna access another variable option last name okay now we also want to filter our options or our actors by id so when we send this to strappy we want to define an id of an actor and then get those movies so we are going to set this to be get option value and the option value is going to be option is going to be option dot id okay great now uh how does this work so first of all i'm just going to add an unchange handler right here on change and then i'm just going to set it to be something like if somebody clicks on this or changes this then we just want to set the values we just want to send the values to a function called handle actors and we want to send those values inside of that function so i'm going to say values and just send them here okay so we are going to create so const handle actors is just going to be a function that is going to receive values and we are going to log them out just so you can see what is going on right here so we do cause log values okay great so if i save this and now go to my browser we go to next movies refresh this and if i go filter by actors as you can see now we are getting the actors right here and if i click on robert de niro we get an array with that value right with that whole movie actually so if i do another dude so let's select leonardo dicaprio then we get this right so this is actually now sending all of our movies right here uh we don't actually want to do that but we just want to send the ids of those movies so how do we do that so i'm going to go to my code editor again and here in handle actors i'm going to actually map the values so values is going to be map and we are just going to say actor actor id dot id okay and what this is doing is just creating another array and in that array we are just sending the id of the actual movie we are not sending the whole movie so if i save this go to my browser refresh it again let's now select robert de niro and as you can see i just get an array with one so here's an actor with an id of one if i select michael nyquist i get one five let me make this bigger and so on so now you can see that we have access to the ids of those actors and this is important for us because if we go to movies movies and then we do actors id equals three we are going to get all of the movies that have actors with an id of three so you do actress dot id equals three and we get inception and as you can see we have leonardo dicaprio in that movie and also i said it said leonardo dicaprio to also be in big lebowski although he doesn't act in that movie so you can see him right here so strep provides you with with a very nice api to filter your data so we are going to use that api to filter our movies great so we need to do the same thing for genres now i'm just going to add a br tag right here and i'm going to paste in the select box for genres so we are getting uh option.title for our label option id for our option value uh options are going to be genres which we are getting right here and uh we are going to have a placeholder of filter by genre as you can see we don't have is multi right here because uh every movie can have only one genre that's how we set up our strep back end so i'm not going to change that you can see how you deal with multiple filters in this box right here and for this i'm going to also do on change and i'm just going to send the value to the handle handle genre function which is going to be pretty much the same as this one i'm just going to say value and if i save this go to the browser now we have two select boxes refresh it let's check it out so we have sci-fi comedy crime if i click sci-fi i get id of one for comedy i get id of two and so on uh also you see that we are getting all of the genres so we need to do pretty much the same thing like we did right here uh for our actors and uh we are actually just want to send the value id instead of the whole value so if i go here refresh this now if i click on sci-fi i just get one if i click on comedy i get two and so on okay great now this works our filters actually our select boxes work but we now need to connect them to our back end and when somebody clicks on an actor we want to filter these movies by that actor also the same thing goes for genres and we are actually going to do the genres first because they are a little bit easier because they have just one option as you can see right here they they are not going to have an array of options uh that we can filter through so now to be able to filter this we are going to be using react query as i said at the beginning of this video so we are going to import use query hook and use query client you need use query client defined right here so you just do a const query client and we are going to use query client okay so next thing that we want to do is we want to set up our use query hook so you do const data and status so use query hook is going to return the data for you and it's also going to return the status of that data we're going to be talking about this in a little bit so you're just going to use query hook you can define your key which is going to be movies movies and then you want to define the function that is going to get your data so our function is going to be called get movies and also one more thing that we want to define which you won't use in every case but in our case we will because as you can see right here and get server side probes we are already getting the movies so it wouldn't be advisable for us to get the movies again on the client side so to get around that you have something called initial data and we are going to set the initial data to be movies so once our component mounts it's not going to get go and fetch our movies for us again uh because we already fetched them uh inside get server-side props but it's just going to use this these movies right here to display something on the page and as you can see we are now calling our movies data not movies so we need to change something here so right here where we are mapping our movies we are going to say data instead of movies and everything else stays the same okay so now uh i can't save this just yet because as you can see we still don't have this get movies function and good movies function is just a simple async function that is going to get our movies and we are just going to copy it from right here so i just i'm just going to copy this define our function so as you can see it's an asynchronous function then i'm just going to say constraints await fetch movies we also need to define our api url i'm going to define it right here so that we have access to it and now instead of this right here we just want to return res json so this is our get movies function okay let's see how this works right now so if i save this go to my browser refresh it everything is cool right here so everything works this is because we are getting our initial data first of all from our server and then we are displaying it with this initial data right here but what if we didn't use this so what if i deleted this and i actually wanted to get the movies from the client side first of all and display them right so as you can see we are using data as a variable not movies so if i save this go to my browser refresh it as you can see we are going to get an error now we are getting this error because while this component is mounting we still don't have our movies we still didn't get them so we need to do something right here right so what we want to do because we have this status variable we can check if that status variable has a value of success and if it does then we want to display our movies so you do status if status is equal to success then go and map our movies okay so let's save this go to our browser and try this again now we are getting our movies from the client side so if you refresh it again we are not getting you from the server side but from the client side and what we also want to do right here we just want to add two more checks for the status and you can do them like this so we want to check if the status is loading then you want to just show i'm loading your movies and if the status is there then we want to show something went wrong before we display all of our movies or even not display them if we get an error so if i save this and go right here so all of this is done by react query if i go right here and change this to be just movie movie without the s so uh now this should not work so if i save this go to our browser refresh it now as you can see we are loading the movies loading the movies loading the movies wait for it wait for it and something went wrong so what happened right here so react where it works in a way which you can configure it doesn't have to work like this but this is this is the default of react query it uh it's going to retry to connect to your api so what happened right here is it's retried i think three or four times so it goes to our api tries to get the movies it doesn't get them so we get the message loading the movies it goes one more time and then one more time then the fourth time when it doesn't get it it just says something went wrong because we got an error so as you can see right out of the box react query can provide you with nice way of showing showing the errors or loading or whatever you like okay so let's fix fix this and make it be like it used to so we want to get the initial data initial data is movies and now everything should work fine okay so now we are getting our movies however our filters still don't work we are going to get to that right away okay so now let's finally filter our movies by genres and how do we filter them through our api so you just go to movies a question mark genre as you can see we have genres right here and if i do genre id is equal to three i will get all the movies that have genre with the id of three so that's good fellas and fight club right okay so we need to send that to our api now we are going to go to our code editor and we are going to send using react query our query key so first of all we are not going to leave this as a string but we are going to wrap it inside of an array and this is going to be our query key which is going to be sent to this get movies function and in that query key i'm going to define an object which is going to be called genre and it's going to receive genre id genre id okay so to receive it once we change something in our select boxes i'm going to uh first of all import use state because we are going to be needing a bit of state right here and then i'm going to above this so above use query that is very important define that a use state so it's going to be const and we are going to call it genre id and the function for that is going to be called set genre id and that is going to be equal to you state and the genre id is going to be by default null so what we want to do now once somebody selects something from this genre box we don't want to use this handle genre uh i use that just to show you what we are getting from this but i actually just want to use set genre id and i want to send the value dot id to it and then our state in our component is going to change so the genre id is not going to be null anymore but it's going to be some number of the genre we selected actually the id of the genre we selected okay great so how does this work so first of all we need to access to our key inside of our get movies function and to take a look at the key we can just log it out key save this and now if we go to the browser refresh it as you can see we get the query key right away and the query key currently has parameters of movies and genre of null but if i change this to be something like comedy now as you can see we get movies but the genre is 2. great so what can we do with this well first of all i'm going to access that genre and i'm going to create const genre id right here and i'm going to do key query key we are going to get the second item in an array as you can see the first one is movies and the second is this object of genre and then i'm going to do that genre and now if it comes log this out save it refresh it again if i change this as you can see we get the key right here great so now we are getting the key actually id of our genre i i'm pretty new to react query myself so i'm not sure if you can access these keys these query keys in some different uh and a little bit better way but this is going to work for us so what i want to do now is i'm going to delete this and add an if statement which is going to just check so if there are any genres it's just going to check if we have genre id so you may not have it if you are just filtering actors you may not have genre ids so i'm just going to do genre id so if we have genre id then i just want to return something like this right so when something changes down here in our component it's going to go to get movies it's going to check if there is a genre id and if it is then we are going to go to movies genre id dot genre id so we are sending the id of the genre right here and then we are returning that json since we are returning it here this part of code below our if statement is not going to run anymore so if i save this and now if we go to the browser as you can see this already works so let's refresh it again so if i choose movies by comedy i get comedy movies if i choose sci-fi movies i get sci-fi movies if i choose crime i get crime movies and uh now when i do this again this is actually loading through cash it's not fetching our movies again okay so this was uh for our genres now let's take care of the actress as you will see actors are a bit more complicated because you can select multiple actors right here but as you will see it is not that hard to do so now for the actors we want to do something similar that we did for genres we are also going to use state here so we are going to get actors ids since we are getting an array with ids and we are going to use state which is by default going to be empty array here we are going to define actors to be actors ids okay so we are going to define this and we are going to send that to our function inside of our query key and down here we don't want to use hand lectures because as i said before i just use that to show you what we are getting and we are going to actually be using the function that we defined inside of our use state which is going to be set actors and then you don't need hand actors and handle genre right here anymore you can remove them so now we are sending genre ids and actors to our get movies function okay and to see that this works let's just go to the browser and if i do something like jeff bridges and leonardo dicaprio if we go to our query keys you can see that now we have actors and actors have an array with two items in it which are two and three great so we are getting the ids of the actress so how do we actually filter movies with multiple actors well very simply you just do actors id is equal to 30. let's do something like this so uh you do actors id is equal to three and actor's id is equal to eight so it's going to give you all of the movies that have either of these actors in it so as you can see this one has the actor with a id of three and also within id of eight and this one is just has the actors uh with the id of three which is leonardo dicaprio so this is how this works so what we need to do here is we need to create this string something like this which but we are going to replace this hard coded ids three and eight uh with the ids that we are getting from our select boxes so how do we do that well we just go to our code editor and right here we can do something like actors id ids is going to be key query key uh we are getting the third item in our array and we are getting the actors object so if i was log this out save it go to the browser refresh it so i do okay so something went wrong actors id is not defined i screwed something up so there's ids not the actor's id okay refresh it again try it out okay so jeff bridges great great great so as you can see we are getting this array now of course just sending this array won't work we need to create a string for that array so how do we do that well we are just going to actually create another array so i'm just going to do map right here so remember when using map this is going to create a new array from this array that we are getting and we are going to use the id to create with template variables something like actors dot id is equal to id okay now if we save this go to the browser see what we are getting sorry that i'm going to maybe slow through this but i just want to give you the full picture of what is going on right here so now if i go robert de niro as you can see then i get a string which says actress dot id is equal to one then i can choose few more actors right like this so now i get an array which says actress.id248 great now we need to concatenate that array into just a long string that is going to say actors dot id equals two and actors dot id equals four and actors dot id equals eight uh so that we can send that to our api so how do we do that well actually pretty easy you just do something like this so you do actress query string is equal to actor ids so this is our array that we created just now with map and we want to join everything inside of that array and between it we want to add this ampersand sign so if i cause log this out actor square string now if i save this refresh it we are doing this for the millionth time uh if i do something like this and then if i do something like this as you can see now we are getting this string right here actors id is equal to 2 and actors dot id is equal to three and if i add some more actors then we are going to get the string that we need so that we can query our api great now all that is left to do is j we just need to check if the actors query string exists and if it does uh then we want to send that query string to our api to filter our movies by actress and to do that you just do something like this i'm not going to type it all out so we are checking if actors query string exists then we want to go to the movies and send that actor square string and then we want to return this json save it go right here and as you can see this already works but i'm going to refresh it again choose the movie for example with michael nyquist and we get nothing because we don't have movies with michael nyquist if i remove this i'm gonna choose someone else let's say leonardo dicaprio so we get two movies uh we get ok jeff bridges keanu reeves come on they're all acting in the same movies uh campbell scott so we get ghostbusters uh brad pitt so we get fight club and so on right and now all that is left to do uh is to cover the case when we are getting genres and also actors which is going to be super simple because we already handled genre ids and actors query string so now if you want to query actors and genres uh we have to do this first so we want to check if genres and act square string exists then we want to await and fetch movies genre id is going to be genre id that we're getting from here and then actor square string and that's about it so if i save this go to the browser now i can query the actors so robert de niro campbell scott and let's say brad pitt now you have crime crime comedy now if i wanna also uh filter the movies by id by genre so i can do something like crime and then we will have only cry movies or comedy then we will only have ghostbusters if i choose sci-fi we will get nothing and that's about it so there is just one more thing to handle and that is as you can see we don't have this x in this select box so i can reset this box but i can still uh reset this box right here and we will quickly fix that so you just go to the select box and add is clearable is clearable save it and now if we go to our browser as you can see i get the x right here so if i click it i'm going to get an error and this error is because we don't have any value right here so we just go to our code editor and here we check if the value exists if it does then we want to send the value id if it doesn't then we just want to send null and that's about it so if i save this go to the browser now refresh it again choose some actors jeff bridges brad pitt so choose crime and now if i want to reset the genres i just click here it works if we want to reset everything also click here and now our list is reset okay guys so this has been it uh for this episode uh my advice to you would be to use react where wherever you can it's going to make your application so much more performant so that you don't have to do all of those checks caching and everything by hand you can just use react query for that and also if you want to know more about reguri definitely check out the documentation of course and also check out the videos video series by net ninja he explains all of this in a little bit more depth so anyway thank you guys for watching and i will see you in the next one [Music] you
Info
Channel: Watch and Learn
Views: 21,871
Rating: undefined out of 5
Keywords: react, query, javascript, nextjs, tutorial, filters
Id: 1GLQROeWoC4
Channel Id: undefined
Length: 40min 41sec (2441 seconds)
Published: Mon Feb 01 2021
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.