Question

安装组件时，我需要获取一个查询。第一次安装组件时，此操作会自动发生。

但是，如果也浏览了组件页面，那么用户将导航到其他地方，然后返回到该页面，默认情况下，查询不会被重新获取。

使用Apollo的HOC，您可以通过在refetch上调用componentDidMount函数来解决此问题

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>组件，则必须创建一个容器类，并用它包装当前类，然后将数据作为子类的支持传递。这样的例子就是这样。

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几乎相同。另外，当您从容器中获取数据时，您必须使用相同的道具更新子组件中的状态，以确保重新渲染。

使用查询组件第二次安装组件时，Apollo refetch查询？

1 个答案: