Build a Portfolio and Blog website using Next.js, GraphCMS(HeadlessCMS) and Tailwindcss - Part 5

hey everyone hope you're doing well today we're going to be continuing in part five by adding search functionality to our blog now just to recap this blog is statically generated and what that means we're using the get started props function within nextgs this is executed at build time the data is fetched at build time and this static html is then just served to the user and the keyword here being static html now when we talk about searching of course on this blog where we have you know only a few posts it might be okay to just filter the the static data here however i want to show you guys how you would do it with larger sets of data so an example of how you could simply filter this is you know like on my blog so if i just search for react you can see it just filters the existing data and if we look at the github repository for this you can see if we go to our blog page you can see we've got the search bar here um this input and we are getting the data within get static props we're passing it to our component here and then this blog post is what we're actually um is what we're actually displaying here blog posts we're mapping through the blog posts and every time the search value will change um we're going through this filter here and it's literally just filtering what we have um what we've already fetched and passed um from the stack generation so there's no data fetching going on when we're doing this um so if we had 100 blog posts i mean i would definitely set it up differently but um we would be just filtering those 100 blog posts that were fetched um but if we only fetched 10 blog posts and we wanted to paginate then our search suddenly wouldn't work because it would only search the 10 that we'd um that we'd already fetched so that is um that is actually fine for some use cases however we're going to be doing um like actual data fetching we're gonna make calls to our content management system to properly fetch our posts so the way we're gonna do that um let me close out of that obviously this is actually generated and we want to we want to maintain that for search engine optimization and and performance as well so the way we do that is by we'll continue to use gastag props and we'll take the data here that we get from build time and we'll display that initially and then once that is displayed any further data fetching we want to do on the client side so we're going to use um use swr which is a hook you can read more about it but it integrates really easily with next yes you can see here we do the fetch within get stack props um we will pass the initial data that we fetched at build time to um our use swr hook um which will then take over any subsequent data fetching um it's an example of that if you wanted to do stack generation but you also wanted this page to refresh when you came back and focused on something you know you can do that with swr um so let's let's get started and the first thing we're going to do of course is we're going to need a search box so if we add that in um let's add that in here so we just want to input like this and we're just going to do it as a controlled component so we're going to do import use that from react like so um and then we're going to say const search value and set search value equals your state and set that to an empty string and then on the text field here we'll say the value is going to be the search value and then on change we want to unchange there we go unchanged we spelled it right i'm just going to take in an event like this and we're going to set search value with the event.target.value like so so we should now have um a search box and if we inspect this and we go to um our react dev tools you can see that our state is updating here upon keystroke so that is working that's how you do a simple um simple i guess input field with react now i want to do some um simple styles for this so first of all i just want to do outline none we can add a ring when we focus so do a ring two and then ring dash i don't know gray 900 it's pretty dark website isn't it um make this full width we'll make it rounded 200 something like this i need to add border and we can increase the height of that then we maybe can just put some padding on the left we can do large text and we can do maybe text gray 800. and then we can also add placeholder um search blog posts like so so i think that is fairly good we don't want this margin particularly now and then actually we could do with just having a title the block and we can make that text 5xl text gray i don't know 600 i don't like okay it looks amazing i'm being a little bit sarcastic though cool so i think this is relatively acceptable um however it doesn't do anything just now so let's um let's make this work so at the moment where we're fetching our data we're using this get post function um which is using the request library um and executing this function now we want to do the same thing however i'm going to pull it into i'm going to pull it into this file here um into our index so let's import and we can do request from graphql request like so and what i want to do is create a fetcher function so fetcher is going to be and the fetcher function the request function essentially takes in um the endpoint the query and then we're gonna pass the variables as well so our fetcher function is gonna take the same the endpoint the query and then variables and basically we're gonna use the request um and pass that the endpoint query and variables like so um we don't need this getpost function now so instead of a waiting get post we're going to fetcher and then we're going to give it the end point which is going to be the same it's always the same because it's graphql and then the query um which is the get post query so we'll just take everything inside here just format that and we should be good so we're not passing any variables right now and we should get the same result when we refresh we have our posts so that is great and nothing has changed we're literally just essentially doing the same thing in a different way however what we can now do um is if we import and you're going to need to install swr sorry i already did that so if you do npm install swr like this um and then start your dev server again and we're going to use the use swr hook and we're going to do that right underneath where we've used our um use statehook so if we take data and error equals use swr and then this is going to start to look weird so the first thing that i want to look at is we're going to be using um we're going to be using some variables now in the query variables i've got this setup down here um we're going to pass json so i'm going to call it search let's just call it search value and i'm going to give that an empty string right now and then the way we do this is we're going to write query um because it's a query um get post and then inside of here we're going to take the posts and we'll pull off what we want so we want the id um title the date the slog and i think we take the offers name that should work we're getting a bit of an error here because we're not using this variable um do we have a description cool so let's leave it at that for now i don't think so the title that description and author's name that's cool so now what we want to do is we want to do the posts so let's order them by um i'm going to use the date descending um and then in this get posts here we're going to declare our search value variable which is going to be a string and then we're going to say where and we want to do title contents the search value just like that let's purify that and do that so now if we change the search value you can see at the moment the search value is an empty string so we're not getting any um any filtering at all on that but if we change this query variable here uh which we're passing to get posts to fetch you can see here fetch in youtube channel and we run the query again we have now just got the one result which is exactly what we want when we type in our search bar and it's it runs this query we just want it to return the ones that have this search query in the title perfect so let's take this query um and let's start getting it into our hook so we're going to pass the end point let me grab that again so we've got the end point the query um the variable here is just going to be the search value um but what i actually want to do if you read into um the swr documentation it shows why we're doing it like this um basically it's to prevent um if we pass an object as a variable it's going to continually fetch data and we really don't want that so we're going to do is we're going to um we're going to take the endpoint and the query um i'm gonna use our fetcher function which has the end point the query um and then we're gonna pass in here the search value like so um and i think oh yeah and then we need to also patch our initial we also need to pass yeah here our initial we've got our search value this should be an array um so we pass an array of arguments to this so search value is the last one in the array and then we can pass our initial data which is going to be our posts like so so i know that that is pretty um complicated it seems um hopefully this makes sense we've got our we're essentially in a in a roundabout way using our fetcher function with the endpoint query and then our variable which is going to be this json search value here which is of course coming from our search value stat um and then we're using the use swr hook with the endpoint and the query like that so what we need to do now is instead of doing pause stop map we're going to data dot post.map because we are giving this to um our post we're given to this hook as well and then we don't need this console log but what we can do is if we can say because we're also taking any errors so if we can say if there's an error um we can just return the div let's return let's do like this div and go away if there's an error return a div why isn't it r completing div with a h2 of there was an error with the fetching like so now if we've done this correctly what i'm going to do is i'm going to add another argument here revalidate on focus to true and what this does um basically when we tab out and come back in it's going to perform another effect to um you know re-fetch the data so if i just refresh the page and go into our network tab let's have a look at what is happening so our initial data is not actually loading it's going to date because of it fetcher post status we got paused here um initial data equals posts i think this is why there we go perfect so we've got our initial data now and if i switch tabs and come back you can see there's more requests been made so we've got three objects the search values nothing if i now type in fetching um you can see it's filtering it down to what we actually want next so i like it or it's making a request on a keystroke i think where you look at modern websites nowadays if you're searching someone on facebook or you're searching video on youtube um or even on google you're getting instant feedback as you're typing and i think this is actually a really cool way to go about it you could set this up differently if you wanted to have a button um it would be quite different to set it up like that however if you use the s2lb documentation you should be able to figure it out um but i really like it doing it like this so that it gives you that instant feedback for the users so this is how we will do searching um and like i said i know that this seems quite complicated however we've got our fetcher function here which is essentially just using this um this request from graphql request i don't know where this div has come from um our fetcher function here we're giving it the endpoint and the query um and that's been run in getsite props and that's given us our stack data the stack data has been passed to the used swr hook which once the page is loaded is then taken over on the client side now again it looks weird we're passing the endpoint and the query to the use swr hook along with the search value which is a variable but then we're actually running it inside of this other function um like i said if we just passed the variable here and we didn't do this it would actually still work however if i can demonstrate this it's probably going to give us some sort of infinite request situation going on yeah so you can see what's going on here um yeah so there's no query found potentially it does [Music] the ordering doesn't seem to right it does work um but my point is this object will be created new every single time and it will give you infinite data requests uh if you get that set up correctly um so it will it will work but yeah you will just make hundreds of requests in a matter of you know 10 20 seconds while someone's on the page which is not what we want so to type fetch we're making five requests but actually we're giving instant feedback to the users so i like that i think it's worth it so hopefully this shows you how to do search now the next thing that i want to cover is pagination um and it's very very um similar the way we're gonna do it um we're gonna be doing it within uh the client side as well and we're gonna just pass more parameters to here so we've we use the first and the skip so if you want to give that a try on your own you're going to need some state to track the current page that you're on and then you will update your request um you will have the variable also for the current page um so you might have not just a search value you will also have you know current page so then when the current page changes um you know you will skip the first if it's page one and you haven't fall per page for example you'll skip the first fall um so have a look at that and see if you can figure it out on your own um if not then there is a video coming about it really soon i hope you enjoyed this one and i will see you in the next one

Channel: Adam Richardson

Views: 559

Keywords: next.js, react, data-fetching, useSWR

Id: FDeqJbJ0Y3Y

Length: 22min 39sec (1359 seconds)

Published: Wed Jul 21 2021