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