预请求数据

手动预请求

QueryClient 提供了预取 `` API，用于以编程方式预取资源并将结果存储在缓存中。prefetchQuery接受查询query和variables 作为参数。

你甚至可以在 React 之外调用 prefetchQuery。

import { useState } from 'react'
import { createQueryClient } from 'quaere'
 
 
const queryClient = createQueryClient()
 
const userQuery = query({
  fetcher: (variables: { id: number }) => fetch('/api/user?id=' + variables.id).then(r => r.json()),
});
 
queryClient.prefetchQuery({ query: userQuery, variables: { id: 1 } })
 
function User() {
  const { data } = useQuery({ query: userQuery, variables: { id: 1 } })
  ...
}
 
export default function App() {
  const [show, setShow] = useState(false)
  return (
    <div>
      <button onClick={() => setShow(true)}>Show User</button>
      {show ? <User /> : null}
    </div>
  )
}

在 React 渲染树内部，prefetchQuery 也可以在事件处理或副作用中使用。

function App({ userId }) {
  const [show, setShow] = useState(false)
 
  // preload in effects
  useEffect(() => {
    queryClient.prefetchQuery({ query: userQuery, variables: { id: userId } })
  }, [userId])
 
  return (
    <div>
      <button
        onClick={() => setShow(true)}
        {/* preload in event callbacks */}
        onHover={() => queryClient.prefetchQuery({ query: userQuery, variables: { id: userId } })}
      >
        Show User
      </button>
      {show ? <User /> : null}
    </div>
  )
}

数据预填充

如果你想在 Quaere 缓存中预填充已经存在的数据，你可以使用 initialData 选项，例如：

useQuery({
  query: userQuery,
  initialData: prefetchedData,
});

当 Quaere 还没有请求此次数据的时候，这个 hook 将返回 initialData 作为初始数据。

无限加载网络模式