Icon LinkQuerying From A Dapp

There are several ways to interact with the Fuel GraphQL API from a frontend application. This section covers just a few options available to get you started.

Icon LinkJavaScript

export async function getHealth() {
  let response = await fetch("https://beta-4.fuel.network/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify({ query: "{ health }" }),
  });
  let data = await response.json();
  console.log("DATA:", data);
}

Icon LinkApollo Client

Read the official Apollo Client docs here Icon Link.

$ npm install @apollo/client graphql

import { ApolloClient, InMemoryCache, gql } from '@apollo/client'
 
const apolloClient= new ApolloClient({
  uri: 'https://beta-4.fuel.network/graphql',
  cache: new InMemoryCache(),
})
 
const HEALTH_QUERY  = `
  query {
    health
  }
`
 
export const checkHealth = async () => {
   const response = await apolloClient.query({
    query: gql(HEALTH_QUERY),
  });
  console.log("RESPONSE:", response);
}

Icon Linkurql

Read the official urql docs here Icon Link.

$ npm install urql graphql

import { createClient } from 'urql'
 
const urqlClient= createClient({
  url: 'https://beta-4.fuel.network/graphql',
})
 
const HEALTH_QUERY  = `
  query {
    health
  }
`
 
export const checkHealth = async () => {
  const response = await urqlClient.query(HEALTH_QUERY).toPromise();
  console.log("RESPONSE:", response);
}

You can see more examples in the next section.

Was this page helpful?

Icon HelpCircleAsk a question in the forum. Icon Link