Question

我在 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 变量。

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

刷新页面后，Apollo Client 反应变量状态不会保存在缓存中

0 个答案: