React Query数据库插件高级数据操作示例代码

在React应用开发中，React Query数据库插件是一个强大的工具，它极大地简化了数据获取和管理的过程。掌握其高级数据操作，能够显著提升应用的性能和用户体验。下面通过示例代码来深入了解。

首先是数据的批量获取。在很多场景下，我们需要一次性从服务器获取多个数据资源。假设我们有一个博客应用，需要同时获取文章列表和用户信息。示例代码如下：

import { useQuery } from 'react-query';

const fetchArticles = () => fetch('/api/articles').then(res => res.json());
const fetchUser = () => fetch('/api/user').then(res => res.json());

const { data: [articles, user], isLoading } = useQuery(
  ['articles', 'user'],
  () => Promise.all([fetchArticles(), fetchUser()]),
  {
    refetchOnWindowFocus: false
  }
);

if (isLoading) {
  return <div>Loading...</div>;
}

return (
  <div>
    <h1>{user.name}'s Articles</h1>
    <ul>
      {articles.map(article => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  </div>
);

这段代码中，useQuery的第一个参数是查询键数组，第二个参数使用Promise.all并行获取多个数据。refetchOnWindowFocus: false 防止在窗口重新获得焦点时不必要的重新获取数据。

再看数据的缓存更新。当数据发生变化时，需要及时更新缓存以保证用户看到最新信息。比如在一个待办事项应用中，完成一项任务后更新缓存：

import { useQuery, useMutation } from'react-query';

const fetchTodos = () => fetch('/api/todos').then(res => res.json());
const completeTodo = (id) => fetch(`/api/todos/${id}/complete`, { method: 'PUT' });

const { data: todos, isLoading } = useQuery('todos', fetchTodos);

const { mutate } = useMutation(completeTodo, {
  onSuccess: () => {
    // 更新缓存
    const updatedTodos = todos.map(todo =>
      todo.id === todoId? {...todo, completed: true } : todo
    );
    queryClient.setQueryData('todos', updatedTodos);
  }
});

return (
  <ul>
    {todos.map(todo => (
      <li key={todo.id}>
        {todo.title}
        <button onClick={() => mutate(todo.id)}>Complete</button>
      </li>
    ))}
  </ul>
);

这里使用useMutation进行数据修改操作，onSuccess回调中通过queryClient.setQueryData来更新缓存数据。

通过这些高级数据操作示例代码，开发者可以更灵活地运用React Query数据库插件，构建出高效、稳定且数据实时性强的React应用。