初始查询数据

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

声明式
- 如果查询为空，提供 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 和 staleTime 为 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: 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(),
})

来自缓存的初始数据

在某些情况下，您可以通过另一个查询的缓存结果来提供查询的初始数据。一个很好的例子是搜索一个 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

从缓存中获取初始数据意味着您用于查找初始数据的源查询很可能已经过时。建议您不要使用人为设置的 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!
  },
})