Product provider work

[frehner]

Description

Closes #1307

• Updates useProductOptions to pull from context instead of creating its own state; a much better experience.
• Removes ProductProvider
• Updates ProductPrice to take in the product as a prop

Additional context

If you view the changes without whitespaces, the documentation updates will be a lot smaller, as I'm also removing edges { node { and replacing it with just nodes { which is much easier.

---

Before submitting the PR, please make sure you do the following:

• Read the Contributing Guidelines
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123)
• Update docs in this repository according to your change
• Run yarn changeset add if this PR cause a version bump based on Keep a Changelog and adheres to Semantic Versioning

[frehner]

@mcvinci lots of doc changes here; I thought I would give you the heads up. No rush, as this PR isn't ready yet anyway, but I figured the sooner the better for you to look over?

[mcvinci]

Looking great, @frehner! Thanks so much! ❤️ I know this is still work-in-progress, so I've just made a first pass at the docs. I've got a corresponding draft shopify-dev PR open here with the generated docs as well: https://github.com/Shopify/shopify-dev/pull/20942.

If you want me to take a look again when we're in a more final state, feel free to ping me!

[frehner]

Code here is mostly a copy-paste from useProductOptions but now in a context!

[frehner]

I changed up how this useEffect worked; I'm not sure it worked like the comment said it should. This is a bit cleaner too

[frehner]

Should help us follow the outline in the TS doc above

[frehner]

To make TS happy

[frehner]

copy/paste from a different file, with minor changes

[frehner]

These will never be null so take them out of the PartialDeep wrapper.

[mcvinci]

Docs updates look great! Thanks, @frehner! 💯

[benjaminsehl]

Awesome work — some of the more technical stuff I don't know enough to weigh in on, but already you can see this just getting so much cleaner.

Had a couple notes on queries that I'd love to see changed. Only really important to do it in the docs as we're already implementing the demo store changes.

1. Cleaning up the Media query, 2. Metafields is now only available as explicitly called items, no array.

I think 2 is already on your list of things though, so no worries if you want to ignore here.

[benjaminsehl]

Metafields as an array will need to be removed. Our API no longer supports this.

[frehner]

Yup that work is coming up. This was just a copy/paste from previous file.

[benjaminsehl]

This query can be improved via … 

 fragment MediaFields on Media {
    mediaContentType
    alt
    previewImage {
      url
    }
    ... on MediaImage {
      id
      image {
        url
        width
        height
      }
    }
    ... on Video {
      id
      sources {
        mimeType
        url
      }
    }
    ... on Model3d {
      id
      sources {
        mimeType
        url
      }
    }
    ... on ExternalVideo {
      id
      embedUrl
      host
    }
  }

Sadly the id can't actually be pulled up to the top.

[jplhomer]

❤️ Thanks for the diligent work!

For my own knowledge, is it fair to say that the reason we're taking away the ability to use useProductOptions(data) as a standalone hook (without requiring a provider wrapper) is that it's very unlikely this hook would be used on its own in isolation? And by requiring a provider pattern, we're actually making it easier to use in real-world cases (like distributed components which manage options, selling plan allocations, etc)?

Also ✨ love the lack of edges in our queries.

[frehner]

For my own knowledge, is it fair to say that the reason we're taking away the ability to use useProductOptions(data) as a standalone hook (without requiring a provider wrapper) is that it's very unlikely this hook would be used on its own in isolation? And by requiring a provider pattern, we're actually making it easier to use in real-world cases (like distributed components which manage options, selling plan allocations, etc)?

Yup, that's exactly right; it didn't make sense to me that each useProductOptions() call would keep track of its own state and that if you wanted to share that state you would have to set up your own context provider or pass all the props down.

Also ✨ love the lack of edges in our queries.

I do too, but I'm also realizing that we'll probably have to keep flattenConnection() and use it everywhere so that our code can handle if the dev uses nodes or edges.node; I don't think it make sense to force a dev to use nodes if they need the pagination data from edges or something like that. That'll be a followup PR.

[blittle]

I did some local testing, directly switching from one product to another without going to another page first. The product options and variants all seemed to work properly. Great work, looks good to me!

[frehner]

We're going to merge and try to get this in this week's release.

[scottdixon]

Hey @frehner! The demo-store no longer updates product image or price when a new variant is selected on the product page. Seems like selectedVariant value never changes? 🤔

[scottdixon]

Also I think the edges work might not be compatible with flattenConnection.

Check the FeaturedProductsBox component on the demo-store index route.