Состояние реактивной переменной клиента Apollo не сохраняется в кеше после обновления страницы

Question

У меня есть клиент Apollo, работающий в моем приложении React, и я пытаюсь сохранить информацию аутентификации в реактивной переменной, используя 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 Переменная.

Как правильно использовать здесь реактивные переменные для сохранения кеша?

Answer 1

Согласно их документации, в настоящее время это невозможно с использованием API Apollo.

В настоящее время нет встроенного API для сохранения реактивных переменных, но вы можете записывать значения переменных в localStorage(или другое хранилище) всякий раз, когда они изменяются, и инициализируйте эти переменные с их сохраненным значением (если есть) при загрузке приложения.

Для этого есть пиар. https://github.com/apollographql/apollo-client/pull/7148