刷新页面后，Apollo Client 反应变量状态未保存在缓存中答案

【问题标题】：Apollo Client reactive variable state is not kept in cache after refreshing the page刷新页面后，Apollo Client 反应变量状态未保存在缓存中
【发布时间】：2021-08-23 19:26:57
【问题描述】：

我在我的 React 应用程序上运行 Apollo 客户端，并尝试使用 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 变量。

在这里使用反应性变量来持久化缓存的正确方法是什么？

【问题讨论】：

我正在寻找相同的解决方案我不确定 userreactivevar 挂钩是否支持。

标签： apollo-client reactive-variable

【解决方案1】：

根据他们的文档，目前无法使用 Apollo API 实现。

目前没有用于持久化反应变量的内置 API，但您可以将变量值写入localStorage（或其他商店）每当它们被修改时，并用它们初始化这些变量应用加载时存储的值（如果有）。

有一个 PR。 https://github.com/apollographql/apollo-client/pull/7148

【讨论】：