Subscribe to the Indexer

Subscribes to the indexer using Web Socket, handles the client cache by using React.useMemo just plug it in your client side application and you have a live data feed.

Currently turbo can cause problems with graphql parsers.

'use client'

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

export default function Page() {
    // Defined the fields which will make the sub 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 { data, error, isLoading } = useGraphQLSubscription({
        // Optional: enabled, determines if the sub will run
        enabled: true
        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: {data?.Token[0].name ?? 'No Data Yet...'}
            </h1>
            
            <h1>
                Token Symbol: {data?.Token[0].symbol ?? 'No Data Yet...'}
            </h1>
        </div>
    )
}