Question

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

我在<代码>transformErrorResponse中尝试过一些东西,但可以查到。

Answer 1

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.

友情链接