初始查询数据

在您需要之前，有很多方法可以为查询的缓存提供初始数据

声明式
- 提供 initialData 给查询，以在缓存为空时预填充它
命令式
- 使用 queryClient.prefetchQuery 预取数据
- 使用 queryClient.setQueryData 手动将数据放入缓存中

使用 initialData 预填充查询

有时，您可能已经在您的应用程序中拥有查询的初始数据，并且可以直接将其提供给您的查询。如果情况确实如此，您可以使用 config.initialData 选项来设置查询的初始数据，并跳过初始加载状态！

重要提示：initialData 会持久化到缓存中，因此不建议为此选项提供占位符、部分或不完整的数据，而应使用 placeholderData

tsx

const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: initialTodos,
})

const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: initialTodos,
})

staleTime 和 initialDataUpdatedAt

默认情况下，initialData 被视为完全新鲜的，就像刚刚获取的一样。这也意味着它将影响 staleTime 选项如何解释它。

如果您使用 initialData 配置您的查询观察器，并且没有 staleTime（默认 staleTime: 0），则查询将在挂载时立即重新获取

tsx

// Will show initialTodos immediately, but also immediately refetch todos after mount
const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: initialTodos,
})

// Will show initialTodos immediately, but also immediately refetch todos after mount
const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: initialTodos,
})

如果您使用 initialData 和 1000 毫秒的 staleTime 配置您的查询观察器，则数据将在相同的时间内被认为是新鲜的，就像它刚刚从您的查询函数中获取一样。

tsx

// Show initialTodos immediately, but won't refetch until another interaction event is encountered after 1000 ms
const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: initialTodos,
  staleTime: 1000,
})

// Show initialTodos immediately, but won't refetch until another interaction event is encountered after 1000 ms
const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: initialTodos,
  staleTime: 1000,
})

那么，如果您的 initialData 不是完全新鲜的怎么办？这给我们留下了最后一个配置，它实际上是最准确的，并使用一个名为 initialDataUpdatedAt 的选项。此选项允许您传递一个数字 JS 时间戳（以毫秒为单位），表示 initialData 本身上次更新的时间，例如 Date.now() 提供的时间。请注意，如果您有 unix 时间戳，则需要将其转换为 JS 时间戳，方法是将其乘以 1000。
tsx
```
// Show initialTodos immediately, but won't refetch until another interaction event is encountered after 1000 ms
const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: initialTodos,
  staleTime: 60 * 1000, // 1 minute
  // This could be 10 seconds ago or 10 minutes ago
  initialDataUpdatedAt: initialTodosUpdatedTimestamp, // eg. 1608412420052
})
```
```
// Show initialTodos immediately, but won't refetch until another interaction event is encountered after 1000 ms
const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: initialTodos,
  staleTime: 60 * 1000, // 1 minute
  // This could be 10 seconds ago or 10 minutes ago
  initialDataUpdatedAt: initialTodosUpdatedTimestamp, // eg. 1608412420052
})
```
此选项允许 staleTime 用于其原始目的，即确定数据需要有多新鲜，同时还允许在 initialData 比 staleTime 旧时在挂载时重新获取数据。在上面的示例中，我们的数据需要在 1 分钟内保持新鲜，我们可以向查询提示 initialData 上次更新的时间，以便查询可以自行决定是否需要再次重新获取数据。

如果您希望将您的数据视为预取数据，我们建议您使用 prefetchQuery 或 fetchQuery API 来预先填充缓存，从而让您可以独立于 initialData 配置您的 staleTime

初始数据函数

如果访问查询的初始数据的过程是密集的，或者只是您不想在每次渲染时都执行的操作，则可以将函数作为 initialData 值传递。此函数仅在查询初始化时执行一次，从而节省您宝贵的内存和/或 CPU

tsx

const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: () => getExpensiveTodos(),
})

const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: () => getExpensiveTodos(),
})

来自缓存的初始数据

在某些情况下，您可能能够从另一个查询的缓存结果中为查询提供初始数据。这方面的一个很好的例子是搜索来自 todos 列表查询的缓存数据以查找单个 todo 项目，然后将其用作您的单个 todo 查询的初始数据

tsx

const result = useQuery({
  queryKey: ['todo', todoId],
  queryFn: () => fetch('/todos'),
  initialData: () => {
    // Use a todo from the 'todos' query as the initial data for this todo query
    return queryClient.getQueryData(['todos'])?.find((d) => d.id === todoId)
  },
})

const result = useQuery({
  queryKey: ['todo', todoId],
  queryFn: () => fetch('/todos'),
  initialData: () => {
    // Use a todo from the 'todos' query as the initial data for this todo query
    return queryClient.getQueryData(['todos'])?.find((d) => d.id === todoId)
  },
})

来自缓存的初始数据，带有 initialDataUpdatedAt

从缓存中获取初始数据意味着您用于查找初始数据的源查询可能已过时。建议您将源查询的 dataUpdatedAt 传递给 initialDataUpdatedAt，而不是使用人为的 staleTime 来防止您的查询立即重新获取。这为查询实例提供了确定查询是否以及何时需要重新获取所需的所有信息，而与是否提供初始数据无关。

tsx

const result = useQuery({
  queryKey: ['todos', todoId],
  queryFn: () => fetch(`/todos/${todoId}`),
  initialData: () =>
    queryClient.getQueryData(['todos'])?.find((d) => d.id === todoId),
  initialDataUpdatedAt: () =>
    queryClient.getQueryState(['todos'])?.dataUpdatedAt,
})

const result = useQuery({
  queryKey: ['todos', todoId],
  queryFn: () => fetch(`/todos/${todoId}`),
  initialData: () =>
    queryClient.getQueryData(['todos'])?.find((d) => d.id === todoId),
  initialDataUpdatedAt: () =>
    queryClient.getQueryState(['todos'])?.dataUpdatedAt,
})

来自缓存的条件初始数据

如果您用于查找初始数据的源查询已过时，您可能根本不想使用缓存的数据，而只想从服务器获取。为了更容易做出此决定，您可以使用 queryClient.getQueryState 方法来获取有关源查询的更多信息，包括您可以用来决定查询是否“足够新鲜”以满足您的需求的 state.dataUpdatedAt 时间戳

tsx

const result = useQuery({
  queryKey: ['todo', todoId],
  queryFn: () => fetch(`/todos/${todoId}`),
  initialData: () => {
    // Get the query state
    const state = queryClient.getQueryState(['todos'])

    // If the query exists and has data that is no older than 10 seconds...
    if (state && Date.now() - state.dataUpdatedAt <= 10 * 1000) {
      // return the individual todo
      return state.data.find((d) => d.id === todoId)
    }

    // Otherwise, return undefined and let it fetch from a hard loading state!
  },
})

const result = useQuery({
  queryKey: ['todo', todoId],
  queryFn: () => fetch(`/todos/${todoId}`),
  initialData: () => {
    // Get the query state
    const state = queryClient.getQueryState(['todos'])

    // If the query exists and has data that is no older than 10 seconds...
    if (state && Date.now() - state.dataUpdatedAt <= 10 * 1000) {
      // return the individual todo
      return state.data.find((d) => d.id === todoId)
    }

    // Otherwise, return undefined and let it fetch from a hard loading state!
  },
})

延伸阅读

有关 Initial Data 和 Placeholder Data 之间的比较，请查看社区资源。