Question

我的Layout应用中有一个nextjs组件，它进行GraphQL查询。加载页面时，我看不到onCompleted钩子被调用，但是当我在页面之间导航时，我看到了onCompleted钩子被调用。

此外，我注意到的另一件奇怪的事情是，如果删除onCompleted钩子，则Layout组件将呈现两次。

我已经放置了一个codeandbox来重现该问题-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>
  )
}

查询组件上的onCompleted挂钩的行为不一致

0 个答案: