Apollo - Developer Hub

ApolloProvider is used to setup Apollo clients for your application.

It responds to network changes by automatically initiating a re-fetch of all the data, removing the necessity for a manual trigger of the re-fetch.

Usage

import { ApolloProvider, ChainProvider } from '@azuro-org/sdk'
import { WagmiProvider, createConfig } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { polygonAmoy } from 'viem/chains'
 
 
const wagmiConfig = createConfig(config)
const queryClient = new QueryClient() 
 
function Providers(props: { children: React.ReactNode }) {
  const { children } = props
 
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}> 
        <ChainProvider initialChainId={polygonAmoy.id}>
          <ApolloProvider>
            {children}
          </ApolloProvider>
        </ChainProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

⚠️

The ApolloProvider requires access to the ChainProvider context.

Get Apollo clients and make request.

import { useApolloClients } from '@azuro-org/sdk'
import { useQuery, type QueryHookOptions } from '@apollo/client'
 
const Qeury = () => {
  const { prematchClient, liveClient } = useApolloClients()
 
  const options = {
    ...
    client: prematchClient,
  }
  const { ... } = useQuery(options)
}

Return Value

import { ApolloClient, type NormalizedCacheObject } from '@apollo/client'
 
{
  prematchClient: ApolloClient<NormalizedCacheObject> | null // used for getting pre-match data
  liveClient: ApolloClient<NormalizedCacheObject> | null // used for getting live data
}

Live Socket