ApolloGraphQL & React: не вызывать запросы и подписку, когда компонент перемонтируется? - PullRequest
Новая
       46

ApolloGraphQL & React: не вызывать запросы и подписку, когда компонент перемонтируется?

0 голосов
/ 05 апреля 2019

У меня установлен маршрутизатор 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> и подписка снова и снова.

Как правильно решить эту проблему?

ОБНОВЛЕНИЕ

Точка останова на моем сервере в запросе подписки срабатывает каждый раз, когда я перехожу на новую страницу в моем клиенте.

Это предполагается случиться?Если это так, хорошо!Но если нет - я бы хотел это знать.:)

1 Ответ

1 голос
/ 05 апреля 2019

Сделать переменную unsubscribeFromIncomingMessages глобальной и добавить fetchPolicy='cache-first' на <Query>.

РЕДАКТИРОВАТЬ: Упс, я полагаю, я должен был ожидать этого.Подписка будет остановлена, как только вы уйдете с маршрута, независимо от того, где вы храните ссылку.

subscribeToMore будет выполняться каждый раз, когда вы вводите маршрут.Если вам не нужно иметь возможность остановить подписку, вам не нужно записывать ссылку на нее.Настроить подписку при входе не дорого.

Если вам нужна одна и та же подписка, активная на разных маршрутах, вам потребуется запустить ее и на этих маршрутах.

Насколько я понимаюподписка не повторяется каждый раз, она просто определяет, где остановилась последняя подписка с теми же переменными и т. д.

...