如何阻止 Redux RTK 查询出错时重试

Question

我有一些请求可能会返回 404。当它们这样做时，RTK 查询将发送重试，从而导致数百个失败的请求。为什么它会在错误时尝试重新获取？我该怎么办？

Answer 1

如果您的终端出现错误，RTK 查询的

useQuery

将在两种情况下发送请求：

• 您更改参数（这总是会导致新的请求）
• 您可以使用此安装组件

  useQuery

  。

因此，在没有看到您的代码的情况下，我会假设您的组件以某种方式重新安装，从而在安装后导致另一个请求。

Answer 2

您可以通过使用端点内的属性

maxRetries

来限制 rtk 自动执行的重试次数。

请参阅此处重试文档

import { createApi, fetchBaseQuery, retry } from 
'@reduxjs/toolkit/query/react'

// maxRetries: 5 is the default, and can be omitted. Shown for 
documentation purposes.
const staggeredBaseQuery = retry(fetchBaseQuery({ baseUrl: '/' }), {
  maxRetries: 5,
})
export const api = createApi({
  baseQuery: staggeredBaseQuery,
  endpoints: (build) => ({
    getPosts: build.query({
      query: () => ({ url: 'posts' }),
    }),
    getPost: build.query({
      query: (id) => ({ url: `post/${id}` }),
     extraOptions: { maxRetries: 5 }, // You can override the retry behavior on each endpoint
    }),
  }),
})

export const { useGetPostsQuery, useGetPostQuery } = api

Answer 3

正如文档所说，对于自定义错误处理，我们可以使用

queryFn

：

使用不同错误处理行为的一次性查询

因此，如果出于任何原因，您想在错误时缓存请求，您可以这样做：

getPokemon: build.query<Pokemon, string>({
  async queryFn(name, api, extraOptions, baseQuery) {
    const result = await baseQuery({
      url: `https://pokeapi.co/api/v2/pokemon/${name}`,
      method: 'GET'
    });

    if (result.error?.status === 404) {
      // don't refetch on 404
      return { data: result.data as Pokemon };
    }

    if (result.error) {
      // but refetch on another error
      return { error: result.error };
    }

    return { data: result.data as Pokemon };
  }
}),

Answer 4

您需要自定义您的createApi函数。您可以通过将 unstable__sideEffectsInRender 属性设置为 false

来永久停止重试

import {
  buildCreateApi,
  coreModule,
  reactHooksModule,
} from '@reduxjs/toolkit/dist/query/react';

const createApi = buildCreateApi(
  coreModule(),
  reactHooksModule({ unstable__sideEffectsInRender: false })
);

export default createApi;

Answer 5

const {isError} = useQuery();

如果（是错误） 显示错误信息 别的 渲染组件。

在组件渲染之前检查 useQuery 返回的 isError 属性。如果 API 失败，则“isError”变为 true，然后渲染组件，这将阻止针对失败场景的多个 API 请求。