Any help on apollo3-cache-persist?

Hello, I have some problems to use apollo3-cache-persist package. Below are my codes for setting user after login. After I successfully login, I can use query user to get the user info anywhere. But if I refresh the browser I suppose to get the user John Doe, but it’s null. I think it’s because the first line code: const userVar = makeVar(null). Each time refreshing will init the user to null. I can use the localStorgae.getItem(“user”) as the init value(if I use setItem user after login). In this way the init value will not be null. But I don’t know if this is the right way to use apollo3-cache-persist package(I think I can do with localStorage getItem/setItem even without apollo3-cache-persist). Can anyone help?

const userVar = makeVar(null);
const [client, setClient] = useState(null);

const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
user: {
read() {
return userVar();
},
},
},
},
},
});

useEffect(() => {
persistCache({
cache,
storage: new LocalStorageWrapper(window.localStorage),
trigger: “write”,
}).then(() => {
setClient(
new ApolloClient({
link: authLink.concat(splitLink),
cache,
})
);
});
}, );

const login = () => {
//After login successfully I will call userVar to set my user
userVar({
Person: {
first: “John”,
last: “Doe”
}
token:“kafsdjaklsdfj”
})

}

const eBinder_GET_USER = gql query GetUser { user @client };

const { data: user } = useQuery(eBinder_GET_USER);