当查询param无效时不要发送请求

Question

我检查了redux工具包文档，没有看到这个典型用例的示例:不要发送查询的请求，有一个无效的param。

例如，对端点/类别/{ 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}`,
    }),
  }),
});

我希望将这种类型的param验证添加到所有需要param值或值的查询中。在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属性将是一个具有属性name、message和stack的SerializedError对象，您可以使用这些属性在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链路