如何修改外部API JSON结果的GraphQL TypeDefs名称以解决命名错误？

我完全懂你碰到的这个麻烦——Coinmarketcap API返回的字段名（比如24h_volume_usd、percent_change_1h）确实不符合GraphQL的命名规范，直接导致你定义TypeDefs时触发语法错误。GraphQL要求类型和字段名必须以字母或下划线开头，后续可跟字母、数字或下划线，所以以数字开头的字段名会直接报错。

下面是具体的解决步骤，亲测可行：

1. 定义符合GraphQL规范的TypeDefs #

首先在你的Schema里，把那些带数字开头的字段替换成合法命名，比如采用驼峰命名法或明确的英文表述：

const typeDefs = `
  type Crypto {
    id: ID!
    name: String!
    symbol: String!
    volume24hUsd: Float! # 对应API的24h_volume_usd
    percentChange1h: Float # 对应API的percent_change_1h
    percentChange24h: Float # 对应API的percent_change_24h
  }

  type Query {
    getCryptos: [Crypto]!
  }
`;

这里我把24h_volume_usd改成了volume24hUsd，percent_change_1h改成了percentChange1h，既符合GraphQL规则，又能清晰表达字段含义。

2. 在Resolver中做字段映射 #

接下来要在Resolver里处理数据映射：当你从Coinmarketcap API拿到原始数据后，把API返回的字段对应到你定义的GraphQL字段上：

const resolvers = {
  Query: {
    getCryptos: async () => {
      // 调用Coinmarketcap API获取数据
      const response = await fetch('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest', {
        headers: {
          'X-CMC_PRO_API_KEY': '你的API密钥'
        }
      });
      const data = await response.json();
      
      // 映射字段
      return data.data.map(crypto => ({
        id: crypto.id,
        name: crypto.name,
        symbol: crypto.symbol,
        volume24hUsd: crypto["24h_volume_usd"], // 注意用方括号访问带特殊字符的属性
        percentChange1h: crypto.percent_change_1h,
        percentChange24h: crypto.percent_change_24h
      }));
    }
  }
};

重点提醒：对于24h_volume_usd这种不能用点符号访问的属性，必须用方括号crypto["24h_volume_usd"]来获取值。

3. 验证查询效果 #

现在你可以正常写GraphQL查询了，比如：

query GetCryptos {
  getCryptos {
    id
    name
    symbol
    volume24hUsd
    percentChange1h
  }
}

查询结果会自动映射到你定义的合法字段上，底层依然能正确获取Coinmarketcap API的数据。

这种映射方式是处理第三方API字段不兼容GraphQL规范的标准做法，既遵守了GraphQL的规则，又能完整保留原API的数据内容。

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