Apollo gql标签插入动态GraphQL查询名报语法错误如何解决？

错误原因 #

你的代码存在两个核心问题：

1. 在gql模板字符串中插入的是FETCH_REFERENCE_DATA1函数本身，而非函数执行后返回的查询名称字符串。函数被隐式转为字符串时会带出完整的函数定义内容（包含=等语法符号），完全不符合GraphQL语法规范，因此直接抛出解析错误。
2. Apollo的gql标签默认是静态编译的，直接在模板字符串中插值插入动态查询名，生产环境编译阶段也可能出现解析异常，需要用正确的动态构建查询的方式实现。

解决方案 #

方案1：先拼接查询字符串再传入gql解析

不要直接在gql的模板字符串里插值，先把完整的GraphQL语句拼接为普通字符串，再传入gql函数解析：

import { gql } from '@apollo/client';

// 封装为动态生成查询的方法
export const getReferenceDataQuery = (typeName) => {
  // 先拼接完整查询字符串
  const queryStr = `
    query findQuery($locale: Locale!) {
      ${typeName}(locale: $locale) {
        presentation
        _desc
      }
    }
  `;
  // 再用gql解析为查询对象
  return gql(queryStr);
};

使用时直接传入你的查询名称即可：

// 传入实际需要的查询名生成对应查询
const FETCH_REFERENCE_DATA = getReferenceDataQuery('你的实际查询字段名');
// 后续正常调用Apollo接口即可

方案2：加别名统一返回字段（可选优化）

如果担心不同typeName导致返回字段名不一致，适配通用下拉组件麻烦，可以加别名统一返回字段：

export const getReferenceDataQuery = (typeName) => {
  const queryStr = `
    query findQuery($locale: Locale!) {
      // 加别名referenceData统一返回字段名
      referenceData: ${typeName}(locale: $locale) {
        presentation
        _desc
      }
    }
  `;
  return gql(queryStr);
};

调整后不管传入什么typeName，返回结果都会统一存在referenceData字段下，通用组件处理逻辑更简单。

注意事项 #

• 要确保传入的typeName是GraphQL schema中实际存在的查询字段，否则调用接口时会抛出字段不存在的错误
• 如果项目开启了GraphQL查询校验，需要提前把所有可能用到的typeName对应的查询加入白名单，避免运行时报错

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