在你的ReactJS应用中搭建React查询的脚手架 （附代码示例）

我们已经学会了如何充分利用Axios和react query，但现在是时候从结构方面着手，提高代码的可读性了。在这篇文章中，我们将以更简洁的方式注入react query，使每个人都能第一时间了解你的代码。不要浪费任何时间，让我们直接进入这个话题。

脚手架

我们以下列方式为我们的项目搭建脚手架

在 config/https.js我们有我们的Axios配置。我们有Axios的配置，并采用了模块化的方法。 模块下，我们有我们的API和自定义钩子，服务于单一责任原则。通过配置中的基本URL，我们在里面有我们的模块化路由 modules/planets/api.js作为

import { axiosInstance } from "../../config/https";

const fetchPlanets = async () => {
  return axiosInstance({
    url: "planets",
    method: "GET",
  }).then(({ data }) => {
    return data;
  });
};

export { fetchPlanets };

而在 modules/planets/hooks.js是我们的自定义钩子，消耗API层，如

import { useQuery } from "@tanstack/react-query";
import { fetchPlanets } from "./api";

const usePlanets = () => {
  return useQuery(["get-planets"], fetchPlanets, {
    select: (data) => data,
  });
};

export { usePlanets };

消耗自定义钩子

现在，我们的自定义钩子已经准备好了，我们可以在我们的自定义组件中消费它，如

function CustomComponent() {
  const [planets, setPlanets] = useState([]);
  const { data, isLoading } = usePlanets();

  useEffect(() => {
    setPlanets(data);
  }, [data]);

  return (
    {isLoading ? (
      <InfinitySpin width="500" color="blue" />
    ) : (
      <PlanetList
        planets={planets}
        classNames={classNames}
      />
    )}
  )
}

大揭秘

来访的鲍勃是你的叔叔...

总结

就这样了，我希望下次你试图从你的服务器上获取一些数据时，你能用更干净的方式和反应查询来完成，因为它显然是快速和容易集成的。这不是一个告别，主要是继续向上滚动，继续学习新的东西。