Populating PermaCart Link with browser cookies has an edge case when a product is deleted

[jejo]

I'm building a custom storefront with Next.js and using Shopify storefront API as my backend using the "Headless" sales channel.

I'm running into an edge case with permacart links that I can't quite solve.

To store a user's shopping cart across sessions, I'm using browser cookies. Once the user returns to the website, the local shopping cart is populated with the information in the browser cookies.

However, if a product is deleted from the Shopify admin, it remains in the browser cookies, and the permacart link breaks since that product is no longer apart of the Shopify shop.

How can I reconcile between the products in the browser cookies, and the Shopify admin?

Requesting every single product and their variants on mount is unperformant and would exceed the Shopify query limit in most cases so that really isn't an option.

[jejo · Accepted solution]

in case anyone is wondering what the solution is: 

since the permacart link is made up of variant id's, we can query the GraphQL API for the variants that are stored in the browser's cookies, and thus are in the user's cart.

The following query achieves that:

query {
  nodes(ids: ["gid://shopify/ProductVariant/19523123249174", "gid://shopify/ProductVariant/19523123216406", "gid://shopify/ProductVariant/19523123314710"]) {
    ... on ProductVariant {
      id
      title
      price
      # Add additional fields as needed
    }
  }
}

You can try this example at the Shopify GraphQL explorer

https://shopify.dev/graphiql/admin-graphiql 

The second variant id is intentionally incorrect as to test to see what the response would be in the case that a variant does not exist in the Shopify store. It will return null in the case that the variant doesn't exist in the store, and with that information in the response we can then deal with the knowledge that that variant no longer exists.