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.
1export async function getHealth() {
2 let response = await fetch('https://testnet.fuel.network/v1/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}
Read the official Apollo Client docs here .
1npm install @apollo/client graphql
1import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
2
3const apolloClient = new ApolloClient({
4 uri: 'https://testnet.fuel.network/v1/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};
Read the official urql docs here .
1npm install urql graphql
1import { Client, cacheExchange, fetchExchange } from 'urql';
2
3const urqlClient = new Client({
4 url: 'https://testnet.fuel.network/v1/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.