时间戳

首页 > 解决方案 > ApolloGraphQL 和 React：组件重新挂载时避免调用查询和订阅？

reactjs - ApolloGraphQL 和 React：组件重新挂载时避免调用查询和订阅？

问题描述

我有一个这样设置的 React 路由器：

       <ApolloProvider client={ApolloClient}>
            <Router history={browserHistory}>
                <React.Suspense fallback={<p></p>}>
                    <ErrorBoundary>
                        <AppStateProvider>
                            <Route render={(routeProps) =>
                                <TopNav
                                    history={routeProps.history}
                                    match={routeProps.match}
                                />
                            }/>
                            <Switch>
                                <Route exact path="/" render={(routeProps) =>
                                    <myComponent history={routeProps.history} match={routeProps.match}
                                    />
                                }/>

                                [.....MORE COMPONENTS.....]

                            </Switch>
                            <Route render={(routeProps) =>
                                <BottomNav history={routeProps.history} match={routeProps.match}
                                />
                            }/>
                        </AppStateProvider>
                    </ErrorBoundary>
                </React.Suspense>
            </Router>
        </ApolloProvider>

该<TopNav>组件包含一个 Apollo 查询和订阅：

function TopNav(props) {

[.......]

let unsubscribeFromIncomingMessages = null; <=== re-runs when user changes routes

[.......]

       <Query query={INCOMING_MESSAGES_QUERY}
               variables={{"localUserId": Meteor.userId()}}>
            {({subscribeToMore, loading, error, data, refetch}) => {
                if (loading) {
                    return (
                        <div key="divLoading"></div>);
                } else {
                }
                if (error) {
                    return (
                        <div key="divError"></div>);
                }

                if (!unsubscribeFromIncomingMessages) {
                    unsubscribeFromIncomingMessages = subscribeToMore({
                        document: INCOMING_MESSAGES_SUBSCRIPTION_QUERY,
                        variables: {
                            "localUserId": Meteor.userId()
                        },
                        updateQuery: (prev, {subscriptionData}) => {
                            [.....HANDLE UPDATE DATA.....]
                        }
                    });
                }

                return (
                    <>
                    </>
                );

            }}
        </Query>

当客户端在我的应用程序中提出另一条路线时，<TopNav>会重新安装，这很好，但<Query>订阅又会重新运行。

解决这个问题的正确方法是什么？

更新

每次我导航到客户端上的新页面时，我的服务器上的订阅查询中的断点都会被命中。

这应该发生吗？如果是，那就好！但如果不是——我想知道这一点。:)

标签： reactjsreact-routerapolloreact-apolloapollo-client

解决方案

将变量设为unsubscribeFromIncomingMessages全局并添加fetchPolicy='cache-first'.<Query>

编辑：哎呀，我想我应该预料到这一点。无论您将参考存储在何处，订阅都会在您离开路线后立即停止。

subscribeToMore每次进入路线时都会运行。除非您需要能够停止订阅，否则您不需要记录对它的引用。在进入时设置订阅并不昂贵。

如果您需要在不同的路由中激活相同的订阅，您也需要在这些路由上运行它。

我的理解是，订阅不会每次都重新订阅，它只是在上次订阅具有相同变量等的地方停止。

推荐阅读