初始查询数据

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

声明式
- 如果查询为空，提供 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 时间戳，您需要将其乘以 1000 将其转换为 JS 时间戳。
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(),
})

来自缓存的初始数据

在某些情况下，您可以从另一个查询的缓存结果中提供查询的初始数据。一个很好的例子是，在待办事项列表查询的缓存数据中搜索单个待办事项，然后将其用作您的单个待办事项查询的初始数据

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

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

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 之间的比较，请查看社区资源。