AsyncStorage or window.Local storage should I use on Web? live LocalStore

[Rostyslavderii]

Hi. I`m try to get in and out to persist cache, on Web.
should I use this syntax?
I cant get data at my react component after adds some date on local store.
may be someone can show me where is the problem and how to fix localStore?

cache.js
export const cartItemsVar = makeVar([null]); //arr[id,id,id]
I just want to get data from the cartItemsVar and put into my component FavoritesCards.js

export const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
cartItems: {
read() {
return cartItemsVar();
},
},
},
},
},
});

persistCache({
cache,
storage: new LocalStorageWrapper(window.localStorage),
});

---

FavoritesCards.js

import { useReactiveVar } from '@apollo/client';
import { gql } from '@apollo/client';

const GET_ROCKET_ITEMS = gqlquery LocalRocket { cartItems @client };

export const FavoritesCards = () => {
const { data, loading, error } = useQuery(GET_ROCKET_ITEMS);

const cartItems = useReactiveVar(cartItemsVar); // As I understood its a hook, which I could use to get a data from cartItemsVar ? but i couldn`t use it in updateComponent or page. it always null as actually and {data} from the GET_ROCKET_ITEMS.

So how I should write to get data from persisting cache to FavoritesCards to render then my favorite rockets?))

Thank you very much.
love Apollo

[just-be-weird]

@Rostyslavderii I think its because its initial value was set to [null] and by looking at above code, I'm guessing that we've not set / updated the cartItems. So without this update apollo will show the initial value and will update all the active queries only when we do the set / update using reactive var.

import { cartItemsVar } from './cache';
// ... other imports

export function AddToCartButton({ productId }) {
  return (
    <div class="add-to-cart-button">
      <Button onClick={() => cartItemsVar([...cartItemsVar(), productId])}>
        Add to Cart
      </Button>
    </div>
  );
}

You can find the similar example on official docs page. Ref

Best regards,
Fellow coder

[wodCZ]

Due to how reactive variables are implemented, they're not supported by apollo-cache-persist. Please see the discussion in #361.