Get Games

Setup GraphQL

In this tutorial, we'll fetch data from the blockchain using SubGraphs (GraphQL). There are multiple ways to call GraphQL APIs, and in this simple tutorial we will use @apollo/client package. It's very simple to use it.

npm install @apollo/client

Integrate ApolloProvider provider

pages/_app.js

import '@/styles/globals.css'
import * as ethers from 'ethers'
import { DAppProvider, Polygon, useEthers } from '@usedapp/core'
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client'
 
const apolloClient = new ApolloClient({
  uri: 'https://thegraph.azuro.org/subgraphs/name/azuro-protocol/azuro-api-polygon',
  cache: new InMemoryCache(),
})
 
...
 
export default function App({ Component, pageProps }) {
  return (
    <DAppProvider config={config}>
      <ApolloProvider client={apolloClient}>
        <PageLayout>
          <Component {...pageProps} />
        </PageLayout>
      </ApolloProvider>
    </DAppProvider>
  )
}

Fetch Sport Events

Create a new file called useSportEvents.js in the hooks folder of your project. Copy and paste the following code into the file

hooks/useSportEvents.js

import { gql, useQuery } from '@apollo/client'
 
// this query retrieves data for 10 upcoming events that have not yet started
const QUERY = `
  query Games($where: Game_filter!) {
    games(first: 10, where: $where) {
      id
      sport {
        name
      }
      league {
        name
        country {
          name
        }
      }
      participants {
        name
        image
      }
      startsAt
    }
  }
`
 
export default function useSportEvents() {
  return useQuery(gql`${QUERY}`, {
    variables: {
      where: {
        // note that the value of "startAt" is in seconds
        startsAt_gt: Math.floor(Date.now() / 1000),
        sport_: { name: 'Football' },
      },
    },
  })
}

Render Sport Events UI

Create pages/index.js with the following code

pages/index.js

import Link from 'next/link'
import dayjs from 'dayjs'
import useSportEvents from '@/hooks/useSportEvents'
 
const GameCard = ({ id, sport, league, participants, startsAt }) => (
  <Link
    className="p-4 border border-gray-300 rounded-lg hover:bg-gray-100 transition"
    href={`/games/${id}`}
  >
    <div className="flex justify-between text-sm">
      <span>{sport.name}</span>
      <span>{dayjs(startsAt * 1000).format('DD MMM HH:mm')}</span>
    </div>
    <div className="mt-2 text-sm text-gray-400">
      {league.country.name} &middot; {league.name}
    </div>
    <div className="mt-3 space-y-1">
      {
        participants.map(({ image, name }) => (
          <div key={name} className="flex items-center">
            <div className="flex items-center justify-center w-8 h-8 mr-2 border border-gray-300 rounded-full">
              <img className="w-4 h-4" src={image} alt={name} />
            </div>
            <span className="text-md">{name}</span>
          </div>
        ))
      }
    </div>
  </Link>
)
 
export default function Home() {
  const { loading, data } = useSportEvents()
 
  if (loading) {
    return <div>Loading...</div>
  }
 
  return (
    <main>
      <div className="grid lg:grid-cols-1 sm:lg:grid-cols-2 md:lg:grid-cols-3 lg:lg:grid-cols-4 gap-2">
        {
          data.games.map((game) => (
            <GameCard key={game.id} {...game} />
          ))
        }
      </div>
    </main>
  )
}

Run the following command

npm run dev

This starts your Next.js app’s "development server" on port 3000. Let’s check to see if it’s working. Open localhost:3000 (opens in a new tab) from your browser.

The resulting output should be

Prepare to Connect User Wallets Get Game Details