有没有办法可以在 RTK 查询 API 失败时提供默认数据？

Question

我第一次尝试 RTK 查询来获取 React + ts 应用程序中的一些数据。如果 API 失败，有没有办法可以指定一些默认数据？这里应该遵循什么好的做法？

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

您可以尝试 onQueryStarted API 并使用 try catch 块（如我的示例）来处理错误。希望对你有帮助。