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