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.
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.