Nuxt Apollo Shopify Graphql

Question

所以我正在使用 https://github.com/nuxt-community/apollo-module 我正在尝试将其设置为连接到我的 shopify graphql API

在 nuxt.config.js:

  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://my-store.myshopify.com/admin/api/2020-01/graphql.json',
        getAuth: () => 'Bearer 26cfd63bbba75243b55fad2c8de0a12f'
      },
    }
  },

在 index.vue，我有以下内容：

  <script>
    import gql from 'graphql-tag'

    export default {
      apollo: {
        data: {
          query: gql`
            query {
              shop {
                name
              }
            }
          `,
        }
      }
    }
  </script>

这是正确的设置吗？
我似乎遇到了 cors 策略错误。我认为这与缺少 Shopify 要求的 headers 有关：https://help.shopify.com/en/api/graphql-admin-api/getting-started#authentication
- 如何将 'X-Shopify-Access-Token' 添加到设置中？

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

这就是我们在 Nuxt 配置中的工作方式。

    apollo: {
        clientConfigs: {
            default: {
                httpEndpoint:
                    "http://api.another-backend-example.com/graphql",
                persisting: false
            },
            shopify: {
                httpEndpoint:
                    "https://my-store.myshopify.com/api/2019-07/graphql.json",
                httpLinkOptions: {
                    headers: {
                        "Content-Type": "application/json",
                        "X-Shopify-Storefront-Access-Token":
                            "123456789abcdefghi"
                    }
                },
                persisting: false
            }
        }
    }

我们还为 Nuxt 构建了很多有用的 Shopify 组件，也许这对您有帮助：https://github.com/funkhaus/shophaus/

Nuxt Apollo Shopify Graphql

Nuxt Apollo Shopify Graphql

api

shopify

apollo

graphql

nuxt.js