Question

尝试使用Shopify的Fetch API和GraphQL端点在React组件中获取我的商店的名称。

我创建了一个Shopify商店，授予了Storefront API的权限，并在我的react组件的componentDidMount()部分中对此进行了精心设计。

let query = '{ shop { name } }';
console.log(JSON.stringify(query));

fetch('https://myStoreName.myshopify.com/api/graphql', {
        method: "POST",
        headers: {
            "Content-Type": "application/graphql",
            "X-Shopify-Storefront-Access-Token": "<My API Key>"
        },
        body: JSON.stringify(query),
    })
  .then(function(myJson) {
    console.log('fetched');
    console.log(JSON.stringify(myJson));
  });

我的控制台日志输出：

"{ shop { name } }"
App.js:21 fetched
App.js:22 {}

我什至没有遇到错误，让我认为这可能正在发生？但是在此查询中找不到我的店铺名称吗？

我认为总的来说，我不知道用Java编写GraphQL查询的最佳实践。我要生成一个大字符串还是一个普通的JSON来表示它？

*此外，我现在也尝试不使用graphQL客户端库，而只是使用访存API。

Answer 1

您无法读取fetch调用解析成的直接响应。取而代之的是，您应该调用适合于所提取的MIME类型的任何方法。来自Mozilla文档：

检索到响应后，可以使用许多方法来定义主体内容以及应如何处理。

对于JSON，您调用json方法。您可以看到更多示例here。这意味着您的代码应更像这样：

fetch(...)
  .then(res => res.json())
  .then(console.log)

此外，请记住，您不需要stringify查询。您可能应该使用application/json内容类型（我相信这是标准的）并将查询包装在这样的对象中。

body: { query },

然后，如果您有变量，则可以将它们包含在同一对象中

body: { query, variables }

使用获取API的Shopify GraphQL，返回空JSON，无错误

1 个答案: