vue apollo useQuery，如何返回结果

Question

我正在尝试使用@vue/apollo-composable将useQuery与Vue 2一起使用。

这是我的设置功能：

setup(props,ctx){
const product = ref(null);
const param = usePram();
const currentProduct = computed(()=>product?.value?.prop || {nope:true};
const getProduct = () => {
if(sku.value){
product.value = provideApolloClient(apolloClient)(() => useQuery(
gql`the query`,
{
param: param.value,
}
)).result;
}
};
watch(
[param],
()=>{
getProduct();
}
);
watch(product,()=>{
//product.value.value is undefined now
console.log('product changed:',product.value,product.value?.value)
//later when I run window.product.value.product.id in the console
//  I get the id of the product
window.product = product.value;
})
onMounted(getProduct);
return { currentProduct:currentProduct.value }
},

模板：

<div class="row no-gutters">
<pre>{{JSON.stringify(currentProduct,undefined,2)}}</pre>
</div>

它只显示{nope: true}，产品上的手表只执行一次，说product.value?.value未定义，但运行window.product.value.product.id会给我产品id，所以我想当它记录时，它还没有设置，当它设置时，它不再运行手表。

我想知道如何从观看arg的手表中获得产品价值，并将其返回，以便在视图中使用。

Answer 1

尝试添加deep:true选项，因为被监视的属性是一个对象：

watch(product,()=>{
//product.value.value is undefined now
console.log('product changed:',product.value,product.value?.value)
//later when I run window.product.value.product.id in the console
//  I get the id of the product
window.product = product.value;
},{deep:true})

Answer 2

我可以用嵌套的手表来获得它：

const getProduct = () => {
if(sku.value){
const result = provideApolloClient(apolloClient)(() => useQuery(
gql`the query`,
{
param: param.value,
}
)).result;
watch(result,(result)=>product.value=result);
}
};