Непоследовательное поведение с перехватом onCompleted для компонента Query - PullRequest
Новая
       44

Непоследовательное поведение с перехватом onCompleted для компонента Query

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

У меня есть Layout компонент в моем nextjs приложении, он делает запрос GraphQL. Когда я загружаю страницу, я не вижу, как вызывается хук onCompleted, но при переходе от страницы к странице я вижу, что хук onCompleted вызывается.

Кроме того, еще одна странная вещь, которую я заметил, это то, что компонент Layout визуализируется дважды, если я удаляю ловушку onCompleted.

Я поставил коды и коробку для воспроизведения проблемы - https://codesandbox.io/s/xox5lql10o. Это немного медленно, но должно быть в состоянии увидеть проблему. Любая помощь будет высоко ценится!

Это мой Layout компонент, 

const Layout = ({ className, hideHeader, hideFooter, router, children }) => {
  const url = urlParse(router.asPath, true)

  return (
    <Query
      query={query}
      variables={{ url: url.pathname }}
      onCompleted={(data) => {
        console.log('query completed')
      }}
    >
      {({ data, error, loading }) => {
        if (error) return <p>Error: {error.message}</p>
        if (loading) return null
        console.log('inside layout')
        const { page } = data
        const renderHeader = !hideHeader ? <Header /> : null
        const renderFooter = !hideFooter ? <Footer /> : null
        return (
          <PageProvider value={Object.assign(page, { router })}>
            <ThemeProvider theme={theme}>
              <div className={className}>
                <GlobalStyles />
                <Head />
                {renderHeader}
                <main>
                  {children}
                </main>
                {renderFooter}
              </div>
            </ThemeProvider>
          </PageProvider>
        )
      }}
    </Query>
  )
}
...