带有 JS 的 GraphQL 请求答案

【问题标题】：GraphQL request with JS带有 JS 的 GraphQL 请求
【发布时间】：2020-10-01 17:47:59
【问题描述】：

这是我第一次使用 GraphQL，总的来说我对 API 还比较陌生。因此，我很难从他们的文档上的一个起始示例向 GraphQL 提出它的工作原理的测试请求。

首先我使用npm install graphql --save 安装了 GrapgQL（不确定我是否需要这样做，它可能只用于服务器，我不清楚）
那么，这是我要请求的代码：

const response = await fetch(`/graphql`, {
    method: "POST",
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
    },
    body: JSON.stringify({query: '{ hello }' })
})
console.log(response.json());

这将返回一个未定义的响应。

我想知道我错过了什么或做错了什么？谢谢你的回答

编辑： 我最初认为他们的文档是指为测试而制作的现有端点，但我不再确定，所以我在 Github V4 API 上进行了测试，但我得到了一个空响应，而在他们的资源管理器上我得到了结果。这是我的新代码。

const response = await fetch(`https://api.github.com/graphql`, {
    method: "POST",
    headers: {
        Authorization: `Token ${token}`,
        Accept: 'application/vnd.github.starfox-preview+json',
    },
    body: JSON.stringify({query:
            '{' +
            '  repository(name: "myrepo", owner: "myowner") {' +
            '    issues(last: 100) {' +
            '      nodes {' +
            '        number' +
            '        title' +
            '        timelineItems(itemTypes: MOVED_COLUMNS_IN_PROJECT_EVENT, last: 10) {' +
            '          nodes {' +
            '            ... on AddedToProjectEvent {' +
            '              createdAt' +
            '            }' +
            '            ... on MovedColumnsInProjectEvent {' +
            '              createdAt' +
            '            }' +
            '          }' +
            '        }' +
            '      }' +
            '    }' +
            '  }' +
            '}'
    })
})
console.log(response.json());

我的 console.log 返回Promise { <pending> } 我得到这个错误body used already for: https://api.github.com/graphql

我没有以正确的方式定义或使用身体吗？

【问题讨论】：

这是浏览器环境吧？ .json() 返回一个承诺。您可以使用.then() - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 来履行承诺
@JonathanRosa 不，实际上不是，它是一个 node.js Rest API，我正在从中调用一个 GraphQL API。你的评论一定意味着我偏离了轨道……
不，我只是假设浏览器，因为fetch() 是本地的，但不是在节点上。尝试查看 fetch 实现的文档。
你启动了graphql服务器了吗？
@Xesenix 我首先虽然 graphql 有他们的服务器作为测试端点，但你的评论让我意识到我可能错了，所以我编辑了我的问题。

标签： javascript graphql

【解决方案1】：

标头中缺少 'Content-Type': 'application/json', 行，这使得 HTTP POST 正文内容被视为 GraphQL 查询字符串。

所以我的代码最终是这样的：

const response = await fetch(`https://api.github.com/graphql`, {
method: "POST",
headers: {
    Authorization: `Token ${token}`,
    Accept: 'application/vnd.github.starfox-preview+json',
   'Content-Type': 'application/json'
},
body: JSON.stringify({query:
        '{' +
        '  repository(name: "myrepo", owner: "myowner") {' +
        '    issues(last: 100) {' +
        '      nodes {' +
        '        number' +
        '        title' +
        '        timelineItems(itemTypes: MOVED_COLUMNS_IN_PROJECT_EVENT, last: 10) {' +
        '          nodes {' +
        '            ... on AddedToProjectEvent {' +
        '              createdAt' +
        '            }' +
        '            ... on MovedColumnsInProjectEvent {' +
        '              createdAt' +
        '            }' +
        '          }' +
        '        }' +
        '      }' +
        '    }' +
        '  }' +
        '}'
})

}) console.log(response.json());

【讨论】：