Vue Apollo查询变量报错：无法为只读属性'name'赋值及语法错误

这个错误完全是GraphQL查询语句的语法规范问题，咱们一步步来修复：

问题根源 #

你原来的查询写法违反了GraphQL的变量定义规则：

• 变量必须定义在查询名称后的括号内，不能直接嵌套在字段参数里
• GraphQL的标量类型首字母必须大写（比如String!，而非string!）
• 调用目标字段时，需要明确将变量绑定到对应的参数上

修复后的查询语句 #

把graphql/products.js里的查询代码改成如下形式：

import gql from 'graphql-tag'
export const SINGLE_PRODUCT_QUERY = gql `
  query GetSingleProduct($slug: String!) {
    product(slug: $slug) {
      name
      description
      slug
    }
  }
`;

这里做了三个关键调整：

1. 给查询命名为GetSingleProduct（可选但推荐，方便调试和后端日志追踪）
2. 在查询名称后的括号内规范定义变量$slug: String!，修正了类型大小写问题
3. 在product字段的参数中通过slug: $slug将变量传递给后端接口
4. 移除了字段列表末尾多余的逗号（GraphQL对尾随逗号的支持不统一，容易引发语法报错）

优化组件的变量传递逻辑 #

另外你组件里的变量写死成了固定值，建议改成动态使用props中的slug，更贴合路由页面的实际需求：

apollo: {
  product: {
    query: SINGLE_PRODUCT_QUERY,
    variables() {
      return { slug: this.slug }
    }
  }
}

调整完成后，你的查询就能正确解析变量，和django-graphene搭建的后端正常交互了。

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