React-query 系列第 2 部分：QueryClient 配置。
大家好！
我回来了，而且更有信心了💪。我也非常感谢上一篇文章给予我的鼓励。谢谢！
在第一部分“react-query 基础配置”中，我们讨论了如何react-query在 React 项目中快速配置。我们也提到了QueryClientProvider组件、queryClient组件ReactQueryDevtools和 queryClient 配置对象queryClientConfig。
这篇文章会比较长，所以请使用下面的链接跳转到您感兴趣的部分。
目录
引言
在本部分，我们将简要讨论queryClientConfig之前看到的配置设置对象。我们还将了解配置中的每个键值对如何影响我们的查询和变更操作。
QueryClient 配置
你还记得上一篇文章里的这段话吗？
import { QueryClient, QueryClientProvider } from 'react-query';
const queryClientConfig = {
defaultOptions: {
queries: {
retry: 2,
staleTime: 1000 * 30,// 30seconds
cacheTime: 1000 * 30, //30 seconds
refetchOnMount: "always",
refetchOnWindowFocus: "always",
refetchOnReconnect: "always",
refetchInterval: 1000 * 30, //30 seconds
refetchIntervalInBackground: false,
suspense: false,
},
mutations: {
retry: 2,
},
},
...
该queryClientConfig对象使我们能够调整和覆盖react-query库的默认行为，或者更准确地说，它允许我们为应用程序中的查询和变更创建自定义默认值。如有需要，也可以为应用程序中的每个查询或变更实例覆盖此全局配置（我们将在下一篇文章中介绍如何操作）。嵌套在该queryClientConfig对象中的是另一个defaultOptions对象，该对象本身又包含两个对象： `A`queries和`B`。我们将讨论的是这两个对象（` A` 和 `B` ）mutations中的键值对。queriesmutations
查询
该queries对象允许我们配置react-query查询的行为。根据文档，queries还可以传入更多配置选项，但我选择只使用这部分内容，以保持简洁性和灵活性，而且我认为这些选项与本文的主题最为相关。
重试
该retry选项接受一个值，可以是 `count` boolean、 `error`number或function`retry`。当 `count` 为`false` 时false，默认情况下不会重试失败的查询。
传入一个true值则确保查询无限重试（即持续重试直到查询成功）。
当retry`count` 被赋予一个number值时，失败的查询将一直重试，直到失败的查询次数达到该值为止。`retry`retry也接受一个function值。function它的第一个参数是失败次数（number），第二个参数是错误信息。它function必须返回一个 ` booleanretry` 对象，以确定是否应该重试查询。
...
//function as value for retry
const queryClientConfig = {
defaultOptions: {
queries: {
retry: (failureCount, error) => {
//...do something with passed argument
}
...
},
},
...
function作为该值的retry目的是让我们能够更精细地控制是否应该根据失败尝试次数、错误类型或两者来决定是否重试查询。
过时时间
staleTime表示成功查询返回的数据被视为过期的毫秒数。该参数staleTime接受 `a`number或Infinity`b` 作为值。`b`Infinity作为值可确保数据永远不会被视为过期。当staleTime接收到 `b` 时number，`b` 的值number计算为数据被视为过期的毫秒数。
缓存时间
该cacheTime选项接收一个值，可以是 `a`number或Infinity`b`。它表示未使用/不活跃的缓存数据在内存中保留的时间（以毫秒为单位）。当缓存数据变为未使用或不活跃时，经过此时间后将从内存中清除。如果指定了不同的缓存时间，则使用最长的缓存时间。
如果cacheTime设置为 `Infinity`，则缓存数据永远不会从内存中清除。
当cacheTime`a`number的值是 `b` 时，该值表示未使用/不活跃的缓存数据从内存中清除前的剩余时间（以毫秒为单位）。
挂载时重新获取
当组件挂载并首次运行查询时，该成功查询返回的数据会被缓存。有时，如果组件重新挂载且上次调用返回的数据仍然存在于缓存中，我们可能不希望再次运行相同的查询；这就是 `refetch` 参数的作用。`refetch` 参数接受 `a`或 ` : ` 作为其值。 如果设置为`false`，默认情况下，组件挂载时不会重新获取查询数据。如果 设置为 ` true`，则当缓存中的数据refetchOnMount被视为过期时，查询数据将被重新获取。`refetch`参数的值将确保无论缓存数据是否过期，查询数据都会被重新获取。 （请参阅 `[此处应插入相关文档以了解数据何时被视为过期]`）。refetchOnMountbooleanstring"always"falsetrue"always"staleTime
窗口聚焦时重新获取
此选项与 `onFactoryFactory` 类似，refetchOnMount但针对的是窗口焦点。
我们可能希望在用户将焦点切换回正在使用我们应用程序的浏览器标签页时，向他们显示最新的数据； ` refetchOnWindowFocusonFactoryFactory` 可以实现这一点。
它接受的值与 `onFactoryFactory` 类似refetchOnMount，例如 ` booleanonFactoryFactory` 或 `onFactoryFactory` string。"always"当
` refetchOnWindowFocusonFactoryFactory` 设置为 `false`时false，窗口焦点切换时不会重新获取查询结果。当 `onFactoryFactory` 设置为`true` 时true，仅当缓存数据过期时才会重新获取查询结果。`onFactoryFactory`"always"会导致无论缓存数据是否过期，都会重新获取查询结果。
重新连接时重新获取
用户在使用我们的应用程序时，可能会断开网络连接。在此期间，无论时间长短，远程数据都可能发生更改。refetchOnReconnect我们允许用户控制应用程序在用户恢复网络连接后是否重新获取查询。该参数refetchOnReconnect接受 `a`boolean或 `b` 参数string。"always"现在，您应该已经猜到它的作用了 😉。如果 `a`
为false`false`，则在重新连接到互联网时完全不会重新获取查询。`b`true仅当数据被视为过期时才允许在重新连接时重新获取查询。（同样，请检查 `b`staleTime以了解缓存数据何时被视为过期）。`b`"always"将确保无论缓存数据是否过期，都会重新获取查询。
重新获取间隔
我们可能希望应用程序按特定时间间隔重新获取查询结果，无论数据是否过期。这对于快速变化的远程数据或应用程序的近实时运行非常有用。`timeout`refetchInterval参数接受 `timeout`false或 `timeout`number作为其值。`timeout`false表示查询不会按时间间隔重新获取。
当 `timeout`参数number接受 `timeout`refetchInterval作为值时，该值会被计算为以毫秒为单位的时间。例如，`timeout` 参数的值为 5000 表示refetchInterval查询将每 5 秒重新获取一次。
refetchIntervalInBackground
您是否希望显式控制refetchInterval用户未聚焦于我们应用时的行为？`setInterval()` 函数refetchIntervalInBackground可以实现这一点。它只接受 `setInterval() boolean` 值。`setInterval true()` 值表示即使应用未处于焦点状态，查询也会按设定的时间间隔（由 `setInterval( )` 函数设置refetchInterval）重新获取。如果 `setInterval()` 值为 `false`，则应用未false处于焦点状态时，查询不会按设定的时间间隔重新获取。
悬念
suspense仅接受boolean值。
设置为 true 时true，活动查询将暂停，并在发生错误时抛出运行时错误。
设置为 false 时false，活动查询既不会暂停也不会在发生错误时抛出运行时错误。
突变
呼😤如果你已经看到这里了，我非常感激。我自己也有点😩。坚持住，我们快要完成了。
该mutations对象允许我们配置变更react-query操作的行为。变更操作用于对服务器执行创建、更新和删除操作。任何需要修改远程数据的操作都应该使用它。让我们来讨论该对象mutations中的唯一一项：mutationsretry
重试
retry作为对象的选项，mutations它与 `retry` 类似queries。retry它接受 `null` boolean、 `undefined`number或function`undefined` 作为其值。`undefined`false作为 `retry` 的值retry可确保默认情况下失败的 mutation 不会重试。
当true`undefined` 为 `0` 时，失败的 mutation 将无限重试（即直到 mutation 成功为止）。
如果设置为一个值number（例如 3），则失败的 mutation 将重试直到失败的 mutation 计数达到该值。`retry`function作为 `retry` 的值retry允许我们自行决定何时让失败的 mutation 重试。此方法function必须返回一个 `undefined` boolean。
...
//function as value for retry in mutations
const queryClientConfig = {
defaultOptions: {
...
mutations: {
retry: (failureCount, error) => {
//...do something with passed argument
}
},
},
...
结论
这篇文章有点长，非常感谢大家能读到这里。
下一部分，我们将讨论如何使用 useQuery hook 获取数据。
感谢大家的支持。如果这篇文章或其中的一部分对您有所帮助，请给我点个赞💖。也欢迎留言评论。
我的推特账号是@NnajioforEmma10，欢迎关注。
鸣谢
图片：Logrocket：Lawrence Eagles 的 react-query 3 的新特性。