如何在 RTK 查询中定义全局错误处理程序

Question

我以“标准”方式在 RTK 查询中定义了 api，例如

export const myApi = createApi({
  reducerPath: "myApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://some-url",
  }) as BaseQueryFn<string | FetchArgs, unknown, APIError>,
  endpoints: (builder) => ({
    getX: builder.query<ResponseX, null>({
      query: () => ({
        url: "getX",
      }),
      async onQueryStarted: (args, { queryFulfilled }) => {
        try {
          const { data } = await queryFulfilled
        } catch (err) {
          // handle error for getX here
        }
      }
    }),
    getY: builder.query<ResponseY, null>({
      query: () => ({
        url: "getY",
      }),
      async onQueryStarted: (args, { queryFulfilled }) => {
        try {
          const { data } = await queryFulfilled
        } catch (err) {
          // handle error for getY here
        }
      }
    }),
    ...
  })
})

我知道如何处理各个端点的错误，但是有没有一种方法可以定义一个全局错误处理程序，在一个处理程序/函数中捕获来自所有端点的错误？

Answer 1

如果您想要的只是每个查询/突变都有“相同”的错误响应处理，您可以定义一个自定义onQueryStarted函数，等待查询/突变解决并在错误时触发 toast。

const onQueryStartedErrorToast = (args, { queryFulfilled }) => {
  try {
    await queryFulfilled;
  } catch (error) {
    // handle error here, dispatch toast message
  }
};

export const myApi = createApi({
  reducerPath: "myApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://some-url",
  }) as BaseQueryFn<string | FetchArgs, unknown, APIError>,
  endpoints: (builder) => ({
    getX: builder.query<ResponseX, null>({
      query: () => ({
        url: "getX",
      }),
      onQueryStarted: onQueryStartedErrorToast
    }),
    getY: builder.query<ResponseY, null>({
      query: () => ({
        url: "getY",
      }),
      onQueryStarted: onQueryStartedErrorToast
    }),
    ...
  }),
});

这种模式将一直有效，直到您有一个想要为其吐槽错误并执行其他操作的端点为止。在这里，您可以编写一次性onQueryStarted处理程序来完全执行您想要的操作。

如果是这样的情况，无论您想要在哪个端点上 toast 错误，那么您都可以编写自己的自定义基本查询函数，该函数将任何错误读取为“传递”并发出 toast。

例子：

const baseQuery = (baseQueryOptions) => async (args, api, extraOptions) => {
  const result = await fetchBaseQuery(baseQueryOptions)(args, api, extraOptions);

  if (result.error) {
    // dispatch toast message
  }

  return result;
};

export const myApi = createApi({
  reducerPath: "myApi",
  baseQuery: baseQuery({
    baseUrl: "https://some-url",
  }) as BaseQueryFn<string | FetchArgs, unknown, APIError>,
  endpoints: (builder) => ({
    getX: builder.query<ResponseX, null>({
      query: () => ({
        url: "getX",
      }),
      async onQueryStarted: (args, { queryFulfilled }) => {
        try {
          const { data } = await queryFulfilled;
        } catch (err) {
          // handle error for getX here
        }
      }
    }),
    getY: builder.query<ResponseY, null>({
      query: () => ({
        url: "getY",
      }),
    }),
    ...
  }),
});