Vue Apollo v4如何使用响应式ref变量触发GraphQL查询刷新

错误写法原因说明 #

1. 第一种写法问题：

• GraphQL查询未提前声明$page变量的类型，服务端无法识别传入的参数
• 给page传了固定值2，没有传入响应式ref对象，无法监听到变量变更触发重查

2. 第二种写法问题：

• 直接在gql模板字符串中插值currentPage.value，模板字符串只会在组件初始化时执行一次，后续currentPage更新不会修改查询语句，自然不会触发重查
• 没有按GraphQL规范声明查询变量，不符合参数传递要求

正确实现方案 #

你需要按照两个核心规则编写：

• 必须在查询开头显式声明变量的类型，和你后端定义的入参类型匹配
• 给useQuery传变量时直接传入ref对象本身，不要取.value，Apollo Vue会自动监听ref的变化，值更新后自动重新发起查询

完整代码示例：

import { useQuery, gql } from '@vue/apollo-composable'
import { ref } from 'vue'

export default {
  setup() {
    const currentPage = ref(1)

    const { result, loading } = useQuery(gql`
      # 先声明查询要用到的变量类型，这里根据你后端定义调整是否为必传
      query GetEpisodes($page: Int!) {
        episodes(page: $page) {
          info {
            pages
            count
          }
          results {
            name
          }
        }
      }
    `, {
      // 直接传ref对象，不要写currentPage.value
      page: currentPage
    })

    function pageChange() {
      // 直接修改ref的值即可，Apollo会自动触发查询刷新
      currentPage.value += 1
    }

    return { result, loading, currentPage, pageChange }
  }
}

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