Query the Indexer

Makes a query to the indexer and handles states, uses @tanstack/react-query under the hood, hence you don't need to think about caching the results and utilize the indexer in your client side application.

Currently turbo can cause problems with graphql parsers. ( with the latest turbo releases this was resolved )

'use client'

import { useGraphQLQuery } from '@inverter-network/react/client'
import type { GraphQLQueryArgs } from '@inverter-network/graphql'

export default function Page() {
    // Defined the fields which will make the query
    const fields = {
      Token: {
        __args: {
          where: {
            address: {
              _eq: '0x961bB3932A7efAa9aDcc7409e1fea090479E8312',
            },
            chainId: {
              _eq: 1101,
            },
          },
        },
        chainId: 1,
        address: 1,
        name: 1,
        decimals: 1,
        symbol: 1,
        totalSupply: 1,
      }
  } as const satisfies GraphQLQueryArgs
    
    const query = useGraphQLQuery({
        // Optional: dependencies, these determine if the query should update upon the change in the array
        dependencies: [],
        // Optional: options, i.e. enabled
        options: {},
        fields,
    })
    
    // Return a simple ui to trigger the flow
    return (
        <div className="w-screen h-screen flex flex-col gap-3 items-center justify-center">
            <h1>
                Token Name: {query.data?.Token[0].name ?? 'No Data Yet...'}
            </h1>
            
            <h1>
                Token Symbol: {query.data?.Token[0].symbol ?? 'No Data Yet...'}
            </h1>
        </div>
    )
}