React Query GEF AXIOS实例来自React上下文

Question

我将与Axios客户端一起使用React-Query。我需要创建一些不受静态AXIOS实例的通用组件，但它们将从React上下文中获得。因此，我可以在多个项目之间分享它们。

目前，我周围有一个包装器，这将为我提供Axios实例。这样：

import { useQuery as useReactQuery } from 'react-query';
import { useAxios } from './axios';

export const useQuery = (queryKey, queryFn, options) => {
  const axios = useAxios();
  return useReactQuery(queryKey, (queryContext) => queryFn(queryContext, axios), options);
};

它有效，但我不喜欢。因为我需要到处导入此包装器而不是原始方法，并且会给项目上的新移民带来头痛（我甚至为此写了Eslint规则）。

有人知道更好的解决方案吗？我找不到更好的东西。

Answer 1

这似乎是一个很好的解决方案，也是自定义挂钩的目的。新移民可能应该适应当前代码库的操作，如果每个人都使用您的自定义usequery，他们也将使用它。如果没有useaxios，他们将如何提出正确的请求？

您也可以使用现有的ESLINT规则 noflow noreferrer'> no-restruction-imports 直接禁止从react-Query导入usequery。

最后，如果没有react-Query，您将如何做不同的事情？您可能还会有自定义挂钩调用useaxios，并产生useffect左右。因此，实际上，自定义挂钩完全可以:)