如何解决刷新页面后,Apollo Client 反应变量状态不会保存在缓存中
我在 React 应用程序上运行 Apollo Client,并尝试使用 useReactiveVar
将身份验证信息保存在 Reactive Variable 中。当我第一次设置变量时,一切都在虚拟函数中工作,但是它在刷新应用程序后重置状态。
这是我的cache.js
:
import { InMemoryCache,makeVar } from "@apollo/client";
export const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
isLoggedIn: {
read() {
return isLoggedInVar();
},},});
export const isLoggedInVar = makeVar();
export default cache;
这是读取变量并根据其状态呈现不同元素的组件:
import React from "react";
import { useReactiveVar,useMutation } from "@apollo/client";
import MainButton from "../common/MainButton";
import { isLoggedInVar,userAddressVar } from "../../cache";
import { CREATE_OR_GET_USER } from "../../mutations/User";
const Profile = () => {
const isLoggedIn = useReactiveVar(isLoggedInVar);
const [createOrGetUser] = useMutation(CREATE_OR_GET_USER);
const handleCreateOrGetUser = () => {
const loginInput = {
address: 'text',};
createOrGetUser({
variables: {
loginInput: loginInput,}).then((res) => {
isLoggedInVar(true);
});
};
const profileComponent = isLoggedIn ? (
<div>Logged In</div>
) : (
<div onClick={handleCreateOrGetUser} className="profile-image"></div>
);
return (
<div className="profile-container">
{profileComponent}
</div>
);
};
export default Profile;
当我调用 handleCreateOrGetUser
时,此组件会正确重新呈现,但是,当我刷新页面时,它会重置 isLoggedInVar
变量。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。