Introduction to Create an eCommerce Store with Next.js and Stripe Checkout

Create a New Next.js App for an Online Store

Set up GraphCMS to Manage Data with a GraphQL API

Use GraphCMS Schema Models to Manage Page Content

Query the GraphCMS GraphQL API with Apollo GraphQL

Manage Product Details with a Custom GraphCMS Schema Model

Add and Configure Cloudinary UI Extension to Add Images From a Cloudinary Media Library

Set up Individual Product Pages with Next.js Dynamic Routes

Add a Shopping Cart and Checkout Funnel with Snipcart

Use Stripe as a Payment Gateway in Snipcart

Create a Product Category Graphcms Schema to Manage Product Groupings

Dynamically Add Category Landing Pages with Next.js Dynamic Routes

List Store Locations on a Page Using a Store GraphCMS Schema and Data

Add All Store Locations to a React Leaflet Map with Location Data From GraphCMS

Manage Map Effects & Dynamically Calculate a Map's Center with Turf

Support Multiple Languages with Next.js Localization

Optimize Media with Cloudinary to Deliver Smaller and Performant Images

Deploy a Next.js App to Vercel From GitHub with Environment  Variables

Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js

We are going to start visualizing what our data looks like by using graphcms' Playground. Here we can query our data and explore our content API right from the dashboard. 

We are going to use Next.js getStaticProps to query our data at compile time so we don't have to make the browser wait for that request when it's getting loaded. 

