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

Question

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

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

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

CodeSandbox Link

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

Redux Toolkit - do not send request when query param is invalid

redux-toolkit