执行查询后反应内部无法访问延迟查询graphql响应数据答案

【问题标题】：Lazy Query graphql response data is not accessible inside react after executing the query执行查询后反应内部无法访问延迟查询graphql响应数据
【发布时间】：2022-11-03 16:21:52
【问题描述】：

我需要在按下下载按钮时调用查询，然后处理响应。我只需要在按下下载按钮时执行查询，而不是在加载反应组件时执行查询。因此，我使用了 graphql 中的“useLazyQuery”选项。

我需要这样的东西：

const [downloadAllRecipients,{ loading, error, data }] = useLazyQuery(QUERY,
    {
      variables: {
        campaignId: props.campaignId,
      },
      fetchPolicy: 'network-only',
    },
  );

//This is the download button onPress event handler.
const downloadDataButton = async () => {
  const res = await downloadAllRecipients({ variables: { campaignID: props.campaignId }})
  console.log(res) // handle response
}
//Output:-
//undefined

执行上述查询时，资源未定义。但是，在网络层看到了 graphql 查询。我有一个反应前端，无法访问查询返回的数据。请帮忙！提前致谢！

【问题讨论】：

标签： reactjs graphql

【解决方案1】：

您将在onCompleted 事件中获取数据。

所以你的代码应该如下所示，

const [downloadAllRecipients,{ loading, error, data }] = useLazyQuery(QUERY,
    {
      variables: {
        campaignId: props.campaignId,
      },
      fetchPolicy: 'network-only',
     onCompleted: res => { setRes(res); console.log(res);}
    },
  );

【讨论】：