To actually make our query, we are going to be using [Apollo Client](https://www.apollographql.com/docs/react/).

https://app.egghead.io/api/v1/lessons/apollo-query-the-graphcms-graphql-api-with-apollo-graphql/subtitles

Instructor: [0:00] Now that we have some data saved and loaded into GraphCMS, we're ready to actually start querying our data. If you're still starting from the top, you can click this explore your content API right from the dashboard.

[0:11] Or if you navigate over inside of the sidebar to this play button, we're going to go ahead and click that and go to the API playground. This playground is going to give us the ability to explore our data in real-time.

[0:22] Additionally, allows us to actually save queries that we can later query in the future. To start, let's actually start visualizing what our data looks like.

[0:29] Let's head over to the explorer tab where we can see we have a list of all the different data that we currently have available inside of our content API. In particular, the first thing that we created was our home page, which is a type of page.

[0:43] We can see here in the sidebar, we have both the page singular and the pages plural, where we can actually start exploring that data. To start, let's open up the pages node, where if we start to look inside, we see that we have some options.

[0:55] We can also start to see all those fields that we created earlier, such as a hero link, the hero text, hero title. We have the ID, which is going to be associated with this actual page node. We also have the name which we added and the slug.

[1:08] Let's actually try to run this query to see what this looks like. What we can do is head over to this big blue or purplish play button. We can execute the query by clicking that.

[1:19] We can see immediately we get the results of what that query is actually going to give us right in the side where we see our home page with all the different details that we added in before available to us through that query.

[1:31] As we'll see later when we're actually creating new pages, we can notice that this is an array of pages. This is going to give us a list of all the pages that are available to us. Instead, when we are starting to work on the home page, we only want to query the data for that one singular page.

[1:47] If we actually start to go back and close this page's node, I'm going to open up the page node where we can see that we have this ability to query where a particular value is going to be set. We want to say where the slug is equal to home, which is the slug that we gave that page node.

[2:04] If we actually click play, we can see that it's automatically going to add the ID, but we see that we get that successful query. We can also start adding in all those other fields that we had before, such as the hero link, text, title. We can see the name and the slug again.

[2:19] If we click play, we have all that data still readily available. Most of these fields, depending on how you actually create the field, is going to just be a singular check box that you can add in and get your response.

[2:31] If we look at the hero background, for instance, if we open it up, we can see that we have a lot of values that are associated with that background. When we set up the hero background, we set it up as an asset.

[2:41] What that's going to do is whenever we upload that asset, we're actually creating an association with a lot of other properties with that particular asset that we uploaded.

[2:50] We can see that we have a lot of things here. Some of the things that we want to grab are the height, we want to grab the width, and we want to grab the URL of that particular asset. If we click play, we can see that it expanded that hero background with those values and we have the width in the URL.

[3:07] It looks like I didn't get the height in there. We can see that we get all those values are readily available for us. We can even see that if I take this URL and open it up inside of a new tab, we can see that beautiful banner that we uploaded earlier.

[3:20] We can see we have all of the data that we need in order to start dynamically creating that home page. Let's dive into the application and see how we can grab this data and inject it into our Next.js application.

[3:32] To start off back inside of index.js, which is our home page file, we need a way to be able to query for this data. The great thing with Next.js, is we have a couple of options for how we can achieve this. Where we have options like getServerSideProps which is going to allow us to use server-side rendering to get those requests.

[3:49] Or we can use getStaticProps, which is going to be able to do that at compile time, that way we don't have to make the browser wait for that request when it's getting loaded. Let's use getStaticProps, where we can set that up by creating this getStaticProps function, where we're going to export it from our file.

[4:06] Back in our code at the very bottom of our page, we're going to export a new async function called getStaticProps. Where inside, what I'm ultimately going to do is return object with an object that has a key of props, where those props are going to be the data that we collect and pass into our application.

[4:23] That data is going to be what we request from GraphCMS. First of all, we need a mechanism to request that data. That's where Apollo Client comes in.

[4:32] If we head over to the Apollo Client docs, we can see the first thing we're going to need to do is install the Apollo Client dependency. Where along with that, we want to install GraphQL which is going to help us construct the query that we send with Apollo.

[4:46] We can use either Yarn or NPM. Since I'm using Yarn, I'm going to copy the package names. Then in my project, I'm going to run Yarn add, and I'm going to paste those packages names where it's going to go off and install those packages to our project.

[4:59] At this point, we can start back up our development server. Next, we want to initialize our Apollo Client. We can see here that the first thing they give us is this import statement, where we have a few things, we want to import, including the Apollo Client itself and memory cache, which is a caching mechanism for those requests.

[5:14] ApolloProvider and useQuery which gives some more React-based features that we're not going to use for this walkthrough. GQL, which is what we're going to use as the GraphQL instance to construct our query.

[5:26] We're going to go ahead and copy this entire command. Then I'm going to go ahead and paste it in. As I mentioned before, we're not going to use the ApolloProvider or useQuery. I'm going to go ahead and get rid of those for now.

[5:36] Now, we can see that we can create an instance of this client. Once we have that client available, we can start to construct our query, which we can create using that query we've made inside of the API playground.

[5:48] The first thing I'm going to do is, I'm going to copy the same client instance. In my code, I'm going to head over to getStaticProps where I'm going to paste that right in.

[5:57] We notice that we have a URL here, that's not our URL. We want to grab our API endpoint for GraphCMS. If we head back over to GraphCMS, we can find that by going to the project settings.

[6:08] We're underneath the API access, we see all of our endpoints, including the content API, which I'm going to go ahead and copy and paste right inside of my application to replace that link. Then we want to make that query, where we can see the syntax of that is going to be client.query.

[6:24] With that query method, where we're going to pass in the options object including the query property, but we're going to pass in that entire query string, along with the GQL tag that's going to wrap that. We notice here that is using a chained .then statement in order to grab the results.

[6:41] We're going to use async/await for this. This will look slightly different, but for the most part it'll be the same. Inside of my code, I'm going to create a new constant called data. I'm going to set that equal to awaitclient.query, where I'm going to pass in a configuration object, including the query property, where I'm going to pass in GQL.

[6:59] Which I'm going to create my template literal tags, which is where I'm going to paste in my query from GraphCMS. Back over to GraphCMS inside of the playground, we can see that we're going to copy this query exactly as it is. I'm going to paste it in as it is.

[7:15] Where the only thing I'm going to do is fix the indentation and we can even update the actual query name, so that we have a little easier time debugging should we ever need to. Before we move on, let's see if this is working and see if we can look at the data inside here.

[7:30] I'm going to copy that data variable. Before the return props, I'm going to console log out my data constant. If we reload the page and look inside the DevTools, we'll notice that we can't see that. That's because getStaticProps is running inside of the node process.

[7:44] We need to look in the terminal for that. When we look in the terminal, we can see exactly what we're looking to find where we see that data object that we're creating. We're inside, we find the data.page along with all the information that we need in order to create this page.

[8:00] Now, we have this data object that includes all of our data for our page. We probably don't want to pass that in as is, as it's probably more data than we need. I'm going to take this and create a new constant called home is equal to data.data.page, which is going to give us that data inside of our actual query response.

[8:20] I'm going to take that home constant and paste it right in as a prop, where this is going to make it available for us inside of our React component.

[8:28] Now that we have that there defined, I'm going to scroll all the way to the top of the file. We're inside of the actual function declaration for our home page component, I'm going to now create a destructured instance, where I'm going to paste in the prop of home.

[8:42] We can even prove that this works by adding a new console log statement of that home value. Once we reload the page, we can see that we are indeed logging out this home object, where if we open up, we can see all the data that we need.

[8:54] Let's start filling in these pieces including replacing all the hero text. I'm going to destructure these values. I'm going to say hero title, hero text, hero link and hero background, which is going to come from our home object.

[9:10] We can scroll down to that hero section, where we can start to replace those values including the hero title. We can also replace the actual hero text. We can replace the link to dynamically grab that value, including the hero link itself. We also can replace this image.

[9:28] Again, because this is an asset, it's going to have more data associated with it. If we expand this, we can see that we have a height, a width, and the URL, which is exactly the things that we're going to add to that image.

[9:40] To start, I'm going to replace this source prop with the actual dynamic value of my herobackground.url. As best practice, we typically want to define a width and height to our image tags. I'm going to create that new width and my new height, and then we can set those equal to our hero background.width and our hero background.height.

[10:04] Once the page reloads, we can see that at this point, nothing has changed. Which is a good thing because we want this to be exactly what we were trying to recreate.

[10:13] To prove this is actually working, how about instead of prepare for liftoff with just a simple period, I want to show more excitement. I'm going to add an exclamation point. I'm going to hit save and publish to actually publish those changes.

[10:25] When we hard refresh our page to make sure that it doesn't include a cached instance, we can see that we now have that exclamation point, meaning we were able to dynamically change these values.

[10:35] That means whether we want to change the title, the text, even the link, once we actually have a category that we can send people to, we're able to update any of these values and it's going to be able to reflect that when we actually pull that new data into our application.

[10:50] In review, once we were able to explore our data and see how we can actually construct a query, we were able to use the Apollo Client along with our API endpoint.

[10:59] Where we were able to actually make that query where we grab the data and passed it as a prop right inside of our application. Then with all of that data available, we were able to replace the actual content so that we had our dynamic hero content.

[11:13] Where any time we make a change inside of our GraphCMS content editor, we can see those changes actually reflect inside of our app.

Query the GraphCMS GraphQL API with Apollo GraphQL

Share this video with your friends

Course

Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js