How to use initial data with useQuery

在 React Query 中，您可以通过使用 useQuery 的 initialData 选项来设置初始数据。这样做可以在数据从服务器加载之前，立即向用户显示一些默认或预缓存的数据，从而提供更好的用户体验和性能。

如何使用 initialData

initialData 选项可以直接传递到 useQuery 钩子中。这里有一个简单的例子来说明如何使用它：

jsx
import { useQuery } from 'react-query';

function fetchProjects() {
  return fetch('https://api.example.com/projects').then(res => res.json());
}

function Projects() {
  const { data, isLoading, isError } = useQuery('projects', fetchProjects, {
    initialData: [{
      id: 1,
      title: '初始项目'
    }]
  });

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error!</div>;

  return (
    <div>
      {data.map(project => (
        <p key={project.id}>{project.title}</p>
      ))}
    </div>
  );
}

在上面的例子中，我们定义了一个 fetchProjects 函数来从服务器获取项目数据。在 useQuery 中，我们使用了一个初始数据列表，其中包含一个示例项目。这意味着在数据从服务器成功加载之前，用户将看到这个初始项目。

使用场景

使用 initialData 非常适合以下场景：

• 快速提供数据：当您希望应用程序启动时快速显示数据，而不是等待数据加载。
• 离线支持：当用户处于离线状态时，可以显示缓存的数据。
• 减少布局抖动：在等待异步数据加载时，可以用初始数据减少页面布局的变化，提高用户体验。

总的来说，initialData 是一个强大的功能，可以帮助开发者在不牺牲用户体验的情况下，优化数据加载的表现。