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

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

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

前回は、js-buy-sdk(shopify-buy)を使って商品一覧を取得しましたが、今回はGraphQLで取得します。
方法はいろいろあるのですが、GraphQLを扱いやすくするためにApollo Clientを使って実装しました。

blog.kimizuka.org

個人的には結果が同じであれば使い慣れているREST APIを使うところなのですが、メタフィールドを使って管理画面に入力できる情報を拡張している場合など、GraphQLを使って取得した方が良い場合もあるので、GraphQLでの取得を試してみました。

help.shopify.com
www.shopify.jp

手順

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

js-buy-sdk(shopify-buy)を使って商品一覧を取得したときと同様にストアフロントAPIのアクセストークンが必要になるので取得します。

blog.kimizuka.org

  1. プライベートアプリを用意する
  2. ストアフロントAPIを有効にする
  3. 商品、バリエーション、コレクションを読み込むの権限を付与する
  4. ストアフロントのアクセストークンを控える

と、こちらの手順通り進めればOKです。

https://help.shopify.com/ja/manual/apps/private-appshelp.shopify.com

コードを書く

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

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を使う方法もあるので、折を見て試してみたいと思います。

www.apollographql.com