刷新页面后，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 (将#修改为@）

apollo-client reactive-variable