javascript - 下一个js : Refetchquery not updating for data fetched in getInitialProps

Question

我有一个如下所示的组件

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。正在触发查询并返回数据。但是， View 不会使用新数据进行更新。我在没有 getInitialProps 的另一个 View 中尝试了相同的操作，效果很好。

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

Answer 1

来自文档:

getInitialProps enables server-side rendering in a page and allows you to do initial data population, it means sending the page with the data already populated from the server... For the initial page load, getInitialProps will run on the server only. getInitialProps will then run on the client when navigating to a different route via the next/link component or by using next/router.

正如其名称所暗示的那样，getInitialProps 仅在页面加载时运行一次。一般来说，您应该避免像这样使用 ApolloClient——相反，您应该按照 the official examples 中所示配置它。 。这样，您就可以像平常一样使用 useQuery Hook ，而不是使用 getInitialProps。当页面在服务器上呈现时，您将使用 getDataFromTree 根据呈现的任何 useQuery Hook 来补充缓存。