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