调用函数后如何获取useLazyQuery挂钩数据答案

【问题标题】：How to get useLazyQuery hooks data after calling a function调用函数后如何获取useLazyQuery挂钩数据
【发布时间】：2021-03-13 22:59:21
【问题描述】：

我试图在提交表单/onClick 后调用 useLazyQuery，但由于某种原因，我总是不确定。这是我定义我的钩子的方式；

const component = () => {
 const [getMyValues, {loading, error, data: myValues}] = useLazyQuery(GET_MY_VALUES);
 
 onSubmit = async () => {
   if(checkCondition){
     const someData = await getMyValues({ variables: {o: names } });
     console.log({someData})    //undefined
   }
 }
}

如何获取someData变量中的查询数据？

【问题讨论】：

标签： reactjs react-hooks react-apollo react-apollo-hooks graphql-tag

【解决方案1】：

更新：

找到了解决方案，但我没有尝试过，也许你可以尝试一下。 https://github.com/apollographql/react-apollo/issues/3499#issuecomment-539346982

useLazyQuery 不返回一个承诺，你应该使用onCompleted 函数参数，像这样：

const [getMyValues, {loading, error, data: myValues}] = useLazyQuery(GET_MY_VALUES, {
  onCompleted: someData => {
    console.log(someData)
    /* do your staff */
  }
});

// It's equal with someData 
// when `getMyValues` is executed, the response data will be 
// return to `myValues`, so you can also use it.
React.useEffect(() => {
  console.log(myValues)
}, [myValues])
 
onSubmit = () => {
  if(checkCondition){
    getMyValues({ variables: {o: names } });
  }
}

【讨论】：

【解决方案2】：

您需要依赖 useLazyQuery 中的 myValues。

因此，如果您想将查询的结果分配给 someData，您需要这样做

const component = () => {
 const [getMyValues, {loading, error, data: myValues}] = useLazyQuery(GET_MY_VALUES);
 
 const someData = myValues;
 console.log({someData})
 onSubmit = () => {
   if(checkCondition){
     getMyValues({ variables: {o: names } });
   }
 }
}

因此，当 getMyValues 加载结果时，它将重新渲染组件，并且数据将从 myValues

获得

【讨论】：

有没有办法在调用 getMyValues() 后使用 .then() ？我尝试过使用它，但出现错误。
正如这里提到的stackoverflow.com/a/65100511/6051401 getMyValues 实际上并不是一个承诺。所以你既不能打电话也不能等待响应