时间戳

首页 > 解决方案 > Apollo React 使用查询结果调用异步函数

reactjs - Apollo React 使用查询结果调用异步函数

问题描述

我正在使用 Apollo 创建一个组件。查询完成后，我需要调用一些异步函数来生成一些将在组件内呈现的数据。我怎样才能做到这一点？

这是一些代码：

const GET_LOGGED_IN_USER = gql`
  query User($address: String!) {
    member(id: $address) {
      id
    }
  }
`;
class ProposalListView extends React.Component {
  render() {
    let loggedUser = JSON.parse(localStorage.getItem("loggedUser"));
    return (
      <Query query={GET_LOGGED_IN_USER} variables={{ address: loggedUser.address }}>
        {({ loading, error, data }) => {
          if (loading) return "Loading...";
          if (error) throw new Error(`Error!: ${error}`);
          // need to call async function here using data.member.id
          return (
            <div>{resultOfAsyncFunction}</div>
          );
        }}
      </Query>
    );
  }
}

我已经尝试了几件事。我尝试使回调函数异步（即async ({ loading, error, data }) => {...}，但这给出了错误。

我还尝试添加setState({...})到回调中并使用查询设置组件的状态，但这遇到了堆栈溢出错误。

这样做的正确方法是什么？

标签： reactjsapolloreact-apollo

解决方案

查看 Apollo 文档，特别是用于Query进行 GraphQL 查询的组件的文档：

https://www.apollographql.com/docs/react/data/queries/#options

onCompleted您可以使用以下签名将方法传递给一个道具：

<Query
  ...
  onCompleted={(data) => {
    // Call setState() here
  }}
/>

那应该让你继续前进。

推荐阅读