Vue Apollo无法传递查询变量问题求助

你遇到的这个问题我之前在项目里也踩过坑，核心原因是Vue Apollo 的查询配置结构写错了，导致变量没有被正确关联到查询上。

问题出在哪？ #

你当前的写法里，userInfo 直接赋值为 USER_QUERY，variables 是和它同级的属性——但 Vue Apollo 并不会把这个同级的 variables 和你的查询绑定在一起。正确的做法是把查询和变量放在同一个对象里。

修正后的正确配置 #

调整你的 apollo 选项结构，把 userInfo 改成一个包含 query 和 variables 的对象：

apollo: {
  userInfo: {
    query: USER_QUERY,
    variables() {
      return { 
        input: { username: "johndoe" } 
      };
    },
    // 可选：如果需要可以加其他配置，比如fetchPolicy
    // fetchPolicy: 'network-only'
  },
},

额外排查点 #

如果调整后还是看不到变量，可以检查这几点：

• 确认 gql 标签已经正确导入（比如从 @apollo/client/core 或 vue-apollo 包中引入）
• 核对后端定义的 UsernameInput 类型结构，确保你传递的 input 对象字段完全匹配（比如有没有拼写错误、字段类型是否一致）
• 后续换成路由参数时，确保路由参数存在，可以加个兜底判断：

  variables() {
    return { 
      input: { username: this.$route.params.username || 'default_user' } 
    };
  },
  

调整完结构后，再去浏览器网络面板查看 GraphQL 请求的 variables 字段，就能看到你传递的参数了。

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