使用 useQuery() （react-query）作为自定义钩子是对还是错？

Question

我使用 useQuery() 从服务器接收数据。为了不每次都重复API站点地址和一系列附加参数，我使用了以下自定义钩子：

export function useGetApi(mode, params, key) {

  // get initial config from context:
  const { config } = useGetConfig();

  const url = `https://example.com/api/${ mode }/?${ params }&lang_code=${ config.language }`;
  const queryKey = `${key}_${config.language}`;


  // async function for get API:
  async function getApi() {
    const { data } = await axios.get(url);
    return data;
  }

  return useQuery(['getApi', queryKey], getApi, {
    enabled: !!config.language
  });
}

包括语言在内的一系列基本设置位于名为“Config”的上下文中。在我的每个组件和每个需求中，我都会调用此自定义挂钩并填写参数，例如：

const { isLoading, data: products } = useGetApi(`products`, `company_id=${companyId}`, `products_${companyId}`);

这是错误的吗？

Answer 1

我个人认为你的做法是没有问题的。React 的美妙之处在于你可以自由地构建组件和自动化文件来提高你的生产力，这就是你所做的。