Docs Icon CaretRight Querying From A Dapp

Querying 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.

JavaScript

1export async function getHealth() {
2  let response = await fetch("https://beta-4.fuel.network/graphql", {
3    method: "POST",
4    headers: {
5      "Content-Type": "application/json",
6      Accept: "application/json",
7    },
8    body: JSON.stringify({ query: "{ health }" }),
9  });
10  let data = await response.json();
11  console.log("DATA:", data);
12}

Apollo Client

Read the official Apollo Client docs here Icon Link.

1$ npm install @apollo/client graphql
1import { ApolloClient, InMemoryCache, gql } from '@apollo/client'
2
3const apolloClient= new ApolloClient({
4  uri: 'https://beta-4.fuel.network/graphql',
5  cache: new InMemoryCache(),
6})
7
8const HEALTH_QUERY  = `
9  query {
10    health
11  }
12`
13
14export const checkHealth = async () => {
15   const response = await apolloClient.query({
16    query: gql(HEALTH_QUERY),
17  });
18  console.log("RESPONSE:", response);
19}

urql

Read the official urql docs here Icon Link.

1$ npm install urql graphql
1import { createClient } from 'urql'
2
3const urqlClient= createClient({
4  url: 'https://beta-4.fuel.network/graphql',
5})
6
7const HEALTH_QUERY  = `
8  query {
9    health
10  }
11`
12
13export const checkHealth = async () => {
14  const response = await urqlClient.query(HEALTH_QUERY).toPromise();
15  console.log("RESPONSE:", response);
16}

You can see more examples in the next section.