假设有一个书籍列表页，点击书名就会进入到书籍的详情页。我想在列表页利用 cacheKey 做一个预加载，当鼠标移到具体书名的时候就发起请求，这样当用户真正点击进去发起请求时 cacheKey 与列表页请求的 cacheKey 相同。但以目前的方式想要实现我只能想到这样，是我错过了什么吗？

// services
const getBook = (id) => axios.get(`/book/${id}`).then((res) => res.data);
const getBookList = () => axios.get("/books").then((res) => res.data);

const Books = () => {
  const { data } = useRequest(getBookList);

  const [prerequestId, setPrerequestId] = useState(null);
  useRequest(getBook, {
    cacheKey: `book_${prerequestId}`,
    ready: !!prerequestId,
  });

  return (
    <ul>
      {data.map((book) => (
        <a
          onMouseEnter={() => setPrerequestId(book.id)}
          href={`/book/${book.id}`}
        >
          {book.name}
        </a>
      ))}
    </ul>
  );
};

const Book = () => {
  const { id } = useParams();
  const { data } = useRequest(() => getBook(id), {
    cacheKey: `book_${id}`,
  });
  return <div>{data.name}</div>;
};

如果有一个这样 API 我觉得会比较优雅？

import { prerequest } from 'ahooks'

const Books = () => {
  const { data } = useRequest(getBookList);

  const handleMouseEnter = (id) => {
    // 第一个参数是 service，第二个参数是 cacheKey
    prerequest(() => getBook(id), `book_${id}`)
  }

  return (
    <ul>
      {data.map((book) => (
        <a
          onMouseEnter={() => handleMouseEnter(book.id)}
          href={`/book/${book.id}`}
        >
          {book.name}
        </a>
      ))}
    </ul>
  );
};

参考： https://tanstack.com/query/v4/docs/guides/prefetching