[RFC Reference] Add allVariantProducts property

packages/api/src/platforms/vtex/loaders/product.ts

@@ -0,0 +1,87 @@
+import { isValidSkuId, pickBestSku } from '../utils/sku'
+import { BadRequestError, NotFoundError } from '../../errors'
+import { findChannel, findLocale, findSkuId, findSlug } from '../utils/facets'
+import { mutateChannelContext, mutateLocaleContext } from '../utils/contex'
+import { enhanceSku } from '../utils/enhanceSku'
+import { IStoreSelectedFacet } from '../../..'
+import { Context } from '..'
+
+export const getProductLoader = async ( locator: IStoreSelectedFacet[], ctx: Context) => {
+        // Insert channel in context for later usage
+        const channel = findChannel(locator)
+        const locale = findLocale(locator)
+        const id = findSkuId(locator)
+        const slug = findSlug(locator)
+
+        if (channel) {
+          mutateChannelContext(ctx, channel)
+        }
+
+        if (locale) {
+          mutateLocaleContext(ctx, locale)
+        }
+
+        const {
+          loaders: { skuLoader },
+          clients: { commerce, search },
+        } = ctx
+
+        try {
+          const skuId = id ?? slug?.split('-').pop() ?? ''
+
+          if (!isValidSkuId(skuId)) {
+            throw new Error('Invalid SkuId')
+          }
+
+          const sku = await skuLoader.load(skuId)
+
+          /**
+           * Here be dragons 🦄🦄🦄
+           *
+           * In some cases, the slug has a valid skuId for a different
+           * product. This condition makes sure that the fetched sku
+           * is the one we actually asked for
+           * */
+          if (
+            slug &&
+            sku.isVariantOf.linkText &&
+            !slug.startsWith(sku.isVariantOf.linkText)
+          ) {
+            throw new Error(
+              `Slug was set but the fetched sku does not satisfy the slug condition. slug: ${slug}, linkText: ${sku.isVariantOf.linkText}`
+            )
+          }
+
+          console.log("SKU", JSON.stringify(sku, null, 2))
+
+          return sku
+        } catch (err) {
+          if (slug == null) {
+            throw new BadRequestError('Missing slug or id')
+          }
+
+          const route = await commerce.catalog.portal.pagetype(`${slug}/p`)
+
+          if (route.pageType !== 'Product' || !route.id) {
+            throw new NotFoundError(`No product found for slug ${slug}`)
+          }
+
+          const {
+            products: [product],
+          } = await search.products({
+            page: 0,
+            count: 1,
+            query: `product:${route.id}`,
+          })
+
+          console.log("PRODUCT", product)
+
+          if (!product) {
+            throw new NotFoundError(`No product found for id ${route.id}`)
+          }
+
+          const sku = pickBestSku(product.items)
+
+          return enhanceSku(sku, product)
+        }
+}

packages/api/src/platforms/vtex/resolvers/product.ts

