在你的ReactJS项目中开始使用React Query（附代码示例）

我们之前已经谈到了为什么要在服务器端使用react query ，这次我们要来走一走。在这篇文章中，我们将学习如何轻松地在你的应用程序中使用反应查询。

为什么是React查询？

• 允许你只在需要时或甚至手动更新数据
• 知道你的数据何时过期
• 无缝地管理服务器端
• 最简单的策略，但在大多数时候是最困难的，缓存
• 轻松的懒惰加载
• 支持分页
• 没有模板代码
• 随时可以使用
• 使你的应用程序具有更好的性能

React Query in Action

根据我们的Axios与reactJS介绍指南，我们尝试使用react query 和axios与我们的服务器进行通信。我们把我们的REST API分成一个单独的层，以便有一个单一的责任，使它看起来像这样。

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

并使用 react query 来传递这个函数作为参数，这个参数是 react query 所需要的，它返回的是一个承诺。

  const { isLoading, error, data } = useQuery(["repoData"], fetchPlanet);

BOOOOOM 。这很快速，对吗？看看我们跳过了多少模板代码，只用一个查询的响应就得到了我们需要的一切。我们可以在我们的组件中进一步使用isLoading、错误和数据，不管我们怎么想。

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>Name: {data.name}</h1>
      <h1>Climate: {data.climate}</h1>
      <h1>Diameter: {data.diameter}</h1>
      <h1>Gravity: {data.gravity}</h1>
      <h1>Terrain: {data.terrain}</h1>
      <h1>Population: {data.population}</h1>
      <h1>Orbital Period: {data.orbital_period}</h1>v
    </div>

一路走来，代码更加简洁

一旦你完成了这个简约的代码，你就会意识到Axios和react query结合的力量。这基本上是一个杀手级的组合 。

总结

在这篇文章中，我们学习了如何按照最佳实践用较少的代码与我们的服务器进行有效的沟通。我希望你能跟上这篇文章，因为react query虽然很难掌握，但一旦你开始行动，就无法阻止你了。