cleanId in ProductForm component

[SMccarrick]

Hi @iamkevingreen

First off I'd just like to thank you for this great template!

I just have a quick question about the ProductForm component. You're using shopify-gid to encode and decode an id. You then set the decoded value to cleanId. I can't see where cleanId is used. It seems its just set and then never actually read anywhere. Would you be able to explain the purpose of this, please?

Link to the code in question:

midway/web/src/components/product/form.tsx

Lines 38 to 49 in 4c7e8cb

	const shopifyId = encode("Product", productId, {
	accessToken: process.env.GATSBY_SHOPIFY_STOREFRONT_TOKEN,
	})
	client.product.fetch(shopifyId).then((product: any) => {
	const decodedVariants = [] as any
	product.variants.forEach((variant: any) => {
	decodedVariants.push({
	...variant,
	cleanId: parseInt(decode(variant.id).id, 0),
	})
	})

Cheers

Stephen

[iamkevingreen]

Midway was created from a destructuring of a number of other headless sites of similar structure, it's possible the cleanId had a purpose in another build and was simply unknowingly left in this portion of code.

What I imagine it's used for is matching against sanity product/variant ids you may use within the system. Because Shopify returns back the encoded versions it's harder to match against the sanity instances that are using the decoded variants.

This could be refactored to the point that Sanity stores the encoded version which would prevent the need to do so much of this encoding/decoding nonsense.

[SMccarrick]

ahh okay, that makes sense.

Yeah, you could potentially do this at the webhook level. Wouldn't it just be as easy as encoding the productId there?

[iamkevingreen]

I'd have to decode/encode it differently, since those packages don't work on the server. I actually feel like @blimpmason maybe implemented the sync with encoded versions?

[blimpmason]

Yeah I used shopify-gid in the lambda to encode the variant id and store it in Sanity with the rest of the variant data. Here's a gist to my working shopify-sync lambda:

https://gist.github.com/blimpmason/cc20e71eb1de39c3efb17a40aa7e8428

Another idea is to use the product id from the webhook and then use the storefront api or admin api to fetch the full graphql product data object so that the data attributes synced into Sanity align more with the data attributes fetched client-side by the product form. I haven't tried that yet but I'm planning to for an upcoming project that needs min/max variant pricing attributes and variant inventory baked in (stale while revalidated client side).

[SMccarrick]

Cheers for this guys. This might be a worthwhile change to the midway template? as in moving the encode to the lambda. What do you think @iamkevingreen I don't mind getting a PR up.

[iamkevingreen]

@SMccarrick So... We still need this, and we still need to encode/decode things, reason being we need the real product ID in order to sync the product purchase flow. So when you checkout inside of the shopify checkout it registers a '1202383933' product id, but if on the headless side you track addToCart zkldalksdfklasldkfklasdfj3owejflaksdfklasdjflasdjflasjdflasdflkasdf== nonsense junk... then they're out of sync. So you still need to play the encode/decode game, additionally the lineItems in the buy sdk are encoded so you have to decode them etc. At some point you need to encode/decode 😬