0

我在我的 React 应用程序上运行 Apollo 客户端，并尝试使用useReactiveVar. 当我第一次设置变量时，一切都在虚拟函数中工作，但是在刷新应用程序后它会重置状态。

这是我的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变量。

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

4

1 回答 1

0

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

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

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

于 2021-11-20T11:53:44.187 回答