Prefetching or Preloading

import { useState } from 'react';
import { createQuery } from 'floppy-disk';
import { getProfile } from './queries';
 
const useProfileQuery = createQuery(getProfile);
const usePokemonListQuery = createQuery(getPokemons);
const usePokemonDetailQuery = createQuery(getPokemonByName);
 
useProfileQuery.get().fetch(); // Prefetch profile query
 
function Profile() {
  const { data } = useProfileQuery();
  ...
}
 
export default function App() {
  const [show, setShow] = useState(false)
  return (
    <div>
      <button onClick={() => setShow(true)}>Show Profile</button>
      {show ? <Profile /> : null}
 
      <Link
        href="/notifications"
        onMouseEnter={() => {
          usePokemonListQuery.get().fetch(); // Prefetch pokemon list
        }}
      >
        Pokemons Page
      </Link>
 
      <Link
        href="/notifications"
        onMouseEnter={() => {
          usePokemonDetailQuery.get({ name: 'charmander' }).fetch(); // prefetch pokemon detail
        }}
      >
        Charmander Page
      </Link>
    </div>
  )
}