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.
'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>
)
}