Querying Blockchain Data with GraphQL from a Web Application with URQL and The Graph

Querying The Graph with URQL & React

import './App.css';
import { createClient } from 'urql'
import { useEffect, useState } from 'react'

const APIURL = ""

const query = `
  query {
    tokens(
      first: 5
      orderBy: tokenID
      orderDirection:desc
    ) {
      id
      tokenID
      contentURI
      metadataURI
    }
  }
`

const client = createClient({
  url: APIURL
})

function App() {
  const [tokens, setTokens] = useState([])
  useEffect(() => {
    fetchData()
  }, [])
  async function fetchData() {
    const response = await client.query(query).toPromise();
    console.log('response:', response)
    setTokens(response.data.tokens);
  }
  return (
    <div className="App">
      {
        tokens.map((token, index) => (
          <div>
            <a href={token.contentURI} target="_blank">Content</a>
            <a href={token.metadataURI} target="_blank">Metadata</a>
          </div>
        ))
      }
    </div>
  );
}

export default App;