代码之家 › 专栏 › 技术社区 › Evanss

Apollo refetch查询组件何时使用查询组件第二次装载?

react-apollo

0

Evanss · 技术社区 · 7 年前

我需要在安装组件时获取一个查询。第一次安装组件时,会自动执行此操作。

但是,如果组件的页面也被导航,那么用户会在其他地方导航,然后返回到该页面,默认情况下,查询不会被重新提取。

使用阿波罗的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);

但是我知道建议使用查询组件。使用查询组件可以实现同样的功能吗?

1 回复 | 直到 7 年前

1

0

forJ 7 年前

如果你想用 <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几乎相同。此外,当从容器中重新绘制数据时,必须使用相同的道具更新子组件中的状态,以确保重新渲染。