Subgraphs

Introduction

This guide will walk you through using the subgraphs plugin.

Hands-on

Before continuing, be sure to have followed the steps in subgraphs plugin.

Consume the Subgraph

Create a query to list uniswap pools by liquidy:

src/subgraphs/queries/uniswap/pool.ts

import { graphql } from '@/src/subgraphs/gql/uniswap'
 
export const allUniswapPoolsQueryDocument = graphql(/* GraphQL */ `
  query allUniswapPools {
    positions(first: 3, orderBy: liquidityUSD, orderDirection: asc) {
      id
      pool {
        id
        symbol
      }
    }
  }
`)

Run the subgraph-codegen script:

Terminal

pnpm subgraph-codegen

Consume the data:

UniswapPoolsPolygon.tsx

import { generateSchemasMapping } from '@bootnodedev/db-subgraph'
 
import { useSuspenseQuery } from '@tanstack/react-query'
 
import { env } from '@/src/env'
import { withSuspenseAndRetry } from '@/src/utils/suspenseWrapper'
 
const appSchemas = generateSchemasMapping({
  apiKey: env.PUBLIC_SUBGRAPHS_API_KEY!,
  chainsResourceIds: env.PUBLIC_SUBGRAPHS_CHAINS_RESOURCE_IDS!,
  environment: env.PUBLIC_SUBGRAPHS_ENVIRONMENT,
  productionUrl: env.PUBLIC_SUBGRAPHS_PRODUCTION_URL,
})
 
export const UniswapPoolsPolygon = withSuspenseAndRetry(() => {
  const { data } = useSuspenseQuery({
    queryKey: ['allUniswapPools', 137],
    queryFn: async () => {
      const { positions } = await request(
        appSchemas.uniswap[137],
        allUniswapPoolsQueryDocument,
      )
      return positions
    },
  })
 
  return (
    <div>
      <h3 title={chain.name}>Uniswap Pool {getNetworkIcon(chain.name.toLowerCase())}</h3>
      {data.map((position) => (
        <Row key={position.id}>
          <Name>{position.pool.symbol}</Name>
          <Copy value={position.pool.id} />
          <ExternalLink href={`https://app.uniswap.org/explore/pools/polygon/${position.pool.id}`} />
        </Row>
      ))}
    </div>
  )
})