React Query 提供了许多高级特性,使数据管理更加灵活和强大:
1. 依赖查询(Dependent Queries)
依赖查询是指一个查询的执行依赖于另一个查询的结果。
使用场景:当你需要先获取一个资源的 ID,然后用这个 ID 获取详细信息时。
实现方式:
javascriptconst { data: user } = useQuery(['user', userId], fetchUser); // 只有当 user 存在时才执行第二个查询 const { data: userPosts } = useQuery( ['posts', user?.id], () => fetchPosts(user.id), { enabled: !!user } );
2. 并行查询(Parallel Queries)
并行查询是指同时执行多个独立的查询。
使用场景:当你需要在一个组件中获取多个不相关的数据时。
实现方式:
javascript// 方式1:多个 useQuery 钩子 const { data: users } = useQuery('users', fetchUsers); const { data: posts } = useQuery('posts', fetchPosts); // 方式2:使用 useQueries 钩子(React Query v3+) const results = useQueries([ { queryKey: ['users'], queryFn: fetchUsers }, { queryKey: ['posts'], queryFn: fetchPosts }, ]);
3. 窗口聚焦重新获取(Window Focus Refetching)
当用户重新聚焦浏览器窗口时,React Query 可以自动重新获取数据。
使用场景:确保用户看到的是最新数据,特别是在多标签页应用中。
配置方式:
javascript// 全局配置 const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: true, // 默认值 }, }, }); // 单个查询配置 const { data } = useQuery('todos', fetchTodos, { refetchOnWindowFocus: false, // 禁用 });
4. 分页和无限滚动(Pagination & Infinite Scroll)
React Query 提供了专门的钩子来处理分页和无限滚动。
实现方式:
javascript// 分页查询 const { data, fetchNextPage, hasNextPage } = useInfiniteQuery( ['posts', pageSize], ({ pageParam = 1 }) => fetchPosts(pageParam, pageSize), { getNextPageParam: (lastPage, pages) => { return lastPage.hasMore ? pages.length + 1 : undefined; }, } );
5. 轮询(Polling)
自动定期重新获取数据。
使用场景:需要显示实时数据的应用,如仪表盘、聊天应用等。
配置方式:
javascriptconst { data } = useQuery('todos', fetchTodos, { refetchInterval: 5000, // 每5秒重新获取 refetchIntervalInBackground: true, // 后台也轮询 });
6. 预取(Prefetching)
提前获取可能需要的数据,提升用户体验。
实现方式:
javascript// 手动预取 queryClient.prefetchQuery('todos', fetchTodos); // 视口预取(使用 react-query/prefetch) usePrefetchQuery('todos', fetchTodos);
7. 持久化缓存(Persisted Queries)
将缓存数据持久化到 localStorage 或其他存储中。
实现方式:使用 persistQueryClient 插件
这些高级特性使得 React Query 能够应对各种复杂的数据获取场景,提供更灵活、更高效的数据管理方案。