🙌
[FlutterWEB] graphql_flutterでShopifyAdminAPI利用時エラー
初めに
graphql_flutterの公式を参考に実装しましたが、401エラーでうまくいかなった為、解決した方法を記述します。
おおまかな流れは、参考リンクの提示のみで、詰まった部分のみを記述します。
↓Query等の殴り書きメモ↓
参考リンク
GraphQL
Shopify Admin API
プライベートアプリを作成する記事が多いですが、現在プライベートアプリは作成できない為、カスタムアプリを作成します。
Query一覧
401エラー
下記のコードでエラーが出ていました。
PostManでは問題なく通信できた為、URLやアクセストークンは間違えていなかった。
import 'package:graphql_flutter/graphql_flutter.dart';
const shopifyAccessToken = "アクセストークン";
final HttpLink httpLink = HttpLink(
'https://{shopname}.myshopify.com/admin/api/2023-01/graphql.json',
);
final AuthLink authLink = AuthLink(
getToken: () => 'Bearer $shopifyAccessToken',
);
final Link link = authLink.concat(httpLink);
final client = GraphQLClient(
link: link,
cache: GraphQLCache(
store: HiveStore(),
),
);
原因は下記のコード。
final AuthLink authLink = AuthLink(
getToken: () => 'Bearer $shopifyAccessToken',
);
次のように修正
final AuthLink authLink = AuthLink(
headerKey: 'X-Shopify-Access-Token',
getToken: () => shopifyAccessToken,
);
XMLHttpRequest error（CORS）
local hostで実行時にAPI通信ができないエラー。
QueryResult(source: QueryResultSource.network, data: null, context: Context({}),
exception: OperationException(linkException: ServerException(originalException:
XMLHttpRequest error.
-
flutter\bin\cache内のflutter_tools.stampを削除
-
flutter\packages\flutter_tools\lib\src\web内のchrome.dartを開く
-
'--disable-extensions'を'--disable-web-security'に変更する
参考
Discussion