Consumiendo una API GraphQL con JS puro

Hola compañeros, les dejo el link al repo https://github.com/jonalvarezz/platzi-graphql-fullstack

Código de la clase.

const query = `
  query{
    avos{
      id
      image
      name
      createdAt
      sku
      price
      attributes {
        description
        taste
        shape
        hardiness
      }
    }
  }
`

const baseURL = process.env.NEXT_PUBLIC_SERVICE_URL

const requester = (endpoint?: string, data?: Record<string, number | string>) =>
  fetch(`${baseURL}${endpoint}`,{
      method:'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify(data)
  })

const useAvocados = () => {
  const [data, setData] = useState<TProduct[]>([])
  const [status, setStatus] = useState<'success'| 'loading' | 'error' | 'idle'>('idle')

  useEffect(()=>{
    const fetchItems = async () => {
      setStatus('loading')
      try {
        const response = await requester('/graphql', { query })

        const { data } = (await response.json()) as { data: TProduct[]}
        setData(data)
        setStatus('success')
      } catch (error) {
        setStatus('error')
      }
    }
    fetchItems()
  }, [])

  return {
    data,
    status
  }

}

Listo para subir el nivel con Next.Js y Graphql