vue apollo useQuery，如何得到return结果？

Question

我正在尝试使用 @vue/apollo-composable 在 Vue 2 中使用 useQuery。

这是我的设置函数：

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 和 return 的手表中获取产品价值，以便我可以在视图中使用它。

Answer 1

我可以用嵌套手表得到它：

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

Answer 2

尝试添加 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})

vue apollo useQuery，如何得到return结果？

vue apollo useQuery, how to return the result?

vue.js

vuejs2

vue-apollo

vue-composition-api