Apollo-client: LocalState initialisation issue: Migrating from @apollo/client (3..0.0-beta.29) to @apollo/client (3.0.2) cache not initialising data as expected

[TheoMer]

So with the beta version I would specify my cache as follows:

withData.js

  const cache = new InMemoryCache().restore(initialState || {});

  const data = {
    cartOpen: false,
    items: [
      {
        id: "ck0e27onl00av071035uzliqt",
        color: {
          id: "cjrumlijl003708947wpq15kp",
          label: "Military Green",
          name: "militarygreen",
          __typename: "Color"
        },
        description: "Push Up Low Waist Padded Swimwear.",
        mainDescription: "Bikinis Women Swimsuit 2017 Summer Beach Wear Bikini Set Push Up Swimwear Bandage Bathing Suit.",
        image: "/static/white-black-01.jpg",
        largeImage: "/static/white-black-01.jpg",
        itemvariants: [{
          id: "1234",
          __typename: 'ItemVariants',
        }],
        price: 3500,
        quantity: 0,
        size: {
          id: "cjrumlijl003708947wpq15kp",
          label: "Medium",
          name: "M",
          __typename: "Size"
        },
        title: "Bandage Black & White Swimsuit.",
        user: {
          id: "cjo7q048b000408312h9c2fo0",
          __typename: "User"
        },
        __typename: "Item"
      }
    ]
  };

  cache.writeData({ data });

  client_.onResetStore(() => cache.writeData({ data }));

and then call the localState as follows:

items.js

const LOCAL_STATE_QUERY = gql`
  query {
    items @client {
      id
      color {
        id
        label
        name
      }
      description
      mainDescription
      image
      largeImage
      itemvariants {
        id
      }
      price
      quantity
      size {
        id
        label
        name
      }
      title
      user {
        id
      }
    }
  }
`;

  // LocalState Query
  const { data: cachedItem, error: errorQuery, loading: loadingQuery } = useQuery(
    LOCAL_STATE_QUERY,
  );

But since I have changed:

  cache.writeData({ data });
  client_.onResetStore(() => cache.writeData({ data }));

to

  cache.modify({ data });
  client_.onResetStore(async () => cache.modify({ data }));

localState initialisation is not working as expected. What am I overlooking here?

[benjamn]

The cache.modify method is not a direct replacement for cache.writeData—we wouldn't just rename a method like that. I think you probably want cache.writeQuery({ query: LOCAL_STATE_QUERY, data }) instead, but please take time to validate that your changes are doing what you expected (for example, by inspecting client.cache.data), rather than simply changing your code and hoping for the best.

[TheoMer]

@benjamn Many thanks, that did the trick.