使用 Query 组件第二次安装组件时，Apollo 重新获取查询？

Question

我需要在安装组件时获取查询。第一次安装组件时会自动发生。

但是，如果组件的页面也被导航，则用户导航到其他地方，然后 returns 到该页面，默认情况下不会重新获取查询。

使用 Apollo 的 HOC，您可以通过在 componentDidMount

上调用 refetch 函数来解决这个问题

class GetMessages extends React.Component {
  componentDidMount() {
    if (!this.props.MESSAGES.loading) {
      this.props.MESSAGES.refetch();
    }
  }

  render() {
    const { loading, error, messages, me } = this.props.MESSAGES;

    if (loading) return <p>loading...</p>
    if (error) console.error(error);

    return <Messages messages={messages} />;
  }
}

export default graphql(MESSAGE_QUERY, { name: "MESSAGES" })(GetMessages);

但是我知道建议改用查询组件。 Query 组件可以实现同样的目的吗？

Answer 1

如果你想使用 <Query> 组件，你必须创建一个容器 class 并用它包装当前的 class 并将数据作为子组件的 prop 传递class。所以一个例子是这样的。

export default class MyPageScreenContainer extends React.Component {
    render() {
        return (
            <ApolloConsumer>
                {(client) => (
                    <Query query={GET_USER} fetchPolicy="network-only">
                        {({data, loading, error, refetch}) => {
                            if (loading) {
                                return <Text>Loading...</Text>
                            }

                            return (
                                <Mutation mutation={PUT_REQUEST}>
                                    {(putRequest) => {

                                        return (
                                            <MyPageScreen data={data.getUser} navigation={this.props.navigation}
                                                          refetchProfile={refetch}
                                                          putRequest={putRequest}
                                                          client={client}/>
                                        )
                                    }}
                                </Mutation>
                            )
                        }}
                    </Query>
                )}
            </ApolloConsumer>
        )
    }
}

当然，这种方法的问题在于它与使用 graphql HOC 几乎相同。此外，当您从容器中重新获取数据时，您必须使用相同的道具更新子组件中的状态，以确保重新渲染发生。

使用 Query 组件第二次安装组件时，Apollo 重新获取查询？

Apollo refetch query when component mounts for a 2nd time with Query component?

react-apollo