javascript - 下一个js:Refetchquery不会针对getInitialProps中获取的数据进行更新

我有一个如下所示的组件

class InitialPropsDetail extends React.Component<Props> {

  static getInitialProps = async (ctx: any) => {
    try {
      const { data, error, loading } = await ctx.apolloClient.query({
        query: GET_CURRENT_USER_QUERY,
      })
      const user = data.currentUser
      return { user, errors: error, loading }
    } catch (err) {
      return { errors: err.message }
    }
  }

  render() {
    const { user, error } = this.props
    if (error) {
      return (
        <Layout title={`Something went wrong...`}>
          <p>
            <span style={{ color: 'red' }}>Error:</span> {error}
          </p>
        </Layout>
      )
    }

    return (
      <Layout title={`${user ? user.name : ''} | Sav.to`}>
        {user && <UserDetail user={user} />}
      </Layout>
    )
  }
}

由于SEO原因，我希望此页面为SSR。因此，我正在使用getInitialProps来渲染一些数据。后来又执行了一个更新其中一些数据的操作，我对该操作执行了Graphql refetchQuery。查询被激发并返回数据。但是，视图不会使用新数据进行更新。我在没有getInitialProps的另一种视图中尝试了相同的方法，并且效果很好。

如何更新通过getInitialProps获取的数据？

最佳答案

从文档：


  getInitialProps在页面中启用服务器端呈现，并允许您进行初始数据填充，这意味着发送包含服务器中已填充数据的页面...对于初始页面加载，getInitialProps将在服务器上运行只要。通过getInitialProps组件或使用next/link导航到其他路由时，next/router将在客户端上运行。


就像其名称所暗示的那样，getInitialProps仅在加载页面时运行一次。通常，应避免像这样使用ApolloClient，而是应按the official examples中所示进行配置。这样，您可以像平常一样使用useQuery钩子，而不是使用getInitialProps。在服务器上呈现页面后，您将使用getDataFromTree根据呈现的任何useQuery钩子为缓存分配内存。

关于javascript - 下一个js:Refetchquery不会针对getInitialProps中获取的数据进行更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61431190/