React Query - 一个实际的例子。

欢迎来到 movies-react-query 👋

欢迎来到 movies-react-query 👋

各位开发者大家好！

自从 React 中出现了“Hooks”和“Context”等新功能后，我们开始在管理应用状态时寻找 Redux 的替代品。这次，我利用这个机会做了一个使用 React Query 的小例子，并分享一些它的优秀功能。

npm install

npm run start

npm run test

为了获取真实数据，我使用了电影数据库 API来获取数据。您需要注册并申请一个 API 令牌，以便在我的代码库中使用。

如何使用 React Query?

正在获取数据。

如果您想获取要在应用程序中使用的数据，这可以非常轻松地完成。React
Query 为我们提供了useQuery获取和控制检索到的数据状态的钩子。

 Javascript
 import { useQuery } from 'react-query'

 function App() {
   const { isLoading, isError, data, error } = useQuery('movies', fetchMovies)
 }

上面的例子中，fetchMovies我们的异步调用将返回一个包含所有影片的数组；这可以是 Axios 调用，也可以是简单的获取。useQuery钩子结果包含一些我们可以在应用中使用的状态。

• isLoading当查询还没有数据时将为真，当您还不能向用户显示数据时，渲染微调器非常有用。

• isError如果异步调用返回错误，则为 true，当然，error状态会提供更多相关信息。如果我们需要在出现问题时渲染一些错误消息，这将非常有用。

• data将为我们带来异步调用的结果，我们可以使用它来呈现我们的数据并将其显示给用户。

如果你没注意到，我们除了useQuery钩子之外什么都没用。我们没有使用诸如useEffect将数据拉取到useState常量之类的东西。React Query 在幕后为我们完成了所有这些工作。

如果您需要更多信息，请查看文档

修改服务器中的数据。

现在想象一下您已经获取并显示电影数据，并且您想要将一部新电影添加到服务器，当然也添加到列表中。

为此，首先，您需要声明一个新的queryCLient来访问缓存。如果您想在整个应用程序中提供相同的客户端，您可能需要使用QueryClientProvider。

一旦您有了新内容，queryClient,我们就可以使用useMutation钩子来制作一部新电影。

 javascript
function MoviesList() {
  // Access the client
  const queryClient = useQueryClient();

  // Queries
  const query = useQuery('movies', getMovies);

  // Mutations
  const mutation = useMutation(postMovie, {
    onSuccess: () => {
      queryClient.invalidateQueries('movies');
    },
  });

  return (
    <div>
      <ul>
        {query.data.map((movie) => (
          <li key={movie.id}> {movie.title} </li>
        ))}
      </ul>
      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),
            title: 'Terminator',
          });
        }}
      >
        Add Movie
      </button>
    </div>
  );
}

上面的代码中有一些重要的事情。
我们声明突变的方式与声明查询的方式非常相似。要使用它，我们调用mutate函数并将有效负载作为参数传递。异步调用完成后，我们可以使用选项onSuccess并使我们正在使用的查询无效，然后通过调用 重新获取数据invalidateQueries。

与钩子类似useQuery，useMutation钩子在响应中也带有有用的状态。

 javascript
const { isLoading, isError, error, data, isSuccess } = useMutation(postMovie, {
  onSuccess: () => {
    queryClient.invalidateQueries('movies');
  },
});

我们可以使用它isLoading来表明某些内容正在发布到服务器。data将为我们提供异步调用的响应。isError并error在发生错误时向我们提供信息。

欲了解更多信息，请查看文档

分页和“加载更多”

我在GitHub 仓库的例子中，想要获取所有电影，但 API 强制我逐页获取。好在 React Query 也为这种情况提供了解决方案。

与使用useQuery钩子时非常相似，我们可以使用useInfiniteQuery，它具有更多有用的状态属性以及一种不同的、更合适的方式来处理数据。

const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery('movies', getPopularMovies, {
    getNextPageParam: (lastPage) =>
      lastPage.page < lastPage.total_pages ? lastPage.page + 1 : undefined,
  });

第一个区别useQuery是检索到的数据的结构。data包含data.pages检索到的所有页面的数组，其中每个页面都包含您在 API 中检索到的内容。data.pageParams具有用于获取页面的所有参数。

我getPopularMovies期望在后台获取一个包含下一页页码的参数。第一次useInfiniteQuery运行时，它会获取下一页page = 1，然后getNextPageParam计算下一页（如果有）。

我们可以使用hasNextPage再次运行useInfinitQuery并获取下一页，isFetchingNextPage表明正在调用，并status告诉我们一切是否正常或发生错误。

也许一开始看不太清楚，只是看到一段代码，所以我邀请你去我的 repo 仔细看看。

其他很酷的东西

我希望将来能加入 React Query 的其他一些酷炫功能。
预取功能允许你在需要数据之前就获取数据，这对于能够预测用户需求的情况非常理想。
乐观更新功能的作用显而易见，但更酷的是，如果出现任何问题，你可以回滚更新。
另外，我建议你了解一下缓存的工作原理。

开发者工具

React Query 有一个很棒的 devtools 功能，可以轻松安装。它会显示应用程序的当前状态。

 import { ReactQueryDevtools } from 'react-query/devtools'

 function App() {
   return (
     <QueryClientProvider client={queryClient}>
       {/* The rest of your application */}
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   )
 }

最后的想法

React Query 是一个强大的工具，但并不能完全取代其他全局状态管理器（例如 Redux 或 Mobx）。在某些情况下，React Query 可以与其他客户端状态库很好地协同工作。

希望以上内容能让您大致了解这个强大的工具。如果您有任何建议、疑问，或者觉得需要对代码库进行一些修改，欢迎随时留言。

npm install

npm run start

npm run test

感谢您的阅读！