如何使用graphql-js从客户端代码调用API？

Question

我正在开发一个内部 TypeScript 库，它需要调用几个 GraphQL 端点。 该库应该在前端项目中导入，但它不依赖于任何特定框架（如 angular 或反应）。

我希望能够使用 GraphQL 库进行 GraphQL 调用。 我检查了 Apollo，但它带来了反应（我不需要）。 在graphql-js文档中，说明可以在浏览器中使用，同时他们只提供了服务器端代码的代码示例。

到目前为止，我只是制作简单的 rest class，但我有兴趣至少自动生成类型，因为这很不方便。

Q：如何在客户端代码中使用graphql-js？ 或者有没有其他方法可以调用 graphql 端点而无需导入带有反应的 Apollo？

任何建议表示赞赏。

Answer 1

Apollo 客户端不需要React。 Apollo 客户端文档非常以 React 为中心（至少对于 Javascript），但客户端公开了一个API ，它可以在没有 React 的情况下使用。 即使在构建 React 时，使用client.query()在组件上下文之外执行查询也是很有用的。

另请参阅https://www.brianperry.dev/til/2021/using-apollo-without-react/以了解如何在没有反应的情况下导入 Apollo Client：

import { ApolloClient, gql, InMemoryCache } from "@apollo/client/core";

Answer 2

GraphQL 请求可以超过 HTTP。大多数服务器遵循“GraphQL over HTTP”规范。 可以在文档中找到如何使用POST HTTP 方法完成请求， 此处还有相当长的教程。 这是一个简单的获取示例：

await fetch('http://your.server.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query: "...",
    variables: { "a": "..." },
  }),
});

为了获得更好的体验和更少的样板文件，您可以使用graphql-request 。

import { request, gql } from 'graphql-request'

const query = gql`
  {
    ...
  }
`

await request('https://api.spacex.land/graphql/', query)

我还喜欢将库与GraphQL 代码生成器配对。 您可以创建一个完全类型化的 SDK或使用更简单的类型化文档节点来获取类型安全的查询变量和结果。

如需有关设置的灵感，您可以使用我的存储库。 有点老了，需要一些package升级，不过我觉得原理应该是一样的。

Answer 3

我想这正是你想要的

https://www.npmjs.com/package/graphql-request

这是他们依赖列表的链接。 它没有反应依赖性。

https://www.npmjs.com/package/graphql-request?activeTab=dependencies

此外，它还很轻巧，并具有 typescript 支持（如果您需要）。