变异后如何强制App重新渲染？

Question

我有一个使用 Next.js 构建的 React 应用程序。我希望能够登录然后使应用程序重新呈现，以便它尝试获取当前登录的用户。

我的_app.js组件与 apollo 提供程序包装在一起，并且还有一个获取用户查询：

class MyApp extends App {

  render() {

    const { Component, pageProps, apolloClient } = this.props;

    return (

      <>

        <Container>

          <ApolloProvider client={apolloClient}>

            <Query query={GET_USER} fetchPolicy="network-only" errorPolicy="ignore">

              {({ loading, data, error }) => console.log("rendering app", data) || (

                <>

                  <Component {...pageProps} user={data && data.me} />

                </>

              )}

            </Query>

          </ApolloProvider>

        </Container>

      </>

    );

  }

}

然后我有一个登录表单，它只是将电子邮件和密码发送到我的 API，然后返回一个带有访问令牌的 set-cookie 令牌标头。

<Mutation 

    mutation={LOGIN}

    onError={error => {

        this.setState({error: "Incorrect email or password"})

    }}

    onCompleted={() => {

        window.location.reload() // temp solution to cause app to re-render

    }}

>

  {(login, {loading}) => (

    <Login 

        {...this.props} 

        login={login} 

        loading={loading} 

        error={error} 

    />

  )}

</Mutation>

我可以成功登录，但我希望 Apollo 缓存能够与用户数据一起写入：

{

  "data": {

    "login": {

      "_id": "abcd1234",

      "accessToken": "abc123",

      "firstName": "First",

      "lastName": "Last",

      "email": "[e-mail]",

      "__typename": "User"

    }

  }

}

随着缓存被写入，我期待 _app.js / ApolloProvider 子节点在从缓存中接收道具时重新渲染。

我的 get user Query 然后应该尝试再次运行（这次使用在 cookie 中设置的访问令牌）并且应该返回一个用户（表明用户已登录）。

为什么我的突变没有告诉我的应用程序重新渲染 onCompleted？