技術的なQ＆A

maechan · ‎09-04-2023

エラーの内容

react-dom.development.js:20662
Uncaught Error: Failed to connect to the Storefront API: 200 OK (x-request-id:8ebfd9d5-e9cc-4aa6-af6c-47d23a5deac6)
at updateDehydratedSuspenseComponent (react-dom.development.js:20662:17)
at updateSuspenseComponent (react-dom.development.js:20362:16)
at beginWork (react-dom.development.js:21624:14)
at beginWork$1 (react-dom.development.js:27426:14)
at performUnitOfWork (react-dom.development.js:26557:12)
at workLoopSync (react-dom.development.js:26466:5)
at renderRootSync (react-dom.development.js:26434:7)
at recoverFromConcurrentError (react-dom.development.js:25850:20)
at performConcurrentWorkOnRoot (react-dom.development.js:25750:22)
at workLoop (scheduler.development.js:266:34)

開発環境

Hydrogen v1
node v17.9.1
StorefrontAPI v2023-07

概要

Storefront API からメタオブジェクトを取得する際に上記のエラーが返却されます。

メタオブジェクトのデータは .server ファイルから取得しようとしています。

データ取得には useShopQuery を利用しています。

また、shopify/hydrogen/config に定義されている defineConfig での初期化は正常に機能しています。

以下はクエリで今回のエラーが発生します。

export const SAMPLE_QUERY = gql`
  query SampleQuery {
    metaobjects(type: "sample", first: 10) {
      edges {
        node {
          id
        }
      }
    }
  }
`;

const {data} = useShopQuery({
  query: FAQ_QUERY,
});

このuseShopQuery 関数を通してのデータ取得はエラーが返却されるのですが、curl からのデータ取得はできていました。

curl -X "POST" "https://xxxxx.myshopify.com/api/2023-07/graphql.json" \
     -H 'X-Shopify-Storefront-Access-Token: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' \
     -H "Accept: application/json" \
     -H 'Content-Type: application/json' \
     -d '{"query": "query SampleQuery {metaobjects(type: \"sample\", first: 10) {edges {node {id type handle updatedAt fields {key value}}}}}"}'

過去のフォーラムでこの現象は Hydrogen v1 の vite/router の不具合が影響しているようで、Hydrogen のバージョンを v2 にアップデートすると正常に動作するようになったとの報告が上がっています。

https://community.shopify.com/c/hydrogen-headless-and-storefront/metaobject-query-returns-200-ok-and...

メタオブジェクトの取得を Hydrogen v1 から行う方法をご存知の方、同じ現象に遭遇している方や知見のある方がいらっしゃいましたら是非コメントをいただけると助かります。