将 Next.js 与 redux 和 apollo graphql 结合起来的好方法吗?

Is good approach to combine Next.js with redux and apollo graphql?

我是 Next.js 和 GraphQL 世界的新手。到目前为止,我一直在使用 react with reduxjs 和 axios 进行 API 调用。我会学习更高级的东西,所以这是我的问题。如果我使用 apollo graphql,我有哪些本地状态管理选项?它可以由 apollo 本身处理,还是我应该使用像 redux store 这样的外部工具?

Apollo 的核心是一个 GraphQL 实现,可以帮助人们管理他们的数据。他们还制作并维护一个 GraphQL 客户端(Apollo 客户端),我们可以将其与 Next.js.

等 React 框架一起使用

Apollo Client 是一个状态管理客户端,允许您使用 GraphQL 管理本地和远程数据,您可以使用它来获取、缓存和修改应用程序数据。

在本文中,我们将讨论为什么要使用带有 Next.js 的 Apollo Client 以及如何使用带有 Next.js 的 Apollo Client 通过三种渲染方式渲染页面 Next.js 支持;静态站点生成 (SSG)、server-side 渲染 (SSR) 和 client-side 渲染 (CSR)。

如果你想在组件中使用你的 Redux 和 Apollo 状态,你需要同时使用来自 react-apollo 的 graphql 和来自 react-redux 的连接。这将让您更好地跟踪您的应用中发生的不同事件,以及您的客户端和服务器端数据如何交替变化。

为什么要将 Apollo Client 与 Next.js

一起使用

首先,让我们看看为什么我们应该使用 Apollo Client 和 Next.js。使用 Apollo Client 的三个主要原因:

  1. Out-of-the-box 支持缓存
  2. Built-in 加载和错误状态
  3. 数据获取的声明式方法

Out-of-the-box 支持缓存

用 Apollo 自己的话说,“缓存图形不是一件容易的事,但我们花了两年时间专注于解决它。”

Apollo 投入了大量时间来使他们的缓存过程尽可能高效和有效。那么,为什么要重新发明轮子呢?如果您在应用程序中获取数据并使用 GraphQL,那么 Apollo Client 是处理数据的好方法。

另一个好处是使用客户端的开发人员只需进行最少的设置。阿波罗甚至将其标记为“zero-config”。我们将在 post 的应用程序示例中看到这一点,但要在应用程序中设置缓存,我们需要做的就是将以下代码添加到我们的应用程序中:

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  cache: new InMemoryCache()
})

Built-in 加载和错误状态

Apollo Client 内置了一个名为 block useQuery 的自定义 React Hook,我们将在示例应用程序中使用它,并为我们提供 built-in 加载和错误状态供我们使用。

虽然这听起来并不令人印象深刻,但对开发人员来说意味着我们不需要花时间自己实现这个逻辑,我们只需将布尔值作为 Hook returns 并更改我们的应用程序根据需要渲染。

多亏了这些 built-in 状态,使用 Apollo Client 意味着我们可以花更少的时间担心实现数据获取逻辑并专注于构建我们的应用程序。

数据获取的声明式方法

Apollo Client 实现 useQuery Hook 的方式的另一个好处是使用 Apollo Client 获取数据是声明式的而不是命令式的。

这对我们来说意味着我们只需要告诉 Apollo 我们想要什么数据,它就会为我们获取。我们不需要编写逻辑并给它一个 step-by-step 说明如何做或处理它的列表。

再一次,这是另一个很好的例子,说明 Apollo Client 如何帮助加速开发并使我们在使用 GraphQL 时更高效的开发人员。

如果为什么要将 nextjs 与 apollo 一起使用,您可以在此页面中了解更多信息:This link


默认情况下,Apollo Client 创建自己的内部 Redux 存储来管理查询及其结果。如果您已经在应用程序的其余部分使用 Redux,则可以让客户端与现有商店集成。

简而言之,当您使用 Apollo 时,您不应该将该数据放入 Redux。您仍然可以将 Redux 用于其他用途,但 apollo 的职责是存储该数据并使其可供您的组件访问。将其取出并放入 Redux 意味着做双倍的工作而没有额外的收益,并且存在很大的风险,您会因此在两个级别之间引入很多异步。

引用自这里:

如果您想从这里集成 redux 和 apollo,可以了解更多信息:enter link description here

如果需要将 redux 与 apollo 一起使用,请在此处了解更多信息:enter link description here