Search code examples
reactjstypescriptreduxreact-reduxrtk-query

Is there a way we can provide default data on API fail in RTK Query?


I am trying RTK Query for the first time to fetch some data in a react + ts application. Is there a way where I could specify some default data if the API fails? What is the good practice that should be followed here?

export const dummyApi = createApi({
  reducerPath: 'dummyApi',
  baseQuery,
  tagTypes: ['Dummy'],
  endpoints: (builder) => ({
    getDummy: builder.query<DummyItem[], void>({
      query: () => `/dummy`,
      providesTags: ['Dummy'],
      transformResponse: (response: DummyApiResponse) =>
        return [...someDefaultListOfItems, ...response.data];
      },
    }),
  }),
});

I tried something in transformErrorResponse but couldn't figure it out.


Solution

  • const handleError = (args, { queryFulfilled }) => {
      try {
        const { data } = await queryFulfilled;
      } catch (error) {
        // return default data in here
      }
    };
    
    export const dummyApi = createApi({
      reducerPath: 'dummyApi',
      baseQuery,
      tagTypes: ['Dummy'],
      endpoints: (builder) => ({
        getDummy: builder.query<DummyItem[], void>({
          query: () => `/dummy`,
          providesTags: ['Dummy'],
          transformResponse: (response: DummyApiResponse) =>
            return [...someDefaultListOfItems, ...response.data];
          },
          onQueryStarted: handleError
        }),
      }),
    });
    

    You can try onQueryStarted API and handle error by using try catch block as my example. Hope it's helfull.