Next.js GraphQL Tutorial - Launch Dashboard with SpaceX GraphQL API & Apollo Client

hey team we're gonna learn how to fetch graphql data using apollo client in xjs i'm colby feyhawk and if this is your first time here make sure you hit subscribe for future updates graphql is a query language that allows us to define the data we want and get it straight from our api it allows us to query complex relationships so we don't have to make multiple requests to an api in order to get a full set of data to make this request we're going to use the apollo graphql client using their library we'll be able to hook right in and make that request just like we would any other rest api client and for our data we're going to use the spacex graphql server it will allow us to search for the most recent launches that way we can show them right in our page and we're going to do this all inside of next.js particularly we're going to request our data inside of getstatic props so we can have our data available at compile time so to get started i'm going to spin up a new next.js app using create next app inside my terminal i'm going to run yarn create next app my space x launches and once it's done i can cd into my new directory and start my development server and i can click on localhost 3000 and we can see our new app next in order to use apollo we want to install the apollo client along with graphql as another dependency so inside of my project i'm going to run yarn add apollo and graphql and i can spin back up my development server now looking at our app we're going to take this page and we're going to transform the cards into different spacex launches we probably also want this title to be a little bit more descriptive so i'm going to start by inside of my homepage code i'm going to change the welcome sign to spacex launches and i'm going to change the description to latest launches from spacex if we look at our page we can see that we've already updated the title now as we're going through this app we want to make a request out to our spacex api where we can then take that data and inject it into our app like we mentioned before we're going to use get static props what that will do is allow us to make our request to the api right inside of this function which will make that data available as a prop inside of our app so first we want to define that function so below our home page code we're going to export a new async function called get static props and to start we're going to return a new object which inside of that has a property of props which also is going to be a new object to test this out let's first add our launches property which will be our data and an empty array but now because we're defining that new prop we can destructure our launches data straight from our home page function and let's add a console log statement for launches that way we can see what's actually inside so back inside of our app we can see if we open up the developer tools that we're logging out that prop now it's currently an empty array because that's how we're defining it at the bottom of our page under get static props which we can see right here so for our page we want to actually display the different launches so for our page we're going to reach out to the spacex graphql server so we can get those latest launches to start i'm going to first import the dependencies i need from the apollo client which is the apollo client itself in memory cache which is going to be the caching mechanism so when apollo makes a request it can read against cache first and also gql which is going to allow us to define our graphql queries now to make that request using apollo we're going to first need to define a new client so we're going to create a new constant called client and we're going to set that equal to a new instance of apollo client where we're going to pass in a new object where we're going to set the uri of that object to the spacex graphql endpoint we're also going to set the cache property which we're going to set to a new instance of in memory cache so at this point we have our new client we can actually make our request so now i'm going to actually make the query so first i'm going to await this new query since we're in an async function we can run the await command just like a promise and we can run client.query and we're going to pass in a new object for our configuration now inside that new object we want to define a new property called query where we're going to use the gql tag to create a new string where inside here we're going to paste in our graphql query now for our query inside of spacex lan we can use graphical to define what our query looks like here i'm grabbing a few things like the id the mission name the launch date i'm also setting a limit to 10 so i'm only going to grab the last 10 missions with that i can copy this query and i can paste it right into that string now finally because this will ultimately return some data we want to grab that data so i know that the top level object is going to be a data property so i'm going to destructure that and grab the data from that query to test this out i'm going to console log out our data objects and if we reload the page we actually don't see it inside of our web console so when our get static props function runs it's at compile time when it's actually trying to build the page so that means it's not going to run inside of the browser it's going to run on node but if we open up our terminal we can see that data is being logged right from node we can even see here that our data is included in array inside of the key launches past so instead of this empty array i'm going to change this to data dot launches past and now because i'm already defining the launches prop inside of the top of my function and also console logging it out if i refresh the page i can see that in the console i can now see those 10 results along with all the launch data so now that we have all that launch data inside of our app let's use it to build our ui to do this we're going to reuse those cards that we already have to start i'm going to use the launches prop that we're creating and i'm going to run the map function so for each launch i'm going to run this code in particular i'm going to return a new component which is going to be a new instance of these cards so if we look at the data there's a few things that we immediately want to use we want to use the mission name which we're going to use as our title and we can use the id as the key on all of our react elements so in the code i'm going to change the h3 to launch dot mission name and if i look at the page i can see that it's already showing me all those 10 mission names if you notice it's also showing those original four at the bottom so now that we're defining our map we can get rid of those and clean things up next i wanted to find a key on each of my elements inside of the map function and we can use launch.id now instead of this description we can change it to the date so we're going to put launch dot launch date local and we can even add a label that says launch time and we can see all of our times we can even make that a little bit more human readable by using the new date object and then we can transform it into a local string which will give us our standard date now finally we also get a link to the launch video so for each of these cards we can link it to that video with the video link so instead of this href i'm going to change it to launch.links.video link now if i go back to the app and i click on one of these cards we can see that it actually takes me to youtube where i can see the launch now we're not going to go through adding every single one of these fields to our app but there's a lot of cool stuff in here like for instance there's a mission patch which if we look at this field inside of our browser we can see that it's a nice little image that we can surface inside of our app and if we wanted even more data than that there's a ton of things that we can add like the different information for the rockets the cruise anything you really want to know about each of those spacex missions if you follow along with me you created a new nexjs app that shows the last launches from spacex we used apollo client to query that graphql data from the spacex api if you like this video make sure you hit thumbs up and subscribe for future updates thanks for watching

Channel: Colby Fayock

Views: 21,803

Keywords: next js graphql tutorial, nextjs, graphql, next js tutorial, next js graphql, nextjs apollo, nextjs apollo client, next js api, next.js graphql tutorial with apollo client, next js graphql apollo, next js graphql apollo client, graphql next js, how to graphql, how to use next js, how to use graphql with react, how to use graphql in next.js, apollo client, apollo graphql, apollo graphql tutorial, apollo graphql next js, apollo nextjs, next js apollo graphql, Graphql apollo

Id: oxUPXhZ1t9I

Length: 6min 44sec (404 seconds)

Published: Tue Dec 01 2020