本文将介绍如何使用 npm 包 react-apollo
实现 GraphQL 在 React 应用中的数据管理。
什么是 react-apollo?
react-apollo
是一个为 React 应用提供数据管理的 npm 包,它与 Apollo Client 配合使用,可以使得 React 应用在处理 GraphQL 数据时变得更加简单和高效。
安装 react-apollo
在开始使用 react-apollo
前,需要先安装它。你可以在终端中运行以下命令来安装:
npm install --save react-apollo # 或者 yarn add react-apollo
创建一个 Apollo Client
为了使用 react-apollo
,我们首先需要创建一个 Apollo Client,可以在应用入口处进行创建:
import { ApolloClient, InMemoryCache } from '@apollo/client'; const client = new ApolloClient({ uri: 'https://your-graphql-endpoint.com', cache: new InMemoryCache(), });
在上述代码中,我们使用 ApolloClient
和 InMemoryCache
来创建一个 Apollo Client。其中,uri
参数指定了 GraphQL API 的地址,cache
参数指定了数据缓存的方式。
在组件中使用 Query
一旦我们有了一个 Apollo Client,就可以在组件中使用 Query
来获取 GraphQL 数据了。例如,我们可以创建一个组件来显示所有用户:
-- -------------------- ---- ------- ------ - ---- -------- - ---- ----------------- ----- --------------- - ---- ----- - -------- - -- ---- - - -- -------- ---------- - ----- - -------- ------ ---- - - -------------------------- -- --------- - ------ ------------------ - -- ------- - ------ --------- -------------------- - ------ - ---- ----------------------- -- - --- ------------------------------ --- ----- -- -
在上述代码中,我们使用 useQuery
hook 来发送 GraphQL 查询,并在组件中渲染返回的数据。其中,ALL_USERS_QUERY
是一个 GraphQL 查询,它将返回所有用户的 id 和 name。
在组件中使用 Mutation
除了获取数据外,我们还可以使用 Mutation
来修改数据。例如,我们可以创建一个表单来添加新用户:
-- -------------------- ---- ------- ------ - ---- ----------- - ---- ----------------- ----- ----------------- - ---- -------- -------------- -------- - ------------- ------ - -- ---- - - -- -------- ------------- - ----- ------ -------- - ------------- ----- --------- - ------- -- - ------------------------------- ----- ------------ - ----- ----- -- - ----------------------- ----- --------- ---------- - ---- -- ------------- - ----- - -------- ------- - -- - -------------- ------- - ---------------------- - --- - ----- ------ - --------------------- ----- -------- --------- ---- -------- ------- -- ---- - -- ---- - -- --- ------ ------------------ -------- -- -- --- -- --- ------------ -- ------ - ----- ------------------------ ------ ----------- ------------ --------------- -- ---------------------------- ------------------ - ----- -- ------- ------------- ------------------- -------- - ----------- - ------- --------- ------- -- -
在上述代码中,我们使用 useMutation
hook 来发送 GraphQL 变更,并在提交表单后更新缓存。其中,ADD_USER_MUTATION
是一个 GraphQL 变更,它将添加一个新用户,并返回该用户的 id 和 name。
总结
通过 react-apollo
和 Apollo Client 的帮助,我们可以在 React 应用中更加方便和高效地管理 GraphQL 数据。在本文中,我们介绍了如何创建一个 Apollo Client,并在组件中使用 Query
和 Mutation
hooks 来
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/54828