已解决：The Graph查询返回页面CSS而非代币查询结果问题

使用The Graph的GraphQL模块查询不同交易所的各类代币价格时，GraphQL Playground环境可正常返回查询结果，但通过axios代码调用接口时，未返回预期查询数据，反而返回了上千行疑似Playground页面的CSS/HTML静态内容，初步怀疑是axios调用配置存在问题。

初始错误调用代码如下：

import axios, * as others from 'axios';

const main = async () => {
    try {
        const result = await axios.get(
            'http://api.thegraph.com/subgraphs/name/aave/exchange/graphql',
            {
                query: `
flashLoans(first: 10, orderBy: timestamp, orderDirection: desc) {
    id
    reserve{
        name
        symbol
    }
    amount
    target
    timestamp
}
`
            }
        );
        console.dir(result);
    } catch (error) {
        console.error(error);
    }
}
main();

接口返回的响应头片段如下，可见返回内容类型为text/html，并非GraphQL接口预期的JSON格式：

status: 200,
statusText: 'OK',
headers: {
  date: 'Sat, 25 Jun 2022 03:20:23 GMT',
  'content-type': 'text/html',
  'transfer-encoding': 'chunked',
  connection: 'close',
  'cf-ray': '720a91285d5419cf-EWR',
  'access-control-allow-origin': '*',
  'cf-cache-status': 'DYNAMIC',
  server: 'cloudflare'
},

问题补充 #

尝试将请求方法从axios.get替换为axios.post时，最初带/graphql后缀的地址返回404错误，移除地址末尾的/graphql路径后404问题消失，但接口仍返回相同的静态页面内容。

该问题由5处配置错误共同导致：

• 协议使用错误：调用接口使用了http协议，The Graph托管服务接口强制要求https协议，HTTP请求会被服务端重定向到Playground静态资源页
• 请求方法错误：The Graph子图的GraphQL查询接口仅接受POST请求，GET请求默认返回GraphQL Playground的静态HTML/CSS页面，不会处理查询逻辑
• 参数传递位置错误：axios.post的第二个参数才是POST请求体，初始写法把query参数放在了第三个配置项参数中，服务端无法从请求体读取到有效查询语句，判定为普通页面访问请求
• 查询语句不规范：初始GraphQL查询语句缺少最外层的query声明块，部分严格校验的GraphQL服务会直接拒绝解析该类请求
• 路径配置错误：The Graph托管的子图查询接口不需要在子图地址末尾额外添加/graphql后缀，添加后缀会触发404错误

按照以下步骤调整代码即可正常获取数据：

1. 将请求协议从http改为https
2. 移除接口地址末尾的/graphql后缀
3. 使用axios.post发起请求，将包含query字段的请求对象作为axios.post的第二个参数传入
4. 给GraphQL查询语句补充标准的最外层query包裹
5. 移除冗余的axios全量导入写法，仅导入默认导出的axios实例即可

修复后的可运行代码：

import axios from 'axios';

const main = async () => {
    try {
        const result = await axios.post(
            'https://api.thegraph.com/subgraphs/name/aave/exchange',
            {
                query: `
                query {
                    flashLoans(first: 10, orderBy: timestamp, orderDirection: desc) {
                        id
                        reserve{
                            name
                            symbol
                        }
                        amount
                        target
                        timestamp
                    }
                }
                `
            }
        );
        console.log(result.data);
    } catch (error) {
        console.error(error);
    }
}
main();

内容的提问来源于stack exchange，提问作者Viraj_Bagga