Subgraphs

This guide will walk you through the use of the subgraphs plugin in dAppBooster.

We'll implement the consumption of data from the Polygon (137) Uniswap pools query.

Consume the Subgraph

Create the query

To create a query to list Uniswap pools by liquidity first create a new file src/subgraphs/queries/uniswap/pool.ts with the following content:

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 code generation script

Terminal

pnpm subgraph-codegen

This will consume the query you just created, poll the information from The Graph services and create the types for you.

Create a component

Create a new component to consume the data in src/components/sharedComponents/UniswapPoolsPolygon.tsx. We'll use it to show the pool's 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>
  )
})

Now you can use this component to show this data to the user in any place you want.