Fuel中文社区Icon Linkgithub

⌘K

Fuel中文社区Icon Linkgithub
Docs /
GraphQL /
从 Dapp 查询

Icon Link从 Dapp 查询

有几种与 Fuel GraphQL API 从前端应用程序进行交互的方法。 本节只介绍了一些可用的选项，以帮助您入门。

Icon LinkJavaScript 

export async function getHealth() {
  let response = await fetch('https://testnet.fuel.network/v1/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

阅读官方 Apollo Client 文档 here Icon Link。 

npm install @apollo/client graphql
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
 
const apolloClient = new ApolloClient({
  uri: 'https://testnet.fuel.network/v1/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

阅读官方 urql 文档 here Icon Link。 

npm install urql graphql
import { Client, cacheExchange, fetchExchange } from 'urql';
 
const urqlClient = new Client({
  url: 'https://testnet.fuel.network/v1/graphql',
  exchanges: [cacheExchange, fetchExchange],
});
 
const HEALTH_QUERY = `
  query {
    health
  }
`;
 
export const checkHealth = async () => {
  const response = await urqlClient.query(HEALTH_QUERY).toPromise();
  console.log('RESPONSE:', response);
};

您可以在下一节中查看更多示例。