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/essentials/queries.html#props

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

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

那应该带你走。

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

1 个答案: