I3a*_*osh 2 apollo reactjs graphql react-apollo apollo-client
我是 Next.js 和 GraphQL 世界的新手。到目前为止，我一直在使用 React 与 reduxjs 和 axios 进行 API 调用。我会学习更高级的东西，所以这是我的问题。如果我使用 apollo graphql，我有哪些本地状态管理选项？它可以由 apollo 本身处理，还是我应该使用像 redux store 这样的外部工具？
Apollo 的核心是一个 GraphQL 实现，可以帮助人们管理数据。他们还制作并维护一个 GraphQL 客户端（Apollo 客户端），我们可以将其与 Next.js 等 React 框架一起使用。
\nApollo Client 是一个状态管理客户端，允许您使用 GraphQL 管理本地和远程数据，您可以使用它来获取、缓存和修改应用程序数据。
\n在本文中，我们\xe2\x80\x99将讨论为什么我们应该将 Apollo 客户端与 Next.js 结合使用，以及如何将 Apollo 客户端与 Next.js 结合使用，通过 Next.js 支持的三种渲染方法来渲染页面；静态站点生成 (SSG)、服务器端渲染 (SSR) 和客户端渲染 (CSR)。
\n如果你想在组件中使用 Redux 和 Apollo 状态，你需要使用来自 React-Apollo 的 graphql 和来自 React-Redux 的连接。这将使您更好地跟踪应用程序中发生的不同事件，以及客户端和服务器端数据如何交错变化。
\n首先，让\xe2\x80\x99s 看看为什么我们应该将 Apollo 客户端与 Next.js 一起使用。使用 Apollo 客户端的三个主要原因：
\n用 Apollo\xe2\x80\x99 自己的话说，\xe2\x80\x9c 缓存图并不是一件容易的事，但我们\xe2\x80\x99花了两年时间专注于解决它。\xe2\x80\x9d
\nApollo 投入了大量的时间来使其缓存过程尽可能高效和有效。那么，为什么要尝试重新发明轮子呢？如果您在应用程序中获取数据并使用 GraphQL，那么 Apollo 客户端是处理数据的好方法。
\n另一个好处是使用客户端的开发人员所需的设置最少。Apollo 甚至将其标记为 \xe2\x80\x9czero-config。\xe2\x80\x9d 我们将在帖子中进一步的应用程序示例中看到这一点，但是要在应用程序中设置缓存，我们需要做的就是添加我们的应用程序的代码如下：
\nimport { ApolloClient, InMemoryCache } from \'@apollo/client\';\n\nconst client = new ApolloClient({\n cache: new InMemoryCache()\n})\nApollo 客户端内置了一个名为 block useQuery 的自定义 React Hook，我们将在示例应用程序中使用它，并为我们提供内置的加载和错误状态供我们使用。
\n虽然这听起来并不令人印象深刻，但这对开发人员来说意味着我们不需要花时间自己实现这个逻辑，我们只需获取 Hook 返回的布尔值并更改我们的应用程序渲染按要求。
\n由于这些内置状态，使用 Apollo 客户端意味着我们可以花更少的时间担心实现数据获取逻辑，并专注于构建我们的应用程序。
\nApollo 客户端实现 useQuery Hook 方式的另一个好处是，使用 Apollo 客户端获取数据是声明式的，而不是命令式的。
\n这对我们来说意味着我们只需要告诉阿波罗我们想要什么数据，它就会为我们获取数据。我们不需要编写逻辑并为其提供有关如何执行或处理它的分步说明列表。
\n这再次是 Apollo 客户端如何帮助加快开发并使我们在使用 GraphQL 时变得更高效的开发人员的另一个很好的例子。
\n如果为什么将 nextjs 与 apollo 一起使用，您可以在此页面中了解更多信息：此链接
\n默认情况下，Apollo Client 创建自己的内部 Redux 存储来管理查询及其结果。如果您已经在应用程序的其余部分使用 Redux，则可以将客户端与现有商店集成。
\n简而言之，当您使用 Apollo 时，您不应该将该数据放入 Redux 中。您仍然可以使用 Redux 来做其他事情，但 apollo 的职责是存储该数据并使其可供您的组件访问。将其取出并放入 Redux 意味着做双倍的工作却没有额外的收益，并且因此存在很大的风险，您会在两个级别之间引入大量异步。
\n从此处引用：\n在此处输入链接描述
\n如果您想从这里集成 redux 和 apollo 并了解更多信息：在此处输入链接描述
\n如果需要将 redux 与 apollo 一起使用，也可以在此处了解更多信息：在此处输入链接描述
\n| 归档时间： |
|
| 查看次数： |
1183 次 |
| 最近记录： |