feat: return absolute media URLs from GraphQL

[dancastellon]

Resolves #4543
Impact: minor
Type: feature

Issue

Currently GraphQL returns relative media URLs. Because of this, storefront needs to prepend the returned paths with the Meteor server's base URL.

Solution

Implement the currently unused xformProductMedia function in resolvers to prepend media URLs with the server's base URL. This will allow us in the future to take account for CDNs.

Breaking changes

None

Testing

1. Catalog Image URLs
   • Create a product and upload some images. Click on a variant option and add images to that option. Publish product.
   • Query GraphQL

{
  catalogItems(shopIds: ["cmVhY3Rpb24vc2hvcDpKOEJocTN1VHRkZ3daeDNyeg=="]) {
    edges {
      node {
        createdAt
        updatedAt
        ... on CatalogItemProduct {
          product {
            media {
              URLs {
                large
                medium
                original
                small
                thumbnail
              }
            }
            primaryImage {
              URLs {
                large
                medium
                original
                small
                thumbnail
              }
            }
            variants {
              media {
                URLs {
                  large
                  medium
                  original
                  small
                  thumbnail
                }
              }
              primaryImage {
                URLs {
                  large
                  medium
                  original
                  small
                  thumbnail
                }
              }
              options {
                media {
                  URLs {
                    large
                    medium
                    original
                    small
                    thumbnail
                  }
                }
                primaryImage {
                  URLs {
                    large
                    medium
                    original
                    small
                    thumbnail
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

• Confirm image URLs are absolute (and correct)

2. Cart Image URLs
   • Add an item to your cart that has an image
   • Query GraphQL

accountCartByAccountId(
    accountId: “...",
    shopId: “..."
  ) {
    items {
      edges {
        node {
          imageURLs {
            large
            medium
            original
            small
            thumbnail
          }
        }
      }
    }
  }

• Confirm image URLs are absolute (and correct)

3. Imports/plugins/core/cart/server/methods/addToCart.js

• After context on line 38, add logging:

  console.log("context user:", context.user);
  console.log("context rootUrl:", context.rootUrl);
  console.log("context getAbsoluteUrl:", context.getAbsoluteUrl("test"));

• Add something to your cart and confirm server log shows correct context user, root url, and absolute url

[dancastellon]

@aldeed Is this all that's needed? How can I take into account when a CDN is being used?

[aldeed]

Variants can have options, which have the same schema as variants. if (variant.options) then do the same map on the options.

[aldeed]

Similar to how the current Reaction.absoluteUrl function works, this should take an optional path arg and then do the work of properly appending that path. It should check if it starts with / and remove it so that we don't end up with two /.

In your xform you will then do something like large: context.getAbsoluteUrl(large).

Actually, performance wise, it's best if you have two different functions. This function you have now would be called only one time in buildContext. You could actually set the result of that on context, too, as rootUrl. Then context.getAbsoluteUrl would only do the work to combine root url with path. Something like:

function buildContext() {
  context.rootUrl = getRootUrl(request); // this is the function you currently have, renamed
  context.getAbsoluteUrl = (path) => getAbsoluteUrl(context.rootUrl, path); // this just combines the strings intelligently
}

[dancastellon]

@aldeed Thanks, changes made!

[aldeed]

Not merging yet because we should merge this around the same time as the starter kit PR: reactioncommerce/example-storefront#243