Vue/Apollo useQuery带变量缓存失效及路由响应优化问题

你不需要用watch+refetch来触发查询，Apollo的useQuery本身支持响应式变量，只要让变量成为响应式值，useQuery会自动监听变量变化，并且严格遵循你设置的fetchPolicy（比如cache-first）来决定从缓存读取还是发起网络请求。

具体实现示例：

<script setup>
import { useQuery } from '@vue/apollo-composable'
import { useRoute } from 'vue-router'
import GET_CATEGORY_PRODUCTS from './graphql/queries/getCategoryProducts.gql'

const route = useRoute()

// 直接使用响应式的route.params.id作为变量，useQuery会自动监听变化
const { result } = useQuery(GET_CATEGORY_PRODUCTS, {
  variables: {
    categoriesByIdId: route.params.id
  },
  fetchPolicy: 'cache-first'
})
</script>

你之前用refetch导致缓存失效的原因是：refetch方法默认会强制绕过缓存发起网络请求，不管你设置的fetchPolicy是什么，所以自然会每次都触发新请求。

Apollo的useQuery第二个参数支持两种合法写法：

1. 直接传递变量对象：这是简写方式，等价于把变量赋值给options.variables
2. 传递完整的配置对象，其中包含variables属性

你遇到的{variables: {categoriesByIdId:routeId.value}}无效的问题，大概率是以下原因之一：

• 变量名不匹配：检查你的GraphQL查询文档里定义的变量名，是否和categoriesByIdId完全一致（注意大小写、下划线等细节），如果查询里的变量名是categoryId而你写了categoriesByIdId，自然不会生效
• 响应式值未同步：如果routeId是你手动创建的ref，确认它是否正确同步了route.params.id的值——比如有没有通过watch监听route.params.id来更新routeId.value，如果routeId.value始终是旧值，传递给variables的参数自然无效
• 配置项拼写错误：比如误把variables写成了variable（少了末尾的s），导致Apollo无法识别变量配置

只要变量名和查询定义匹配，正确的完整配置写法应该是完全有效的，示例如下：

const { result } = useQuery(GET_CATEGORY_PRODUCTS, {
  variables: {
    categoriesByIdId: route.params.id // 确保变量名与查询文档一致
  },
  fetchPolicy: 'cache-first'
})

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