apollo clientを活用したstorefront apiの接続について

Highlighted
新規メンバー
4 0 0

現在GatsbyとStorefront APIで開発を行っております。

(以前こちらの質問をさせていただきました。)

 

上記の質問および回答を踏まえまして、再度調査したところStorefront APIでtotalInventoryが取得できるのはバージョンが2020-04からだということと、現状のGatsby製ライブラリでは取得できないことが把握できましたので、ライブラリの使用を取りやめ、Apollo-Clientを使用して取得する方法を試みています。

 

 

apollo公式ドキュメントに則り以下のように設定しています。

const httpLink = new HttpLink({
  uri: `${process.env.SHOPIFY_ENDPOINT}`
})

const authLink = setContext((_, { headers }) => {
  return {
    ...headers,
    headers: {
      'X-Shopify-Storefront-Access-Token': `${process.env.SHOPIFY_ACCESS_TOKEN}`,
      Accept: 'application/json',
      'Content-Type': 'application/json; charset=utf-8'
    },
    fetchOptions: {
      mode: 'no-cors'
    }
  }
})

const apollo = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
})

fetchOptionでmodeをcorsにしPOSTを行うと、以下のエラーが出てしまいました。
(Networkで確認したところ、アクセストークンは無事送られていました。)

 

Access to fetch at 'https://${store_name}.myshopify.com/api/2020-04/graphql' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

modeをno-corsにすると415エラーが出てしまい、更にアクセストークンが付与されていない状態になってしまい、手詰まりになってしまっております。

 

 

いくつか参考記事を探したのですが、良い記事が見当たらずご存知の方がいらっしゃいましたら、是非お知恵をいただけますと幸いです。

何卒よろしくお願い致します。

0 件の「いいね!」
Highlighted
Community Manager
Community Manager
394 81 125

こちらを使ってみるのはどうですか?
https://shopify.dev/tools/libraries/storefront-api/javascript

以下の末尾にGraphqlを直接叩くサンプルがあります。
https://shopify.github.io/js-buy-sdk/

上記からリンクされているサンプルでapollo clientの例もあります。
https://github.com/Shopify/storefront-api-examples

Technical Partner Manager, Japan
0 件の「いいね!」