Nuxt3集成Shopify GraphQL失败：无法加载Schema

问题背景 #

我正在尝试将Nuxt3应用与Shopify对接，已完成以下操作：

1. 在Shopify中创建应用并配置Admin API、Storefront API集成
2. 项目中安装nuxt-graphql-client，并配置nuxt.config.js如下：

export default defineNuxtConfig({
  devtools: { enabled: true },
  colorMode: {
    preference: "light",
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  runtimeConfig: {
    public: {
      "graphql-client": {
        clients: {
          default: {
            host: process.env.SHOPIFY_DOMAIN,
            token: {
              name: "X-Shopify-Storefront-Access-Token",
              value: process.env.SHOPIFY_STOREFRONT_TOKEN,
              type: null,
            },
            retainToken: true,
          },
        },
      },
    },
  },
  css: ["~/assets/css/main.scss"],
  modules: [
    "@nuxt/image",
    "nuxt-icon",
    "nuxt-swiper",
    "@nuxt/ui",
    "@nuxtjs/i18n",
    "nuxt-graphql-client",
  ],
});

3. 配置.env文件如下：

SHOPIFY_DOMAIN=https:///admin/api/2024-04/graphql.json
SHOPIFY_STOREFRONT_ACCESS_TOKEN=从API Credentials获取的令牌

启动项目后出现错误：

Failed to load schema from https:///admin/api/2024-04/graphql.json:

问题原因及解决方案 #

1. Storefront API 地址格式错误 #

Storefront API的端点路径不包含/admin（该路径属于Admin API），且你当前的SHOPIFY_DOMAIN存在格式错误：https:///多了一个斜杠，导致地址无效。

Storefront API的正确地址格式为：

https://{你的店铺域名}.myshopify.com/api/{API版本}/graphql.json

2. 修正.env配置 #

将.env中的SHOPIFY_DOMAIN修改为正确的Storefront API地址，示例：

SHOPIFY_DOMAIN=https://your-store-name.myshopify.com/api/2024-04/graphql.json
SHOPIFY_STOREFRONT_ACCESS_TOKEN=你的Storefront Access Token

3. 按需区分 Admin API 和 Storefront API #

如果需要同时调用两种API，建议在nuxt-graphql-client中配置双客户端：

runtimeConfig: {
  public: {
    "graphql-client": {
      clients: {
        storefront: {
          host: process.env.SHOPIFY_STOREFRONT_DOMAIN,
          token: {
            name: "X-Shopify-Storefront-Access-Token",
            value: process.env.SHOPIFY_STOREFRONT_TOKEN,
            type: null,
          },
          retainToken: true,
        },
        admin: {
          host: process.env.SHOPIFY_ADMIN_DOMAIN,
          token: {
            name: "X-Shopify-Access-Token",
            value: process.env.SHOPIFY_ADMIN_TOKEN,
            type: "Bearer",
          },
          retainToken: true,
        },
      },
    },
  },
}

对应的.env补充Admin API配置：

SHOPIFY_STOREFRONT_DOMAIN=https://your-store-name.myshopify.com/api/2024-04/graphql.json
SHOPIFY_STOREFRONT_TOKEN=你的Storefront Access Token
SHOPIFY_ADMIN_DOMAIN=https://your-store-name.myshopify.com/admin/api/2024-04/graphql.json
SHOPIFY_ADMIN_TOKEN=你的Admin API Access Token

内容的提问来源于stack exchange，提问作者Francesco Buscicchio