Getting products from Shopify Storefront API
Published: 2022-03-30 00:41:18

### 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