将Next.js与redux和apollographql相结合的好方法是什么



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

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

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

在这篇文章中,我们将讨论为什么我们应该将Apollo Client与Next.js一起使用,以及如何使用Apollo客户端与Next..js一起通过Next.js支持的三种渲染方法来渲染页面;静态站点生成(SSG(、服务器端渲染(SSR(和客户端渲染(CSR(。

如果您想在组件中使用Redux和Apollo状态,则需要同时使用来自react Apollo的graphql和来自react Redux的connect。这将使您能够更好地跟踪应用程序中发生的不同事件,以及客户端和服务器端数据的交替变化。

为什么将Apollo Client与Next.js一起使用

首先,让我们看看为什么我们应该将Apollo客户端与Next.js一起使用。使用Apollo Client有三个关键原因:

  1. 开箱即用的缓存支持
  2. 内置加载和错误状态
  3. 数据获取的声明性方法

开箱即用的缓存支持

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

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

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

import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
cache: new InMemoryCache()
})

内置加载和错误状态

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

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

由于有了这些内置状态,使用Apollo客户端意味着我们可以花更少的时间担心实现数据获取逻辑,并专注于构建我们的应用程序。

数据获取的声明性方法

Apollo客户端实现useQuery Hook的另一个好处是,使用Apollo Client获取数据是声明性的,而不是强制性的。

这对我们来说意味着,我们只需要告诉Apollo我们想要什么数据,它就会为我们提供这些数据。我们不需要编写逻辑,也不需要给它一个关于如何做到或处理它的分步说明列表。

再一次,这是Apollo客户端如何在使用GraphQL时帮助加快开发速度并使我们成为更高效的开发人员的又一个很好的例子。

如果为什么要将nextjs与apollo一起使用,你可以在这个页面上了解更多信息:这个链接


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

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

引用自此处:在此处输入链接描述

如果你想从这里集成redux和apollo,请了解更多信息:在这里输入链接描述

如果有必要将redux与apollo一起使用,请在此处了解更多信息:在此处输入链接描述

相关内容

最新更新