GraphAPI

Steps:

File with the query query.qraphql
Config file .graphclientrc.yml in root
Install @graphprotocol/client-cli for dev
Install graphql for dev
Run yarn graphclient build
Update your .tsx file as follows:

import React, { useEffect } from 'react'
// we import types and typed-graphql document from the generated code (`..graphclient/`)
import {
  ExampleQueryDocument,
  ExampleQueryQuery,
  execute,
} from '../.graphclient'

function App() {
  const [data, setData] = React.useState<ExampleQueryQuery>()

  useEffect(() => {
    execute(ExampleQueryDocument, {}).then((result) => {
      setResult(result?.data)
    })
  }, [])
  return (
    <div className="App">
      <p>Graph Client Example</p>
      <textarea
        value={JSON.stringify(result.data, null, 2)}
        readOnly
        rows={25}
      />
    </div>
  )
}

export default App

Full tutorial here