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

Question

我正在使用 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({...}) 添加到回调中并使用查询设置组件的状态，但是遇到了堆栈溢出错误。

正确的做法是什么？

Answer 1

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

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

有一个 onCompleted 道具，您可以将方法传递给具有以下签名的方法：

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

这应该让你继续。

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

Apollo React call async function with query result

apollo

reactjs

react-apollo