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

Question

我有一个这样设置的 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> 和订阅会重新运行。

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

更新

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

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

Answer 1

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

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

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

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

我的理解是，订阅不会每次都重新订阅，它只是从上次订阅相同变量等的地方重新开始。