vue3 apollo4 useQuery 通过点击事件触发

常规useQuery单次请求

///...setup...///
let formDynamicAttars=(data)=>{
  let list = deepClone(takeoffEdges(data,'dynamicAttrs'));
  list.forEach(item=>{
    item.isedit=false;//默认为非编辑状态
  })
  // 
  tableData.value = list.sort(sortWeight('attrIndex'));
}
let getDynamicAttrs=()=>{
  const { result,loading, error } =  useQuery(dynamicAttrs)
  // 整理展示
  watch(result, value => {
    formDynamicAttars(value)
  })
}
// 获取
getDynamicAttrs();

如果页面通过按钮事件发起query请求页面会报错如下：

我个人理解是apolloclient都是在setup中引入的，如果中页面渲染在发起请求可能导致useQuery所需的client无法找到所以报错（如果理解不对，请指正~）apollo官方有个issue讲得比较清楚 [传送门[issues/909]](https://github.com/vuejs/apol...)

个人觉得在setup整个作用域中定义一个没有意义的refetch不太好，做了以下修改

<el-button type="primary" size="small" @click="getDynamicAttrs">查询</el-button>

///...setup...///
const { refetch:queryDynamicAttrs} = useQuery(dynamicAttrs);
//
let getDynamicAttrs=()=>{
  queryDynamicAttrs().then(res=>{
      formDynamicAttars(res.data)
  })
}

这样的话可以按需定义多个useQuery了

...
const { refetch:queryDynamicAttrs1} = useQuery(dynamicAttrs1);
const { refetch:queryDynamicAttrs2} = useQuery(dynamicAttrs2);
...