Getting products from Shopify Storefront API

Set up a Next.js project

First of all let’s set up a next JS project. We can get started with the following command. I have used Typescript for my project but you can use JavaScript if you want.

yarn create next-app --typescript

Also install Mantine component library for styling and Apollo for data fetching.

yarn @mantine/core @mantine/hooks @appllo-graphql graphql

In the _app.tsx file import provider from both @appllo/client and @mantine/core . Then wrap the whole app with the providers.

//_app.tsx
import { MantineProvider } from "@mantine/core";
import { ApolloProvider } from "@apollo/client";
import "../styles/globals.css";
import Client from "../services/Apollo";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={Client}>
      <MantineProvider>
        <Component {...pageProps} />
      </MantineProvider>
    </ApolloProvider>
  );
}

export default MyApp;

ApplloProvider will receive a client prop. Need provider the credential on Client.ts file. This file will content API endpoint and API key which we get from Storefront dashboard.

Setting up the environment variable

I have placed my initial store name and API key in the .env file as a environment variable. The API key we need to get it from Shopify dashboard. To get an API key we need to add a private app to our Shopify store.

Storefront API provides all the functionalities of a Shopify store. To get access to Storefront API we need a API key. We need to create a private app to get the API key. First, go to Dashboard, go to Apps section, here you will find a option of creating a private app. Just create a Private app and get your API key.

Function to get products

Now lets setup the a getProducts() function which will get products form the backend.

For this step you must have product in your store. Now you can query for products from the Shopify API. For simplicity and code readability we will name the function getProducts() . We fill get first 5 products from our store.

For Static rendering of data call the API inside the getStaticProps() function. Use getStaticProps get products from that store.

import Client from "@services/Apollo";
import { gql } from "@apollo/client";

export default async function getProducts() {
  const { data, error, loading } = await Client.query({
    query: gql`
      query Products {
        products(first: 5) {
          edges {
            node {
              id
              handle
              title
              description
              variants(first: 10) {
                edges {
                  node {
                    id
                    image {
                      height
                      url
                      altText
                      width
                    }
                  }
                }
              }
            }
          }
        }
      }
    `,
  });
  return { data, error, loading };
}

Showing product list on UI

Now map the products array. We need to go through edges and node in the Storefront API in order get the actual data

{
  _.map(data.products.edges, (product: Product) => {
              const { id, title, description, variants } = product.node;
              const url = variants.edges[0].node.image.url;
              return (
                <Card key={id}>
                  <h3>{title}</h3>
                  <img alt={title} src={url} />
                  <p>{description}</p>
                  <Button>Add to cart</Button>
                </Card>
              );
            })}

More information on:
https://shopify.dev/api/storefront
https://nextjs.org