Apollo Clientを使ってShopifyの商品一覧を取得しNext.jsで表示する（GraphQL編） 🎁

import gql from 'graphql-tag';
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';

type Data = {
  products: {
    edges: {
      node: {
        title: string;
      };
    }[];
  };
};

export default function GraphQlTestPage({ data }: {
  data: Data;
}) {

  return (
    <ul>
      { data.products.edges.map(({ node }, i) => <li key={ i }>{ node.title }</li> ) }
    </ul>
  );
}

export async function getStaticProps() {
  const httpLink = createHttpLink({ uri: `https://${ process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN }/api/graphql` });
  const middlewareLink = setContext(() => ({
    headers: {
      'X-Shopify-Storefront-Access-Token': process.env.NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN || ''
    }
  }));
  const client = new ApolloClient({
    link: middlewareLink.concat(httpLink),
    cache: new InMemoryCache(),
  });  
  const { data } = await client.query({
    query: gql`{
      products(first:10) {
        edges {
          node {
            title
          }
        }
      }
    }`
  });

  return {
    props: {
      data
    }
  };
}

importはしていませんが、graphqlも必要になるので、

yarn add graphql graphql-tag apollo-client apollo-link-http apollo-link-context apollo-cache-inmemory

と、必要なモジュールをaddしておきましょう。

タイトルをリストとして表示するのであれば、クエリはこんな感じでOKです。
今回は商品のtitleしか取得していませんが、クエリを書けばいろいろと取得できます。

クエリの書き方は、GraphiQL explorerのDocumentation Explorerを使えば確認できますし、試すこともできます。

shopify.dev

GraphQL explorerではなく、GraphiQL explorerなんですね。

自分のストアで試したい場合は、Shopify GraphiQL AppをインストールすればOKです。

shopify-graphiql-app.shopifycloud.com

と、そういった情報がこちらのページに纏まっているので目を通してから開発するのがおすすめです。

www.shopify.jp

ストアアクセストークンにNEXT_PUBLICプレフィックスをつけて良いのかは疑問が残りますが、さくっとフロントから読むために付与しました。

Apollo Clientを初めて使ったのですが、とても簡単に使えたので、想像以上に手軽に実装できそうだなという所管です。
Reactで使うときはAppollo Providerを使う方法もあるので、折を見て試してみたいと思います。

みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Apollo Clientを使ってShopifyの商品一覧を取得しNext.jsで表示する（GraphQL編） 🎁

手順

プライベートアプリを用意して、ストアフロントAPIのアクセストークンを取得する

コードを書く

src/pages/graph-ql-test-page.tsx