Zenn
🐕

Strawberry Shake (.NET) で GraphQL #3 Shopify につなぐ

2024/12/10に公開
.NET
GraphQL
Shopify
strawberryshake
tech

Strawberry Shake (.NET) で GraphQL #3 Shopify につなぐ

前回 C# の統合開発環境の Rider で GraphQL を書いて実行するところまでやりました。

今回は、オンラインショップのクラウドサービスの Shopify のカスタムストア用の Storefront API を呼び出すところまでやります。

事前に Shopify にアカウントを登録し開発用のオンラインショップをセットアップしておいてください。いろいろと操作は必要ですが、長くなるので割愛します。また、前回までのプロジェクトではなく、新しい .NET プロジェクトを作成してください。

認証が必要な GraphQL API にアクセスする

一般的な GraphQL API は認証が必要です。認証の方法にはいろいろあります。Shopify の Storefront API の詳細は Shopify API authentication に書かれています。その中 X-Shopify-Storefront-Private-Token ヘッダーを利用します。トークンは Shopify の管理画面から取得できます。

JetBrains Rider 側

新しく作成したプロジェクトで GraphQL 構成ファイルの graphql.config.yml を作成します。<your shopify name> はあなたの Shopify 環境に合わせて修正してください。

schema: schema.graphql
extensions:
  endpoints:
    production:
      # Storefront API のエンドポイント。
      url: https://<your shopify name>.myshopify.com/api/2024-10/graphql.json
      # Shopify の認証。
      headers:
        X-Shopify-Storefront-Access-Token: ${TOKEN}
documents: '**/*.graphql'

前回やったように再生ボタンでスキーマを取り込みます。前回と異なりアクセストークンの入力を求められますので、Shopify の管理画面で API 資格情報を調べて入力します。

前回と同じようにクエリを書きます。

MyShop.graphql
query myShop {
  shop {
    id
    name
  }
}

実行した結果が次の通りです。

{
  "data": {
    "shop": {
      "id": "gid://shopify/Shop/*******",
      "name": "******92"
    }
  }
}

アクセストークンは Rider を終了するまで記憶されているようです。

Strawberry Shake 側

今度は Strawberry Shake の設定を行います。手順は前々回を参照してください。違うところはエンドポイントと認証が必要なことです。

$ dotnet graphql init --headers X-Shopify-Storefront-Access-Token=<your storefront api token> https://<your shopify name>.myshopify.com/api/2024-10/graphql.json

.graphqlrc.json を書き換えます。

.graphqlrc.json
    "strawberryShake": {
      "name": "GraphQLClient",
      "url": "https://<your shopify name>.myshopify.com/api/2024-10/graphql.json",
      "namespace": "SampleApp.GraphQL",
      "dependencyInjection": true,

一度ビルドしてから Program.cs を書き換えます。

Program.cs
using Microsoft.Extensions.DependencyInjection;
using SampleApp.GraphQL;
using StrawberryShake;

var serviceCollection = new ServiceCollection();
serviceCollection
    .AddGraphQLClient()
    .ConfigureHttpClient(client =>
    {
        client.BaseAddress = new Uri("https://<your shopify name>.myshopify.com/api/2024-10/graphql.json");
        client.DefaultRequestHeaders.Add("X-Shopify-Storefront-Access-Token", "<your storefront api token>");
    });

var services = serviceCollection.BuildServiceProvider();

var client = services.GetRequiredService<IGraphQLClient>();

var result = await client.MyShop.ExecuteAsync();
result.EnsureNoErrors();

Console.WriteLine(result.Data.Shop.Name);

実行すると Shopify のショップ名が表示されます。

Shopify について少しだけ

Shopify GraphiQL App

Shopify はブラウザーから GraphQL API のオペレーションを実行する GraphiQL App が用意されています。あなたの Shopify の管理画面にアプリをインストールすると使えるようになります。

Shopify Storefront API GraphiQL explorer から環境を用意せずに触ることができますので試してみてください。

Shopify Storefront API で指定する first とか

Storefront API では例えばすべての商品のリストというとり方はできないようです。範囲とか数とかを指定せずに取得するとエラーになります。

例えば次のクエリはすべての商品を取得します。

query getProducts {
  products {
    edges {
      node {
        title
      }
    }
  }
}

しかし、結果は you must provide one of first or last とエラーになります。

first 引数を利用して最初から n 個取得するようにクエリを書く必要があります。

query getProducts {
  products(first: 100) {
    edges {
      node {
        title
      }
    }
  }
}

プログラムから n 個を引数で与えるには次のようにします。

query getProducts($first: Int!) {
  products(first: $first) {
    edges {
      node {
        title
      }
    }
  }
}

最後に

Straberry Shake で Shopify の API を呼び出せるようになりました。のはいいのですが、実際にあれこれ試してみると、うまくいことがでてきます。次回はそれの対処方法を紹介します。

Discussion