Prefetch Hook

component.jsx

import React, { useState } from "react"
import usePrefetchQuery from "./usePrefetchQuery.js"
import {SomeGraphQlQuery} from "./queries.gql"
import List from "./List"

const SomeComponent = props => {
  const [prefetch, setPrefetch] = useState(false)
  const { data, loading } = usePrefetchQuery({query: SomeGraphQlQuery})(prefetch)
  
  return (
    <div onMouseEnter={() => setPrefetch(true)}>
      {loading && <div>Loading...}
      {data && <List items={data}/>       
    </div>
  )
}

usePrefetchQuery.js

import { useState, useEffect } from "react"
import client from "@/graphql/client"

const usePrefetchQuery = ({ query, variables }) => prefetch => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(false)

  const load = async () => {
    const { data } = await client.query({ query, variables })
    setData(data)
    setLoading(false)
  }

  useEffect(
    () => {
      setLoading(true)
      prefetch && load()
    },
    [prefetch]
  )

  return { data, loading }
}

export default usePrefetchQuery