GraphQL Tutorial #22 - Adding a Front-end

Key Takeaways

alright then so this is the situation now we have our Express up and graph key our server built on nodejs and we've hooked this up to MongoDB so when we make test requests from the front-end in this tool called graphical we're sending those to the server and the result functions over here going out to MongoDB to retrieve the information we need return it to the server which is then determining what data to send back to the user in the browser dependant on the query that was made so this is all well and good we've kind of taken care of the right-hand side of this equation all of the server and the database stuff but ideally going forward we don't always want to be just making requests or queries from this tool called graphical I imagine at some point what we'd like to do is make an application in the browser some kind of website and then allow that to make queries to the graph of our server over here and retrieve data from it so it can show it to the end-user using that website so we want to replace graphical with some kind of app we're going to use react to flush out an app on the front end now because graph QL query language is not JavaScript although it looks like it is not then out of the box it's not understood by react or any other kind of JavaScript framework on the front end now to help us kind of bind graph QL to our application we're going to use a graph QL clients and one of those is called Apollo so this is the thing we're going to be using to help bind graph QL to I will react app so that we can make queries using graph QL to our server all right so just to break this down a little bit more we're gonna have our react app we're gonna have a couple of different components maybe even three but it's gonna look something like this we'll have a book list component which will render a list of different books then we'll also have an ad book component which will be a form of some description to add a new book to that list so in both cases right here these components are going to be making queries right to the server this top one to get a list of all the different books and this one right here to add a new book to make a mutation so the way this is going to work is we bind queries to our components right and the way we do that is by using this Apollo clients so Apollo can help us create a query and then bind that query to a component so that when that component renders in the browser automatically behind the scenes Apollo is handling that query to the server and returning any information so that we can show it inside the component and this works really well with react and you'll see exactly how this works as we go forward all right so when the graph QL server receives that query then it's going to go to M lab but get the data and return it back to us so that's basically how this application is going to look now to flesh out this front-end application we're going to be using this create react app okay so you can find that on github I'm going to leave this link down below it's by Facebook and it's really simple to use but basically all we're going to be doing is creating a react app using this command in our console so we're going to start doing that in the very next tutorial