关于前端: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);
...