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

1npm install @apollo/client graphql
1import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
2
3const apolloClient = new ApolloClient({
4  uri: 'https://beta-5.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.

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

You can see more examples in the next section.