介绍
本文将演示如何使用 apolloclient 库为 graphql 请求设置 react 应用程序。目标是展示如何配置应用程序并提供如何发出请求的示例。
库
@apollo/client：启用状态管理并发出 graphql 请求的库graphql：允许解析 graphql 查询的库
将库添加到项目中：
yarn add @apollo/client graphql –dev
配置
下面，我将展示如何配置 apolloclient 来启用 graphql 请求。
首先，将创建 apolloclient 上下文，以便其子级包含的所有内容都可以发出 graphql 请求：
import { apolloclient, apolloprovider, httplink, inmemorycache} from '@apollo/client'function exampleapolloprovider({ children, token, uri }) { const httplink = new httplink({ uri: uri, headers: { authorization: `bearer ${token}`, }, }) const client = new apolloclient({ cache: new inmemorycache(), link: httplink, }) return {children}}export { exampleapolloprovider as apolloprovider }
在 const 客户端中，apolloclient 被初始化，通过定义的链接指定端点，并使用 inmemorycache 实例指定缓存，apolloclient 使用 inmemorycache 来缓存查询结果。
在 httplink 中，设置了 graphql api 的 uri，以及请求所需的标头。在此示例中，使用了 bearer 令牌。
最后，定义返回和导出以允许其在应用程序内使用。
考虑到这是一个登录后将令牌保存在 localstorage 中的应用程序，并且目标是在整个应用程序中启用 graphql 请求，因此使用上一个文件中定义的 apolloprovider：
创客贴设计
创客贴设计，一款智能在线设计工具，设计不求人，AI助你零基础完成专业设计！
51 查看详情
import { apolloprovider } from './contexts/apollocontext'import appcontent from './components/appcontent'const token = localstorage.getitem('@tokenid')// endpoint of your graphql apiconst graphqluri = 'https://www.example.com'const app = () => { return ( )}
在此示例中，从 localstorage 检索令牌（在本例中，就好像它是使用键 @tokenid 保存的），并且 uri 在同一文件中定义，然后传递给 apolloprovider。 appcontent 作为 apolloprovider 的子级传递，这意味着其中包含的所有内容（整个应用程序）将能够发出 graphql 请求。
实际上，当测试和生产环境不同时，graphqluri 可以来自环境变量，并相应地定义每个环境的 uri。
从 api 公开的名为 user 的查询开始，该查询返回用户的姓名和职业，将使用要调用的查询定义一个文件：
import { gql } from '@apollo/client'const get_user = gql` query getuser { user { name occupation } }`export default get_user
get_user 对应于在 react 应用程序中如何调用查询，user 是要从 api 使用的查询的名称。
在定义appcontent的文件中，将调用get_user查询并使用其返回：
import { useQuery } from '@apollo/client';import GET_USER from './query/UserQuery'const AppContent = () => { const { loading, error, data } = useQuery(GET_USER) if (loading) return
Loading...
if (error) return
Request failed
return (
Welcome!
Name: {data.user.name}
Occupation: {data.user.occupation}
usequery 钩子将执行 get_user 中定义的查询，在请求仍在进行时返回 load true，如果请求失败则返回错误，并在请求成功完成时返回数据。在数据返回之前，屏幕上会显示“正在加载...”消息。如果请求以错误结束，则会显示消息“请求失败”。如果请求成功，屏幕上会显示用户的姓名和职业（name and jobs）。
这样，apolloclient 就已针对 graphql 请求进行了配置并可供使用。
结论
这个想法是演示如何配置 apolloclient 以允许 react 应用程序进行 graphql 调用，显示上下文的定义、此上下文的用法以及如何执行查询的示例。
这是 apolloclient 文档的链接，供想要深入了解的人使用。
以上就是在 React 中为 graphQL 请求设置 Apollo 客户端的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/397358.html
微信扫一扫 
支付宝扫一扫 
