Building a React Store with the Shopify Storefront API: Setting up and Authenticating Your App

Set Up Your React App

In this tutorial we are going to create-react-app to build our base react application. You can find the code base here. This will get us up and running quickly without having to invest a lot in configuration.

To get started open a terminal window and run

			
				npx create-react-app your-app-name
			
		

cd into the directory for your app and run

			
				yarn start
			
		

This will run the app in development mode and serve it on http://localhost:3000. Navigate to your app in the browser and you will see a page that looks like this:

Setting Up Your Shopify Store For API Access

Now we are going to set up our stores so that our React application can authenticate with the Store Front API. In your store dashboard navigate to Apps. At the bottom of the app page there is a link to Manage private apps, click there. Click the button to Create a new private app. Give your private app a name and make sure to check the box to Allow this app to access your storefront data using the Storefront API, this will be essential for interacting with the API.

Setting up ApolloClient

The Shopify Storefront API is a GraphQL API. If you're new to GraphQl you can learn more about the query language here.

The great thing about GraphQl is it lets us pull in data from multiple different resources in one request. If you think about this in the concept of your Shopify store, this could mean pulling in information about a product and the collection it belongs to and data for other related products all in one request💥!

We are going to use Apollo to help with quering the GraphQl API.

Back in our React app let's start by installing GraphQl.

In the root directoty run

			
				npm install graphql --save
				npm install graphql-tag --save
			
		

Next we'll install Apollo

			
				npm install react-apollo --save
			
		

Next, in the index.js file we will set up the connection to the Shopify API.

Start by importing all necessary modules at the top for graphl and apollo. Then we'll specify the graphql endpoint we want to hit and set up the headers to send with the request.

			
				import React from 'react';
				import ReactDOM from 'react-dom';
				import './index.css';
				import App from './App';
				import registerServiceWorker from './registerServiceWorker';

				import ApolloClient from 'apollo-client';
				import { HttpLink } from 'apollo-link-http';
				import { ApolloLink, concat } from 'apollo-link';
				import { ApolloProvider } from 'react-apollo';
				import { InMemoryCache } from 'apollo-cache-inmemory';

				import { graphql } from 'react-apollo';
				import gql from 'graphql-tag';


				// Create ApolloClient Instance and point to your Shopify store's GraphQl server.

				const httpLink = new HttpLink({ uri: 'https://[your-store].myshopify.com/api/graphql' });


				// Add authentication headers
				const authMiddleware = new ApolloLink((operation, forward) => {
				  // add the authorization to the headers
				  operation.setContext({
				    headers: {
				        'X-Shopify-Storefront-Access-Token': '[your-store-front-access-token]'
				    } 
				  });

				  return forward(operation);
				})

				const client = new ApolloClient({
				  link: concat(authMiddleware, httpLink),
					cache: new InMemoryCache().restore(window.__APOLLO_STATE__),
				});



				ReactDOM.render((
				  
				    
				  
				  ),
				  document.getElementById('root')
				);

				registerServiceWorker();
			
		

Let's break down some of what is going on in the code snippet above. After we've imported all the required modules we start by creating an Apollo client. This will specify the GraphQl endpoint of your Shopify store. It will also include the required headers to authenticate your app against your Shopify store. We have yet to generate the storefront-access-token, but will do so in the next step.

Finally, we create a provider to connect the ApolloClient to your react component tree. The provider component should be hierarchichally above any component in your app that will need to access the GraphQl data.

Generating the Storefront Access Token

Time to fill in the blank in the ApolloClient creation. Back in your store dashboard navigate to Apps and then at the bottom of the screen click to Manage Private Apps. Here create a new private app.

You can name your private app whatever you like, I like to name it storefront api, so I know this is the app used for the storefront api. The most important thing when creating your app is to check the Allow this app to access your storefront data using the Storefront API data box. Also, make sure to set the read / write permissions in accordance to what you would like the client to be able to access. Once you've set all the permissions save the app and you will be given a storefront access token. Copy this and replace the placeholder in your index.js file.

Pulling in Data

We are all set to start querying the store's api ✨.

In your app open App.js. Let's import the modules we'll need to make our graphql query:

			
				import { graphql } from 'react-apollo';
				import gql from 'graphql-tag';
			
		

We'll start by writting out a graphql query. To do this we will use the gql template tag. This lets us write graphql queries in our app that will be parsed into the GraphQl js format. The query will look like this:

			
				const HOME_QUERY = gql`
				  query ShopData {
				     shop {
				       name
				       description
				       products(first:20) {
				         pageInfo {
				           hasNextPage
				           hasPreviousPage
				         }
				         edges {
				           node {
				             id
				             title
				             images(first: 1) {
				               edges {
				                 node {
				                   src
				                 }
				               }
				             }
				           }
				         }
				       }
				     }
				   }
				`;
			
		

Now we are going to use the Apollo graphql container to run the query. At the bottom of your App.js file, instead of exporting App we are going to export the App component subscribed the the Apollo data store.

			
				// export default App;
				export default graphql(HOME_QUERY, {name: 'shopData'})(App);
			
		

We are passing our query to the grapql container. We are also passing an optional name. This will be the name referenced in our App component props. The result of the query will be passed to App in a prop called shopData.

Display Products in Your Shop

To demonstrate how we can use the data we pulled in let's put some product photos and titles on the page.

Still in App.js modify your app component to display a loading screen and then the products.

			
				class App extends Component {
				  render() {
				    // waiting for the shop data
				    if (this.props.shopData && this.props.shopData.loading) {
				      return 
Loading ✨
} // error retrieving shop data if (this.props.shopData && this.props.shopData.error) { return
Sorry something went wrong. Check back soon.
} // display products const productsToDisplay = this.props.shopData.shop.products return (
{productsToDisplay.edges.map((el, i)=> { return(
{el.node.title}
) })}
); } }

You'll notice that the way we access the data directly maps to the HOME_QUERY we wrote earlier. This is a major benefit of GraphQl APIs, they are self documenting. The data you get back will be in the same format as the query you write. It's almost like you are writing an object with a bunch of keys and then you get data returned with the keys and values.

Setting Up Your Environment Variables

Let's do one more thing to optimize our development flow and get our store ready to push to your preferred online versioning system. We are going to set up an .env file with our store uri and storefront access token.

In the root of your preject create a new .env file. Make sure that this file is listed in your .gitignore file.

In your .env file include the store uri and storefront access token

			
				REACT_APP_STORE_TOKEN=your-access-token
				REACT_APP_STORE_URI=https://your-shop.myshopify.com/api/graphql
			
		

Note: it's important that your environment variable names start with REACT_APP

Now back in Index.js replace your store uri with process.env.REACT_APP_STORE_URI and the storefront access token with process.env.REACT_APP_STORE_URI. Once you have updated your app to use the environment variables make sure to stop and restart the server.

Check out the code here
more posts