Data fetching with NextJS

Help
,
1

Hi.

I have spun up an Apollo Server that calls data from Fauna DB. The data can be successfully queried via Apollo GraphQL Studio. I’m using apollo-server-micro. My browser console is throwing a 400 Bad Request index.js for: http://localhost:3005/api/graphql.

I’m not sure how to render the incoming data through NextJS:

import useSWR from 'swr'
import { useState } from 'react'

const Query = `
  books {
    title
  }
`

export default function Home() {

  const fetcher = async () => {
    const response = await fetch('/api/graphql', {
      body: JSON.stringify({ Query }),
      headers: { "Content-type": "application/json" },
      method: "POST"
    });
    const { data } = await response.json();
    return data
  }

  const { data, error } = useSWR([Query], fetcher)

  return (
    <div>

      <div>BookS: {data?.books?.title}</div>

    </div>
  )
}

How can I render GraphQL data via a NextJS app?