GraphQL传变量执行mutation报错Expected Name, found "$"

报错GraphQLError: Syntax Error: Expected Name, found "$"的核心原因是GraphQL变量的写法完全不符合语法规范：

• 所有GraphQL变量必须先在mutation/query操作名后的括号内统一做类型声明，不能直接把$xxx的变量写法放在对象字段的键名位置。你当前代码把$client_id: String!写在input对象的键位上，解析器预期读到合法的字段名（Name类型标识）时碰到了$符号，直接抛出语法错误。
• 变量的作用是作为字段的值传入，不能替代字段键名。你代码里input对象的固定键就是client_id和text，这两个键名不能加$前缀，只有传入的值位置才可以引用声明好的变量。
• 你写的preppedQuery字符串末尾多了一个多余的闭合花括号}，就算变量位置正确，这个冗余符号也会触发语法报错。

const client_id = "7b8c903a-3402";
const text = "Some Text";

const gqlMutation = {
  mutation: gql`
    // 先在操作后声明所有用到的变量和对应类型
    mutation CreateMaps($client_id: String!, $text: String!) {
      createMaps(input: [{
        // 键名保持和schema定义一致，值位置引用声明好的变量
        client_id: $client_id,
        text: $text
      }]) {
        info {
          nodesCreated
          relationshipsCreated
        }
        Maps {
          uid
        }
      }
    }
  `,
  variables: {
    client_id,
    text
  }
};

const res = await client.mutate(gqlMutation);

• 不需要单独把查询语句拆成普通字符串再插值进gql标签，gql本身就是模板字符串解析标签，直接把GraphQL语句写在gql的反引号内即可，额外插值反而容易引入不可见的格式错误。
• 给mutation加操作名（比如示例里的CreateMaps）不是强制语法要求，但在调试工具里定位请求、排查报错时会更方便，属于推荐写法。

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