🦔

【CloudFunctions】Shopify AdminAPI GraphQL

2023/03/31に公開

Flutter

初めに

上記の記事で、FlutterWebで作成したフロント側から、「Shopify AdminAPI」を利用する際に、CORSエラーでFlutterWebのみで解決する事ができなそうだったので、CloudFunctionsを利用して解決しました。

エラー文

Access to XMLHttpRequest at 'https://**/admin/api/2023-01/graphql.json' 
from origin 'http://localhost:64726' has been blocked by 
CORS policy: Response to preflight request doesn't pass access control 
check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解決方法

Shopifyのカスタムアプリでは、CORSの設定はできなかった。
'Access-Control-Allow-Origin'をheaderに設定しても効果は無かったので、解決方法は下記のようになると思います。

プロキシサーバーを利用する。
サーバーサイドからAPIを叩く

今回はCloudFunctionsを利用して、サーバーサイドからAPIを叩く形で解決しました。

実装

Functionsの基本的な実装の説明は省きますので、下記を参考にしていただければと思います。

環境変数を設定

ACCESS_TOKENをKEYとして、Shopifyで取得したアクセストークンをVALUEに設定します。
設定方法は下記を参考にしていただければと思います。

関数を実装

Node.jsでaxiosを利用してAPIと通信を行います。
ShopifyでNode.js用のClientLibraryもありますが、個人的に分かりづらかったので今回は使いませんでした。

axiosを追加

yarn add axios

コード

GraphQLで利用する、queryを引数で受け取り、APIを叩き結果を返す関数です。
FlutterWeb側での関数の呼び出しかたはこちらを参考にしていただければと思います。

index.js

const functions = require("firebase-functions");
const axios = require("axios");

exports.runShopifyGraphqlOperation = functions.https.onCall((data, context) => {
  //{shopname}の部分に自分のShopifyのストア名を入れる
  const endpoint = "https://{shopname}.myshopify.com/admin/api/2023-01/graphql.json";
  //環境変数として設定したACCESS_TOKENを利用
  const accessToken = process.env.ACCESS_TOKEN;
  const headers = {
    "Content-Type": "application/json",
    "X-Shopify-Access-Token": accessToken,
  };
  const query = data.query;
  const requestBody = {
    query,
  };

  return axios.post(endpoint, requestBody, {headers})
      .then((response) => {
        console.log(response.data);
        return response.data;
      })
      .catch((error) => {
        console.log(error);
        return error;
      });
});

終わりに

FlutterWebだけで解決しようとせず、大人しくすぐFunctionsで実装していれば、もっと早く進んでたのに。反省です。笑
追伸
ChatGPT手放せない