Crash Course: Build a Headless WordPress App with React, WPGraphQL & Apollo Client

hey ferdi have you heard of this new rock band called one zero two three megabytes one zero two three megabytes no can't say i have oh yeah they haven't had a gig yet welcome to headless wp rocks today is an exciting day because we're building our first headless wordpress application from start to finish there's nothing to install nothing to configure you can build the whole app inside of a single code sandbox browser tab and we're going to build the whole app in only about 45 minutes if you're a web developer who has skills building traditional monolithic wordpress sites but you've never built a headless app before and i want to get a feel for what that's like this is going to be an excellent video for you the app we're going to build is called wp graphql posts finder we're going to give the user a text input that they can type a search string into when they do that we're going to save that to react state and also fire off a network request to find posts on our headless wordpress backend that match that search term when the results come back we're going to take those results and then render them as a grid of cards on the page and then the user from there can find the post that they're interested in and click on it to open that in a new tab toward the end of the exercise we're going to find a performance problem though where every keystroke the user enters we're firing off a separate separate network request so we're going to see how we can debounce that user input and only uh fire off our request to the headless wordpress backend after a certain after user's done typing after a certain duration to get started with this project head on over to this url code sandbox.io s wp graphql posts finder and then this is blncx and this link will be included in the description of this youtube video once you've done that you should land on a very simple react application that looks like this so you can see that we have um just the base html file here that the page is built on there's a very simple index.js which just grabs the element with the id of root and then renders the app component into that i have some styles i've written for you ahead of time that also get imported into this file and then lastly we have our app component here which doesn't do much at this point just has a wrapper div here the class of app and then our h1 that says wp graphql posts finder so with that we are ready to roll so let's take a look at our finished application and think about what we need to put in place in order to arrive at that final solution so here we have an input for the user to type in their search query here so we'll need to build that the string that they type as well we'll need to store that in some state so i'll need to wire that up i will also need to fire off a graphql request so after the user types and then we store that value in state we'll need to fire off the graphql request to get any matching posts and then lastly we'll need to render those posts on a grid like this with fallbacks for if there are no matches or if we're loading things like that so if i type gibberish here she get loading and then no matching posts found for example so really four i think primary things that we need to be concerned with implementing so let's call this area of our application below the title that does all that stuff let's call that our posts finder so this will be a new component for us so i'll type that in close finder and we'll import that and let's have that live inside of a new components directory as well just like that all right so we'll get in here since we haven't created that just yet um we'll grab post finder and then inside of source let's create a new directory called components and then inside of that our new file so that'll be plus finder.js all right in here we'll need to import react from react and then we'll create that component that we just talked about so posts finder there it is all right and then export default posts finder so in here i'll need to do a few things like we talked about so let's summarize those so we'll do um we need our text input that the user enters text into we'll need to store a search query in state like we talked about third thing was fire off grab ql request to our wordpress backend and then the last one would be when this request resolves to be display the results so that would be any of the matching posts so from here i think we can pick these things off one by one so let's start with our text input and then we'll store that in state kind of the first two two items here so whenever we store anything in state in react uh one of the two functions we can use is use state so let's go ahead and use that for this because it's a simple string of text i think that'll be appropriate so we'll call it search term and then we'll do set set search term and then let's use state and we'll initialize that to an empty string let's also import use date from react so we can go ahead and work with that all right so now we have some state in which we can store our search term we've already handled our first item there let's wire up the text input though so we can actually modify what's in that search term there so to do that let's return some markup so this will be a form and we'll go ahead and stick a few attributes on this form so we'll do method equals post we want some of our styles to apply we'll do cat class name equals search form just like that and then we want to prevent this form from being submitted in the traditional way on the web so we'll do on submit equals grab the event we'll do event dot prevent default just like that all right i'll give that a save so now we're looking like this inside of the form element now we need our actual text input so let's add that next this input will be a text field so i'll put input type equals text just like that you'll need a few other properties as well next up let's do what the value will be um so this will be a typical react controlled input here where we'll take the current value of search term and make that the value and then each time the value changes when the onchange event is fired then we'll call set search term to update it in state so the value as i said will be the search term just like that and they'll need an unchanged so when a change occurs we'll take the event dot target dot value and we'll call set search term to set it with that just like that last thing is we'll just add a placeholder we will say search for blog posts so that looks great next i think we should put this mark up here inside of its own component though so inside of components here let's create a new one and we'll call that search form so we will import react from react we'll call our component search form all right and then export search form as the default all right so in here then this is where we can just copy and paste all the jsx we had written here i'll copy that and paste it into this component and of course it's missing a few things it needs search term and then set search term as props so let's go ahead and pass those into it there we go now it should have the two props that it needs and it renders out the form back in post finder instead of all this stuff we instead just need to render our search form component now all right so let's import it and then instead of all this we'll call search form remember it needs these two as props so grab these two there we go so i think we've nailed this item on our list as well so now we have our text input and when a user types in it it is storing that in state so the next thing we're going to get into is actually firing off that graphql request before we do that though we need a way of sending and receiving graphql requests in the first place one of the easiest ways to do that is to use apollo client so that's the library that we're going to be setting up next to learn how to get started let's head over here to the apollo client get started page in the documentation so this page starts with the installation step and it says you need these two packages from npm to get started so if you're working on this project in a local dev environment you can run this command to install them for us because we're working in code sandbox i'll just copy these one by one and then we'll add them as dependencies so i'll paste in apollo client hit enter and i'll go back and grab graphql as well all right so now we have both of those and we're ready to keep rolling all right so the first step is to create a client we need to do something like this ours will be identical except instead of this uri we'll be using our own for a wp graphql backend so i'll go ahead and copy all of this and in our project we're going to create a new directory for that to live in so inside of source we'll create services and then inside of services we'll create apollo.js now i'll paste in what's on my clipboard right now nothing's being exported though and we'll need that to use it in another file so let's go ahead export that client that we're creating and for the url we're actually going to use the wp graphql demo site so let's see what that looks like so if i go to demo.wpgraphql so here it is here's the graphql demo site this front end isn't used anywhere but its graphql data is used to power all the examples on the wp graphql documentation site so what we can do is use that and tack on a graphql endpoint at the end of it like this and we can run our graphql queries against this and get real data back so this is great i will copy this and then back in our project we will replace the old uri value with that new one let's head back to the apollo client documentation so if we scroll down a bit we'll find this section connect your client to react so we'll need to do something very similar in our app so we'll go ahead and copy this line import apollo provider from apollo client and back in our app we'll find the app component and go ahead and import it and i'll do a little extra cleanup here all right back to the documentation let's take a look at how we need to use that so what we're going to do is wrap our whole application in this apollo provider and we're going to pass to it as a prop our client that we created so let's copy that line as well and then back in our app component we'll paste that in and then have our closing tag right there all right so the last thing we're missing is this client then so let's import that import client from and we put that inside of the services folder and then we call it apollo dot js so apollo provider here is using react context to provide the ability to run graphql queries from anywhere inside of our whole application component tree so that means nested inside of posts finder somewhere where we need to run our queries we'll be able to go ahead and do that back to posts finder so here we're rendering out our search form and then whenever the user types into that search form we're saving that value in state then it's just kind of hanging around there we're doing nothing with this search term really so at this point let's actually make use of that we're going to add some new jsx here so first we'll add a new fragment like that and then underneath this search form let's have another component this will be the new one that displays our list of posts underneath that search form so this will be posts list all right and this new component needs to know about what the search term is in order to actually fire off the graphql request and you know know what which posts to display in the list so go ahead and pass that in as a prop there we go so this post list we need to import as well and the next step is to go ahead and create that now so inside of components we'll go to create file and post list dot js so let's go ahead and import react and then we'll create this post list component there we go and now remember we were passing in the search term as a prop so let's go ahead and accept that there we go and for now just to make sure everything's rendering let's just return a p tag with that search term there so now that should work so let me try this out if i type something in here there it is um so our state is being updated and then it's also being passed into post list as a prop and then displayed here so at this point let's get started with firing off our graphql request to grab the matching post let's head back over to the apollo client doc site here and from where we left off i will go to fetching and then we'll go to queries to see how we can query from for some data from our graphql backend so scroll down a bit and we'll see uh this executing a query section here so this shows us what we need to do in a nutshell here so let's copy all of this because we'll need to do something similar in our app and we'll paste that here all right so for us rather than get dogs this will be get posts like that and then our query will look a bit different we'll name our query uh the same as the the const name here just for consistency let's keep going with the documentation because we have to figure out how we're going to use use query so we scroll down a bit more we see this example it says you can call use query pass in your tagged template literal that you built up here with the query and then get a few things back from it so whether or not a client is loading or it's in an error state or we have actual usable data let's copy a few of these lines here all right so inside of our component we'll need something like this so instead of get dogs since we renamed it let's do git posts like that all right so that's fine for now let's get back to this question of what are we actually querying for here so to know what's even available to you in the graphql schema you can use a tool like graphical so let me pop that open here it looks something like this this is a free open source app you can just google graphical note the i right there and then you can pop in any graphql endpoint here and then see the schema that's available to you all the fields and connections and so on and you can build up your queries very easily so inside of this let me paste in that demo.wpgraphql.com endpoint uh that we were curious about i'll pop that in here and then um we'll delete this text and we'll start building our query so we'll call it git posts as we had before and now from here um you can hit control space to get a list of anything that you can auto-complete so here if you want to drill down to posts for instance you can do posts like that and on each post we'll grab the nodes and for each node we'll get the database id aka the post id for that post we'll grab its title how about its content so now that i've built that up i'll hit the play button to actually execute this and there you go you can see i'm getting posts back here from our back end so for this project we're actually going to search for posts we're not just going to get a list of of all of them we're going to need to only get certain posts so the question is how are we going to do that instead of git posts for us it'll be search posts really and for posts right here we'll need additional arguments thankfully there is a where query argument that you can pass and so we'll do where colon and then curly is and at this point we can search for certain things so there's a search parameter available to us so we'll do search i know the word align is in a few of the post titles so we'll do we'll search for posts that have a line only for instance and we'll just to keep things clean we'll do database and title only so when i search there we go you see i'm getting only the post to have a line back so that is great this is what we need um you can see however that i've hard-coded a line though how do we get this to be a variable so that we can pass into it whatever the user had typed in our search input right so we do that in graphql is to accept a argument at this level and give it a name so we'll say this will be our search term and we'll need to prefix that with a dollar sign just like this you have to tell graphql what the type is going to be um so for this it'll be a capital s string and to say that it's required meaning that this query can't run unless something is passed in for that um we'll tack on an exclamation point on the end now we can go ahead and make use of this variable inside of our query so instead of hard coding a line here we'll actually paste in our search term just like that and you can simulate uh passing in variables to your query by expanding this area here so if i click and drag on query of variables and just open up a an object like this i'll do my control space trick again to open what my autocomplete options are you can see search term is the only one that it's picking up from our query so i'll hit enter right there and now the search term i can type something else so we'll type graphql now for our search term and we'll fire it off so you can see that the string will be passed into our query as its search term and that will be used to actually perform the query all right so here we go so here are posts with um that have graphql in them cool this looks great so for our project we're going to need more than just database and title though let's grab the rest of the data that we need so we will get the link the author and when we drill down a little bit inside of author inside of author there's a node and then on that node there's all kinds of info about um that author but we really just need their name we're just going to list who wrote that post and then next uh we're gonna need the featured image so grab featured image okay likewise inside of that there's a node and then inside this node there is source url so that's where the image actually lives and we'll grab the alt text as well to display and that should be it for this application uh so let's run our query one more time um let's say something else here say post with the and then how about that should be a lot of them alright so let's make sure that all our data is coming back properly so i'm getting post ids i'm getting titles links here's the author's name now featured image is null but that's actually expected for posts that don't have a featured image so we'll scroll down a bit just to make sure they're coming through for posts that do have them and sure enough here's a featured image and the source url is present along with the um alt text so to keep that in mind sometimes we will have a featured image with those details or otherwise it'll be null if there isn't one so that's looking pretty good to me uh so we can go ahead and highlight all of this and go ahead and copy it and back in our application this is what we'll paste into our graphql query so back in our app um as i said rather than just git posts let's actually rename this search that'd be more appropriate so search posts and now i'll paste in everything i got there we go so i'll hit save okay so now our app is rendering and we're kind of stuck in a loading state here and that's because we have a problem and that is that our query that we've built up here requires that we pass in this search term string but as you can see we're passing in nothing all we're saying is i want to use this query here it is go and not passing in any parameters at all so let's go ahead and do that next so you can i add a comma after this and then an object and and type variables colon and then inside of curly's here this will be you know whatever the key is for that variable you'd like to pass in and then whatever the value is in that format so for us we're going to pass in the search term just like that and the the key and then the variable referencing are the same so we can just leave it just like that for our next step let's go ahead and render out different things for every possible state so we'll address loading we'll adjust error and then if there is data but it's an empty array like if no posts were found we need to address that case and also if there is data and there are posts in that in that array we actually have post to display so we really have four four cases to address here so a few of them we had copied in from the apollo client docs so for loading we're going to return this string so let's modify that slightly instead we'll just make it a paragraph tag just like that that'll be fine and then error we'll do something similar say error do error frowny face there we go all right so we've handled those two cases now let's talk about the other two so i mentioned if data doesn't have anything inside of it if it has an empty array we'll need to address that case let's do that now so create a posts found variable like this and we'll say we'll need to drill down to data dot posts dot nodes dot link so that thing is truthy then we'll know that posts were found so we'll just do a double bang right there to see if that's truthy and other thing we need to do is make sure it's safe to drill down to this level let's use optional chaining here and just put a single question mark all right so that is truthy well no posts were found we can render them otherwise we'll need a fallback case so let's see how that fallback case will say if uh not post is found what are we going to do in that case so we'll just return another paragraph tag similar to what we did in these cases above here and simply say no matching posts found just like that so i think we're ready for our final state that we need to address and that is if we actually have posts available to us so we'll get rid of the search term is thing here and instead we'll render something else all right so let's do a wrapper div first of all and for styling purposes we'll give that a class name we'll call it posts list here we go all right we'll close that did now inside of this we should be able to map over each of our posts and display those so we'll pop open some curlies and we'll do uh it'll actually be the same as this so data.posts.nodes that's what we want to map over we'll just need to remove the question mark right here all right so those nodes we can do dot map and we'll say for each post then we want to render something now so here just to make sure everything's working out let's just do a paragraph tag and we'll do the post title let me reload my app here beautiful there we go so you can see we're getting right now because there is no search term we're just searching based on empty string so we're getting all posts back like that let's search for the word align again and see if a few of these uh go away so al ign and there we go you can see our search is actually working uh so when the user enters something new here we're firing off a brand new graphql request and grabbing only the posts that match that and also we're going to want to render more than just the post title here we're going to render a component that we call our postcard so that's how we're going to arrive at each of these cards that we display on the list in our finished application so let's create that next so instead of this p tag here let's render a new component called post card this postcard will need a key as we said just so react knows which is which this has to be something unique to the post so thankfully for us we have post.database id just like that that's always going to be unique and i'll identify which post is which and from there we can do post and pass that in as a prop as well and have a closing tag there so get rid of our old paragraph with the title in it instead this is what we're going to be rendering all right i will need an import statement at the top and now it's our job to go create that next so inside of components let's create postcard so create file postcard.js okay i've created the postcard component here and remember we are passing to this a prop called post with that posts data and from here we'll be able to render out all the markup to create each of the individual cards let's start by destructuring some of this data so we'll need to pull off quite a bit from uh this post object so open up some curlies like that and we'll destructure the title for the post we'll grab the date we'll get the link we'll get author and remember this one was nested so we'll need to drill down a bit further into author and do node another set of curlies and then finally here this will be name and we could just leave it as name but just um to be even more clear with our naming i'm just going to rename that to author names all right so go ahead and do that and last one is the featured image like that okay i think that'll be all of them so now that we've destructured that data let's actually return our postcard so here we'll have a div and for styles to be applied we'll go ahead and apply a class name of post dash card just like that and we'll close our div all right first thing we want to have if you look at our finished application is the image so some of these don't have an image as we've said others do though so you can see this one at the top so we can check for that with a simple ternary here we can say if featured image is truthy then we want to render an image for that so we'll do img source equals and the source for that would be the featured image dot node dot source url like that alright and the other prop we would need to pass in is the alt text and then alt text would be featuredimage.node.alt text so i'll copy this and put alt text at the end all right and now we need our else clause here um otherwise if that's not the case render null and then uh next we'll create a linked title so here we'll say aahref equals and we'll put the link to the post there and then we'll close out our link so just like that and then in between these two tags will display the title of the post so this would be we'll use an h3 right here and then inside of our h3 tags we will render the title of the post so i'm going to give that a save and we'll just see kind of where we are so even though we haven't used all of our variables we'll just stop at this point and my app on the right i'll just give that a reload to start fresh so there we go yeah we're looking really good at this point we have um each of our postcards is being rendered out and we can see those that do have images the images are being rendered so that's great and then we have our h3 titles right there and each one of those is actually a link so this is looking really good now let's proceed with the rest of our markup here so after the linked title we want to apply a paragraph tag and then inside of that we're going to have the date so we'll say and then for the date if we just display this as is the format isn't ideal so we can just have a little helper function in this file that we pass the data into and gives us something a bit more human readable back you could use a date library to do something like this but for us you know we'll just create uh something a bit simpler so we'll do const format date and this will be a function that accepts a date and then instantiates a date object and i'll pass the date into that and then we'll need to uh call a method on that so we'll say to date string so let's try that out so i'll copy um format date and then down here we'll wrap date in that let's see what we get back there we go that's a bit better something um more human readable for the date that the post was published all right so with that let's move on to the next thing that we need here and that will be the author's name so here open author and then inside of the curlies called that variable author name just like that so you can see those popping through uh it's looking good um in our final application we had the labels bolded just for a little differentiation between you know what's the label and then what's the data so we go ahead and apply that now as well so inside of each of these we can just wrap the labels right here in a span so let's open that up and we'll give it a class so that our styles will be applied so we'll call it span class name equals and the class name will be text bold just like that we'll close that span and then right after the label so at this point let's take a look at our finished application so click this button to open it in a new window so we can see it in its full glory here so cool uh joe geographical post finder so as soon as it loads up it just uses the empty string just a query for for all posts right here and then you can search for others as well so search for the word align again boom there it is it queries the graphical backend and then re-renders as soon as it has posts there that's great while if a pulse line is loading we get our loading message that's great and if i check gibberish like this no matching posts found so this is super cool um everything is looking great uh but we have a bug here not so much a bug butter performance issue all right it's gonna be an interesting one to look into so let's for a moment uh pop open the dev tools right here and take a look at our network tab and we can see i have xhr highlighted here so we can see how many requests are being fired when the user types i'll type the word hello how about so a-b-l-l-o so you might expect that we would have one request if the user types that but we had h-e-l-l-o so we had one graphql request for every single keystroke um that the user entered here we're firing off all these requests and the first four or uh or so yeah first of all in this case we don't actually even need all we need is the final uh request to complete and we might even have race conditions where if one of these earlier ones were to complete before the initial one did maybe we'd have like a flicker in our ui where you'd have the results from hello being replaced with one of the you know the results from one of the other requests and then being replaced with another one it's just not an ideal situation so the solution is to debounce this we're waiting until the user has finished typing for a certain number of milliseconds and then we go ahead and fire off a single graphql request to our back end with the whole search string so let's see how we can fix this performance issue in the last part of the video here how do we implement this debounce situation like we talked about for our performance problem so to do that we're going to be pulling in a utility library called lodash which is a very popular library you might be familiar so i'll type lowdash right here on our dependencies and then hit enter to have that added to our project we'll import a function it has called the bounce all right and we'll get it imported into our project like that so let's see how we can make use of this now your first instinct may be to do something like this maybe you think well what if we take the bounce and then we tell it call set search term but do that only after a certain threshold like 300 milliseconds and you can call this function it says search term debounced something like that and then you can tell um search form hey when when uh somebody enters new text and you're about to you know set the search term instead of using this function instead we'll pass in the debounced function right so that it only runs every 300 milliseconds you may try that initially but that is going to be problematic for us because that means the user won't even see the updates to what they typed in this field until after that that delay so to make it more pronounced you know we could we can make it a full two seconds for instance if i type a character one two finally it appears here so obviously this is a terrible user experience we want the text users entering to be you know immediate so that solution is not going to work for us so how are we going to do this because we want search term to be updated immediately so that the search form shows what the user had entered here but we also want our graphql requests to be de-balanced and delayed so how are we going to wire that up so we could do this a couple ways the way we're going to do it here is store another piece of state so instead of just the search term right here we're going to store another one called debounced search term so one will be used for displaying to the user and the other will be used for querying so we'll say debounce search term here and then set debounced search term like that all right and now we can set these independently so let's create a new function called handle search term change like that it will take in the new search term like that and it will be responsible for setting both of these so the search term that the user sees we of course want to update that immediately so they get that visual feedback uh our debounced one though how do we manage that so this handle search term change that's uh now what will be called from search form and just for consistency let's go ahead and rename that prop to to match that so we'll call it that and then inside of our search form component instead of set search term let's go ahead and rename it to handle search term change just for consistency there so that's great so now whenever the search term has changed this will be called and we can set our two pieces of state independently when we're setting immediately we still need to set this figure how to set the second one here so you may be inclined to do something like this i'll just give it a poor name since we'll be saving this so callback function equals the bounce and then we will take the name of the function we want to call and then how often so like 300 milliseconds so now we have a debounced version of that function and now this callback function you might think all right cool now we can call that callback function and pass through it the new search term i'm done um but this won't work for us unfortunately if you try this it won't work out and that's because the function that that debounce returns and that gets saved in this variable gets replaced in every single render so every time the post finder component renders a new function is returned from d balance here so what do we do how do we get this function to stick around to to transcend you know renders of this component so the answer to that is a utility react gives us called use memo we'll need to memoize that function so we'll say use memo up here we'll pull that in from react and then we're going to replace this line with a memoized debounced function now so say const and i'll grab this so this will be set the amount search term but it'll be a memoized version of that function and then that is what we will wrap and use use memo just like that this accepts an inline function so an arrow function and this is where we'll stick our d balance and then set d value to search term so this we'll copy and we'll paste that inside of this function and we'll put comma and use mellow accepts a dependency array here to know how often this function should be should be replaced with a new one for us that'll be an empty dependency array because our function we're calling doesn't have any arguments there's no reason that it should change between renders so we're good at this point i will get rid of our old you know callback function right here and give it a save so this gets formatted a bit better so there we go and our last step is to grab the set debounce search term memoize that function and ultimately that is what we will call at this point cool so just to review our application now so the user type something into the search field and then handle search term change is called the new search term is sent in right here and we're updating two pieces of state but doing it kind of in a disjointed way here so we'll uh we're calling this one immediately set search terms so they see their immediate visual feedback for what they're typing and then the next one that we call is a memoized and debounced function that ultimately after 300 milliseconds of pause then it will called set d balance search term and set the search term we're using for querying to that new value the last step as you can see from the squiggly here is to make use of that now so when our queries are run inside of post list we were previously using search term right there and that's where we were getting our issue where we every single keystroke triggered a network request so now instead of that we're going to use our debounced search term so i'll copy that and then paste that in instead so give that file a save and now in a new window let's go ahead and open this up and we'll take a look at this so open the network panel we'll try this out so our app loads up there's just an empty string so it grabs the post based on that and then i search align great you see a single graphical request the variables were the word align right there and then the response that came back were just those posts that include the word align on our list so there you go there's your finished react application one cool thing too i haven't mentioned is that because we're using apollo client we get a lot of caching for free so if i type a new term here that we've never queried for before like by something like that you see it was loading momentarily there but now if i type a search term that we have used before like align it's instantaneous and actually if you look at the network panel no request is even made because apollo sees that we're running the same query with the same exact variables that we had previously so it just pulls that data from its in-memory cache and just displays those immediately the same would be true if we went back to having none of them like that uh to having no search term we would immediately get you know that list that we had before because it's only from the cash so it's pretty sweet so at this point you can pat yourself on the back you have successfully built a application that uses a headless wordpress backend and uses wp graphql to pull data from that back end and not any data but just pull blog posts that match the search term the user typed in here and then on the fly re-render this grid of posts right here um with our postcards with all the details about that post and then uh titles that link out to that blog post so congratulations and thanks a lot for coding along with me did you lock that go ahead and push that like button subscribe

Channel: Kellen Mace

Views: 1,026

Keywords: headless wordpress, headless cms, wordpress api, wordpress rest api, wpgraphql, wordpress, wpgraphql wordpress, graphql, react.js, reactjs, react graphql, web, website, wordpress react, apollo, apollo client

Id: KZnFoPgctho

Length: 47min 10sec (2830 seconds)

Published: Tue Dec 08 2020

Reddit Comments

[u/kellenmace]

🔥 I just released this free crash course on how to build a headless WordPress app using React​, WPGraphQL​ & Apollo Client!

It only takes 45 mins and you can code the whole thing in CodeSandbox!

Check it out, if you're interested.