我可以在不使用 Apollo 的情况下使用 graphql 进行反应吗？

Posted 2023-03-08

【中文标题】我可以在不使用 Apollo 的情况下使用 graphql 进行反应吗？

【英文标题】：can i use graphql in react without using Apollo?

【发布时间】：2020-04-24 07:14:24

【问题描述】：

我正在尝试将 GraphQl 与 react 一起使用。 建议提供了使用 apollo 客户端对应用程序实施 graphql 的反应。 但我不想一开始就使用它。

我可以在不使用 apollo 客户端的情况下使用 graphql 做出反应吗？

【参考方案1】：

是的。我们可以在不使用 Apollo 客户端的情况下将 GraphQL 与 React 一起使用。我们可以使用 fetch 或 axios 并且可以使事情相同。

以下示例演示了使用 fetch 查询 GraphQL 端点。

fetch(<graphql_endpoint>, 
  method: 'POST',
  headers:  'Content-Type': 'application/json' ,
  body: JSON.stringify( query: ' posts  title  ' ),
)
.then(res => res.json())
.then(res => console.log(res.data));

同样的事情可以使用 axios 轻松实现。希望这会有所帮助！

【讨论】：

我们需要什么样的包来获得这种支持，例如示例？谢谢。

fetch 内置在 javascript 中。可以直接使用。

【参考方案2】：

是的，因为GraphQL is a spec 而不仅仅是一家公司的实施（无论有多少人认为该实施很好）。 GraphQL 的核心只是一种查询格式和结构化响应。甚至网络调用也不是绝对需要的。

您也可以在浏览器中跳过 Apollo，而只需调用一个普通的 Web 请求。您可以使用 XMLHttpRequest 或 Fetch API 轻松进行 AJAX 调用以执行 GraphQL 查询。我能想到的最简单的解决方法是在某处安装GraphiQL 或Playground，打开浏览器的开发工具，然后执行查询。大多数浏览器的开发者工具的网络标签会显示你需要的所有请求头和 URL 参数。

Apollo 客户端只是为您完成了很多工作，并且有一个非常健康的生态系统来添加缓存、联合等，但是没有什么可以阻止您跳过该库并在没有中间人的情况下自己进行 HTTP 调用。

【讨论】：

GraphQL 与传输无关。它不是特定于 HTTP 的。一个 GraphQL 服务可以在完全没有网络调用的情况下执行文档。