Everyone loves to talk about how graphql is the next best thing since sliced bread 🍞, but when you try to get started with it, it can sometimes feel like like an uphill battle πŸ” with dependancies and libraries just to make the call in the first place.

Well, I'm here to make your life a lot easier - specifically for the Shopify Storefront API πŸ™Œ. We'll walk through the steps to set up your shop with the access, create the graphql query, and then call the query with Javascript Fetch.

Step 1 - Create a Private App

The first thing we need to do is create a private app. We do this by going to the apps section in our Shopify admin and clicking manage private apps at the bottom of the page.

create private app image

Once there we create a private app. You can call it anything you like, but it's usually a good idea to name it something meaninful so you'll remember what it's for when you go back later.

After you've created the app, scroll down to near the bottom of the page and you'll see a section for the Storefront API. Click Allow this app to access your storefront data using the Storefront API

create private app image

Now, take note of your Storefront access token, you'll be using that in your Fetch call.

create private app image

Step 2 - Create a graphql query

The easiest way to test your queries is to the Shopify Admin API GraphiQL explorer. You can add this app to your store by visiting this page and clicking the install link near the top.

Through the app, you can test out all the queries and see the results right away. The app also has built in documentation and auto-suggests queries for you.

create private app image

Once you have you're query set we can create a function that returns the query. (Note the back ticks for multiline strings).


  const productQuery = () => `
  query {
    shop {
      products( first: 10) {
        edges{
          node {
            id
            handle
            title
	
            variants(first: 10){
              edges{
                node{
                  title
              }
            }
          }
        }
      }  
    }
  }
}
`;

Step 3 - Call the query with JavaScript Fetch

For the Fetch call, I first store my Storefront access token and graphql url in variables. The access token we got from step on. The graphql url is your store url + /api/{version}/graphql.json.


const STOREFRONT_ACCESS_TOKEN =  'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

const GRAPHQL_URL = 'https://teststore.myshopify.com/api/2020-07/graphql.json'

Now, we create the graphql body. The method is POST. In the headers we need to set the X-Shopify-Storefront-Access-Token to our access token and we set the content type to application/graphql. The body is set to the productQuery we created in the second step.


const GRAPHQL_BODY  = () => {
	return {
	'async': true,
	'crossDomain': true,
	'method': 'POST',
	'headers': {
		'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN,
		'Content-Type': 'application/graphql',
	},
	'body': productQuery()
	};
}

Finally, we create a standard JS Fetch request with the GRAPHQL_URL and the GRAPHQL_BODY and we console log out our results - in this case the first 10 products from the store.


fetch(GRAPHQL_URL, GRAPHQL_BODY())
        .then(res => res.json())
	.then(products => {
		console.log('products', products)
	})

And πŸŽ‰Voila!πŸŽ‰ you've made a request to the Storefront graphql API.

One of the great things about this is that you can make the call from inside your theme code or on any other HTML page you like.