Refactor API for getProduct and getAllProductPaths

Signed-off-by: Loan Laux <loan@outgrow.io>

framework/reactioncommerce/api/operations/get-all-product-paths.ts

@@ -39,12 +39,17 @@ export default function getAllProductPathsOperation({
     // RecursivePartial forces the method to check for every prop in the data, which is
     // required in case there's a custom `query`
     const { data } = await config.fetch<CatalogItem>(query, {
-      variables,
+      variables: {
+        ...variables,
+        shopIds: [config.shopId],
+      },
     })
-    const products = data.products.items
+    const products = data.catalogItems?.edges
 
     return {
-      products: products.map((p) => ({ path: `/${p.slug}` })),
+      products: products.map(({ node }) => ({
+        path: `/${node.product?.slug}`,
+      })),
     }
   }
 

framework/reactioncommerce/api/operations/get-product.ts

@@ -1,8 +1,9 @@
 import { Product } from '@commerce/types/product'
 import { OperationContext } from '@commerce/api/operations'
-import { Provider, VendureConfig } from '../'
-import { GetProductQuery } from '../../schema'
-import { getProductQuery } from '../../utils/queries/get-product-query'
+import { normalizeProduct } from '@framework/utils'
+import { Provider, ReactionCommerceConfig } from '../'
+import { CatalogItem } from '../../schema'
+import getProductQuery from '../../utils/queries/get-product-query'
 
 export default function getProductOperation({
   commerce,
@@ -14,55 +15,18 @@ export default function getProductOperation({
   }: {
     query?: string
     variables: { slug: string }
-    config?: Partial<VendureConfig>
+    config?: Partial<ReactionCommerceConfig>
     preview?: boolean
   }): Promise<Product | {} | any> {
     const config = commerce.getConfig(cfg)
 
-    const locale = config.locale
-    const { data } = await config.fetch<GetProductQuery>(query, { variables })
-    const product = data.product
+    const { data } = await config.fetch<CatalogItem>(query, { variables })
 
-    if (product) {
-      const getOptionGroupName = (id: string): string => {
-        return product.optionGroups.find((og) => og.id === id)!.name
-      }
-      return {
-        product: {
-          id: product.id,
-          name: product.name,
-          description: product.description,
-          slug: product.slug,
-          images: product.assets.map((a) => ({
-            url: a.preview,
-            alt: a.name,
-          })),
-          variants: product.variants.map((v) => ({
-            id: v.id,
-            options: v.options.map((o) => ({
-              // This __typename property is required in order for the correct
-              // variant selection to work, see `components/product/helpers.ts`
-              // `getVariant()` function.
-              __typename: 'MultipleChoiceOption',
-              id: o.id,
-              displayName: getOptionGroupName(o.groupId),
-              values: [{ label: o.name }],
-            })),
-          })),
-          price: {
-            value: product.variants[0].priceWithTax / 100,
-            currencyCode: product.variants[0].currencyCode,
-          },
-          options: product.optionGroups.map((og) => ({
-            id: og.id,
-            displayName: og.name,
-            values: og.options.map((o) => ({ label: o.name })),
-          })),
-        } as Product,
-      }
+    const { catalogItemProduct } = data
+
+    if (catalogItemProduct) {
+      return { product: normalizeProduct(catalogItemProduct) }
     }
-
-    return {}
   }
 
   return getProduct