@@ -44,13 +44,12 @@ export const StoreProduct: Record<string, Resolver<Root>> & {
 
   image: Resolver<Root, any, StoreImage[]>
 } = {
-  productID: ({ itemId }) => itemId,
+  productID: (root) => root.itemId,
   name: ({ isVariantOf, name }) => name ?? isVariantOf.productName,
-  slug: ({ isVariantOf: { linkText }, itemId }) => getSlug(linkText, itemId),
+  lala: ({ isVariantOf: { linkText }, itemId }) => getSlug(linkText, itemId),
   description: ({ isVariantOf: { description } }) => description,
   seo: ({ isVariantOf }) => ({
     title: isVariantOf.productName,
-    description: isVariantOf.description,
     canonical: canonicalFromProduct(isVariantOf),
   }),
   brand: ({ isVariantOf: { brand } }) => ({ name: brand }),

packages/api/src/platforms/vtex/resolvers/query.ts

@@ -1,14 +1,10 @@
 import { FACET_CROSS_SELLING_MAP } from './../utils/facets'
-import { BadRequestError, NotFoundError } from '../../errors'
 import { mutateChannelContext, mutateLocaleContext } from '../utils/contex'
 import { enhanceSku } from '../utils/enhanceSku'
 import {
   findChannel,
   findCrossSelling,
-  findLocale,
-  findSkuId,
-  findSlug,
-  transformSelectedFacet,
+  findLocale, transformSelectedFacet
 } from '../utils/facets'
 import { SORT_MAP } from '../utils/sort'
 import { StoreCollection } from './collection'
@@ -24,84 +20,12 @@ import type {
 } from '../../../__generated__/schema'
 import type { CategoryTree } from '../clients/commerce/types/CategoryTree'
 import type { Context } from '../index'
-import { isValidSkuId, pickBestSku } from '../utils/sku'
 import { SearchArgs } from '../clients/search'
+import { getProductLoader } from '../loaders/product'
 
 export const Query = {
   product: async (_: unknown, { locator }: QueryProductArgs, ctx: Context) => {
-    // Insert channel in context for later usage
-    const channel = findChannel(locator)
-    const locale = findLocale(locator)
-    const id = findSkuId(locator)
-    const slug = findSlug(locator)
-
-    if (channel) {
-      mutateChannelContext(ctx, channel)
-    }
-
-    if (locale) {
-      mutateLocaleContext(ctx, locale)
-    }
-
-    const {
-      loaders: { skuLoader },
-      clients: { commerce, search },
-    } = ctx
-
-    try {
-      const skuId = id ?? slug?.split('-').pop() ?? ''
-
-      if (!isValidSkuId(skuId)) {
-        throw new Error('Invalid SkuId')
-      }
-
-      const sku = await skuLoader.load(skuId)
-
-      /**
-       * Here be dragons 🦄🦄🦄
-       *
-       * In some cases, the slug has a valid skuId for a different
-       * product. This condition makes sure that the fetched sku
-       * is the one we actually asked for
-       * */
-      if (
-        slug &&
-        sku.isVariantOf.linkText &&
-        !slug.startsWith(sku.isVariantOf.linkText)
-      ) {
-        throw new Error(
-          `Slug was set but the fetched sku does not satisfy the slug condition. slug: ${slug}, linkText: ${sku.isVariantOf.linkText}`
-        )
-      }
-
-      return sku
-    } catch (err) {
-      if (slug == null) {
-        throw new BadRequestError('Missing slug or id')
-      }
-
-      const route = await commerce.catalog.portal.pagetype(`${slug}/p`)
-
-      if (route.pageType !== 'Product' || !route.id) {
-        throw new NotFoundError(`No product found for slug ${slug}`)
-      }
-
-      const {
-        products: [product],
-      } = await search.products({
-        page: 0,
-        count: 1,
-        query: `product:${route.id}`,
-      })
-
-      if (!product) {
-        throw new NotFoundError(`No product found for id ${route.id}`)
-      }
-
-      const sku = pickBestSku(product.items)
-
-      return enhanceSku(sku, product)
-    }
+    return getProductLoader(locator, ctx)
   },
   collection: (_: unknown, { slug }: QueryCollectionArgs, ctx: Context) => {
     const {
@@ -279,7 +203,7 @@ export const Query = {
       address,
     }
   },
-
+  
   redirect: async (
     _: unknown,
     { term, selectedFacets }: QueryRedirectArgs,
@@ -302,7 +226,7 @@ export const Query = {
       url: redirect,
     }
   },
-
+  
   sellers: async (
     _: unknown,
     { postalCode, geoCoordinates, country, salesChannel }: QuerySellersArgs,

packages/api/src/platforms/vtex/resolvers/skuVariations.ts

@@ -1,12 +1,13 @@
 import type { Resolver } from '..'
 import type { PromiseType } from '../../../typings'
-import type { StoreProduct } from './product'
+import { StoreProduct } from './product'
 import {
   createSlugsMap,
   getActiveSkuVariations,
   getFormattedVariations,
   getVariantsByName,
 } from '../utils/skuVariants'
+import { getProductLoader } from '../loaders/product'
 
 export type Root = PromiseType<ReturnType<typeof StoreProduct.isVariantOf>>
 
@@ -27,6 +28,10 @@ export const SkuVariants: Record<string, Resolver<Root>> = {
     ),
 
   availableVariations: (root, args) => {
+    console.log("items", JSON.stringify(root, null, "lala"))
+
+    root.isVariantOf.items
+
     const dominantVariantName = (args as SlugsMapArgs).dominantVariantName ?? root.variations[0]?.name
     const activeVariations = getActiveSkuVariations(root.variations)
 
@@ -40,4 +45,14 @@ export const SkuVariants: Record<string, Resolver<Root>> = {
 
     return filteredFormattedVariations
   },
-}
+
+  allVariantProducts: (root, args, ctx) => {
+    const slugMap = createSlugsMap(
+      root.isVariantOf.items,
+      (args as SlugsMapArgs).dominantVariantName ?? root.variations[0]?.name,
+      root.isVariantOf.linkText
+    )
+
+    return Object.values(slugMap).map(slug => getProductLoader([{ key: 'slug', value: slug }], ctx))
+  }
+}

packages/api/src/typeDefs/skuVariants.graphql

@@ -24,6 +24,8 @@ type SkuVariants {
   considered the dominant one.
   """
   availableVariations(dominantVariantName: String): FormattedVariants
+
+  allVariantProducts: [StoreProduct]
 }
 
 """

packages/core/@generated/gql.ts

@@ -16,7 +16,7 @@ const documents = {
     types.ProductSummary_ProductFragmentDoc,
   '\n  fragment Filter_facets on StoreFacet {\n    ... on StoreFacetRange {\n      key\n      label\n\n      min {\n        selected\n        absolute\n      }\n\n      max {\n        selected\n        absolute\n      }\n\n      __typename\n    }\n    ... on StoreFacetBoolean {\n      key\n      label\n      values {\n        label\n        value\n        selected\n        quantity\n      }\n\n      __typename\n    }\n  }\n':
     types.Filter_FacetsFragmentDoc,
-  '\n  fragment ProductDetailsFragment_product on StoreProduct {\n    id: productID\n    sku\n    name\n    gtin\n    description\n    unitMultiplier\n    isVariantOf {\n      name\n      productGroupID\n      skuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n      }\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      offers {\n        availability\n        price\n        listPrice\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    # Contains necessary info to add this item to cart\n    ...CartProductItem\n  }\n':
+  '\n  fragment ProductDetailsFragment_product on StoreProduct {\n    id: productID\n    sku\n    name\n    additionalProperty {\n      value\n      name\n    }\n    gtin\n    description\n    unitMultiplier\n    isVariantOf {\n      name\n      productGroupID\n      skuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n        allVariantProducts {\n          id: productID\n          sku\n          name\n          additionalProperty {\n            value\n            name\n          }\n          gtin\n          description\n          unitMultiplier\n          image {\n            url\n            alternateName\n          }\n        }\n      }\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      offers {\n        availability\n        price\n        listPrice\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    # Contains necessary info to add this item to cart\n    ...CartProductItem\n  }\n':
     types.ProductDetailsFragment_ProductFragmentDoc,
   '\n  fragment ClientManyProducts on Query {\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n    }\n  }\n':
     types.ClientManyProductsFragmentDoc,
@@ -76,7 +76,7 @@ export function gql(
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(
-  source: '\n  fragment ProductDetailsFragment_product on StoreProduct {\n    id: productID\n    sku\n    name\n    gtin\n    description\n    unitMultiplier\n    isVariantOf {\n      name\n      productGroupID\n      skuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n      }\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      offers {\n        availability\n        price\n        listPrice\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    # Contains necessary info to add this item to cart\n    ...CartProductItem\n  }\n'
+  source: '\n  fragment ProductDetailsFragment_product on StoreProduct {\n    id: productID\n    sku\n    name\n    additionalProperty {\n      value\n      name\n    }\n    gtin\n    description\n    unitMultiplier\n    isVariantOf {\n      name\n      productGroupID\n      skuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n        allVariantProducts {\n          id: productID\n          sku\n          name\n          additionalProperty {\n            value\n            name\n          }\n          gtin\n          description\n          unitMultiplier\n          image {\n            url\n            alternateName\n          }\n        }\n      }\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      offers {\n        availability\n        price\n        listPrice\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    # Contains necessary info to add this item to cart\n    ...CartProductItem\n  }\n'
 ): typeof import('./graphql').ProductDetailsFragment_ProductFragmentDoc
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.