CODEWITHSUNDEEP
reactjsreduxrtk-query
HahnSolo
HahnSolo

Reputation: 125

How to stop Redux RTK query from retrying on error

I have some requests which may return 404s. When they do, RTK query will send retries, resulting in hundreds of failed requests. Why is it trying to refetch on error and what can I do?

Upvotes: 6

Views: 12609

Answers (6)

tr4ndat
tr4ndat

Reputation: 19

Apr 2024 answer: You can customize the retryCondition:

import { Mutex } from 'async-mutex'
import {
  BaseQueryApi,
  BaseQueryFn,
  FetchArgs,
  fetchBaseQuery,
  FetchBaseQueryError,
  retry,
} from '@reduxjs/toolkit/query'
import { RootState } from '@common/store'
import {
  BaseQueryArg,
  BaseQueryExtraOptions,
} from '@reduxjs/toolkit/dist/query/baseQueryTypes'
import { RetryOptions } from '@reduxjs/toolkit/dist/query/retry'

// HERE
const customRetryCondition = (
  error: FetchBaseQueryError,
  args: BaseQueryArg<BaseQueryFn>,
  {
    attempt,
    extraOptions: { maxRetries } = {},
  }: {
    attempt: number
    baseQueryApi: BaseQueryApi
    extraOptions: BaseQueryExtraOptions<BaseQueryFn> & RetryOptions
  },
) => {
  // retry on default condition
  const defaultCondition = attempt <= (maxRetries || 0)
  if (defaultCondition) {
    return true
  }

  // retry on network's errors
  if (error.status === 'FETCH_ERROR' || error.status === 'TIMEOUT_ERROR') {
    return true
  }

  // other case (application logic error), don't retry
  return false
}

const baseQuery = retry(
  fetchBaseQuery({
    prepareHeaders: (headers, { getState }) => {
      const {
        userAuth: {
          token: { accessToken },
        },
      } = getState() as RootState
      const token = accessToken
      if (token) {
        headers.set('authorization', `Bearer ${token}`)
      }

      return headers
    },
    baseUrl,
  }),
  {
    maxRetries: 5,
    // HERE
    retryCondition: customRetryCondition as unknown as undefined, // avoiding typescript error
  },
)

Upvotes: 0

asif.ibtihaj
asif.ibtihaj

Reputation: 391

you can limit the number of retries that rtk automatically does by using the property maxRetries inside your end point.

See the retry documentation here

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

Upvotes: 4

KARTHIK PARAMESWARAN
KARTHIK PARAMESWARAN

Reputation: 1

const {isError} = useQuery();

if (isError) show error message else render the components.

check the isError property return by useQuery before the component renders. If API failed then 'isError' becomes true then renders the components, which will prevent multiple API requests for the failed scenario.

Upvotes: 0

Mehmet
Mehmet

Reputation: 180

You need to customize your createApi function. you can stop permanently retries with setting unstable__sideEffectsInRender property to false

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

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

export default createApi;

Upvotes: 0

pvlcor
pvlcor

Reputation: 39

As docs say, for custom error handling we can use queryFn:

One-off queries that use different error handling behaviour

So if, for any reason, you want to cache request on error, you can do:

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 };
  }
}),

Upvotes: 0

phry
phry

Reputation: 44226

If your endpoint is in error, RTK Query's useQuery will send a request in two situations:

  • you change the argument (that would always result in a new request)
  • you mount a component using this useQuery.

So without seeing your code, I would assume that your component re-mounts somehow and thus leads to another request after mounting.

Upvotes: 5

Related Questions