Redux Toolkit - 当查询参数无效时不发送请求

Question

我检查了 redux 工具包文档，但没有看到此典型用例的示例：不发送具有无效参数的查询请求。

例如，对端点 /categories/{name} 的 get 请求需要名称值。如果名称没有值，则不应发出请求。

const baseQuery = fetchBaseQuery({
  baseUrl: Constants.PATHWAY_API_URL
});

export const pathwayApi = createApi({
  reducerPath: 'pathwayApi',
  baseQuery: baseQueryWithReAuth,
  endpoints: builder => ({
    getSubCategories: builder.query({
      // NETWORK REQUEST SHOULD NOT BE MADE IF "name" param is falsy
      query: name => `${Constants.PATHWAY_API.CATEGORIES_PATH_NAME}/${name}`,
    }),
  }),
});

我想将这种类型的参数验证添加到需要一个或多个参数值的所有查询中。在 createApi （或可能是 fetchBaseQuery）层处理此验证的推荐方法/模式是什么？提前致谢！

Answer 1

实际上，您的函数可能会throw出现错误query。

export const pathwayApi = createApi({
  reducerPath: "pathwayApi",
  baseQuery: baseQueryWithReAuth,
  endpoints: (builder) => ({
    getSubCategories: builder.query({
      // NETWORK REQUEST SHOULD NOT BE MADE IF "name" param is falsy
      query: (name) => {
        if (!name) {
          throw new Error("Category name is required.");
        }
        return `${Constants.PATHWAY_API.CATEGORIES_PATH_NAME}/${name}`;
      }
    })
  })
});

当这种情况发生时，你的钩子将会有isError: true ，但不会发出网络请求。error钩子的属性将是一个具有SerializedError、 和 属性的对象name，message您stack可以使用它在 UI 中显示错误。

如果您的代码中有某个地方，这与您得到的错误对象类型相同TypeError。请注意，JavaScript 错误会出现error.message，而 API 错误 ( FetchBaseQueryError) 则会出现error.error。

const Category = ({ name }) => {
  const { data, error, isError } = useGetSubCategoriesQuery(name);

  return (
    <div>
      <h3>Name: "{name}"</h3>
      {isError && (
          <div>{error?.error ?? error?.message}</div>
      )}
    </div>
  );
};

代码沙盒链接