我有一个使用 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": "[email protected]",
"__typename": "User"
}
}
}
随着缓存被写入，我期待 _app.js / ApolloProvider 子节点在从缓存接收道具时重新渲染。
我的 get user Query 然后应该尝试再次运行（这次使用在 cookie 中设置的访问令牌）并且应该返回一个用户（表明用户已登录）。
为什么我的突变没有告诉我的应用程序重新渲染 onCompleted？
这是完美的场景refetchQueries()：https : //www.apollographql.com/docs/angular/features/cache-updates/#refetchqueries
在您的场景中，您可以将此道具传递给您的登录变异组件以GET_USER在登录后重新获取查询。GET USER从您的_app.js（或将其移动到的任何地方，如果您将其放入 User Hoc 中）导出。然后在您的登录突变中：
import { GET_USER } from '...'
<Mutation
mutation={LOGIN}
onError={error => {
this.setState({error: "Incorrect email or password"})
}}
onCompleted={() => {
window.location.reload() // temp solution to cause app to re-render
}}
// takes an array of queries to refetch after the mutation is complete
refetchQueries={[{ query: GET_USER }]}
>
{(login, {loading}) => (
<Login
{...this.props}
login={login}
loading={loading}
error={error}
/>
)}
</Mutation>
另一种选择是使用该update方法手动将其设置到缓存中，然后保留对该数据的引用或使用缓存 id 从缓存中检索它，这样您就不必获取更多数据，但refetchQueries对于简单来说，这是完美的像这样的登录突变检索起来并不昂贵。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句