Update product mutations & queries

framework/shopify/product/get-all-product-paths.ts

@@ -1,7 +1,5 @@
-import { Product } from '@commerce/types'
 import { getConfig, ShopifyConfig } from '../api'
 import fetchAllProducts from '../api/utils/fetch-all-products'
-import { ProductEdge } from '../schema'
 import getAllProductsPathsQuery from '../utils/queries/get-all-products-paths-query'
 
 type ProductPath = {
@@ -31,7 +29,7 @@ const getAllProductPaths = async (options?: {
   })
 
   return {
-    products: products?.map(({ node: { handle } }: ProductEdge) => ({
+    products: products?.map(({ node: { handle } }) => ({
       node: {
         path: `/${handle}`,
       },

framework/shopify/product/get-all-products.ts

@@ -1,6 +1,5 @@
-import { GraphQLFetcherResult } from '@commerce/api'
 import { getConfig, ShopifyConfig } from '../api'
-import { ProductEdge } from '../schema'
+import { GetAllProductsQuery, Product as ShopifyProduct } from '../schema'
 import { getAllProductsQuery } from '../utils/queries'
 import { normalizeProduct } from '../utils/normalize'
 import { Product } from '@commerce/types'
@@ -10,30 +9,25 @@ type Variables = {
   field?: string
 }
 
-type ReturnType = {
-  products: Product[]
-}
-
 const getAllProducts = async (options: {
   variables?: Variables
   config?: ShopifyConfig
   preview?: boolean
-}): Promise<ReturnType> => {
+}): Promise<{
+  products: Product[]
+}> => {
   let { config, variables = { first: 250 } } = options ?? {}
   config = getConfig(config)
 
-  const { data }: GraphQLFetcherResult = await config.fetch(
+  const { data } = await config.fetch<GetAllProductsQuery>(
     getAllProductsQuery,
     { variables }
   )
 
-  const products =
-    data.products?.edges?.map(({ node: p }: ProductEdge) =>
-      normalizeProduct(p)
-    ) ?? []
-
   return {
-    products,
+    products: data.products.edges.map(({ node }) =>
+      normalizeProduct(node as ShopifyProduct)
+    ),
   }
 }
 

framework/shopify/product/get-product.ts

@@ -1,30 +1,32 @@
-import { GraphQLFetcherResult } from '@commerce/api'
+import { GetProductBySlugQuery, Product as ShopifyProduct } from '../schema'
 import { getConfig, ShopifyConfig } from '../api'
 import { normalizeProduct, getProductQuery } from '../utils'
+import { Product } from '@commerce/types'
 
 type Variables = {
   slug: string
 }
 
-type ReturnType = {
-  product: any
-}
-
 const getProduct = async (options: {
   variables: Variables
   config: ShopifyConfig
   preview?: boolean
-}): Promise<ReturnType> => {
+}): Promise<{
+  product?: Product
+}> => {
   let { config, variables } = options ?? {}
   config = getConfig(config)
 
-  const { data }: GraphQLFetcherResult = await config.fetch(getProductQuery, {
+  const {
+    data: { productByHandle },
+  } = await config.fetch<GetProductBySlugQuery>(getProductQuery, {
     variables,
   })
-  const { productByHandle } = data
 
   return {
-    product: productByHandle ? normalizeProduct(productByHandle) : null,
+    ...(productByHandle && {
+      product: normalizeProduct(productByHandle as ShopifyProduct),
+    }),
   }
 }
 

framework/shopify/product/use-search.tsx

@@ -1,7 +1,12 @@
 import { SWRHook } from '@commerce/utils/types'
 import useSearch, { UseSearch } from '@commerce/product/use-search'
 
-import { ProductEdge } from '../schema'
+import {
+  CollectionEdge,
+  GetAllProductsQuery,
+  Product as ShopifyProduct,
+  ProductEdge,
+} from '../schema'
 import {
   getAllProductsQuery,
   getCollectionProductsQuery,
@@ -35,30 +40,38 @@ export const handler: SWRHook<
   },
   async fetcher({ input, options, fetch }) {
     const { categoryId, brandId } = input
+    const method = options?.method
+    const variables = getSearchVariables(input)
+    let products
 
-    const data = await fetch({
-      query: categoryId ? getCollectionProductsQuery : options.query,
-      method: options?.method,
-      variables: getSearchVariables(input),
-    })
-
-    let edges
-
+    // change the query to getCollectionProductsQuery when categoryId is set
     if (categoryId) {
-      edges = data.node?.products?.edges ?? []
-      if (brandId) {
-        edges = edges.filter(
-          ({ node: { vendor } }: ProductEdge) =>
-            vendor.replace(/\s+/g, '-').toLowerCase() === brandId
-        )
-      }
+      const data = await fetch<CollectionEdge>({
+        query: getCollectionProductsQuery,
+        method,
+        variables,
+      })
+      // filter on client when brandId & categoryId are set since is not available on collection product query
+      products = brandId
+        ? data.node.products.edges.filter(
+            ({ node: { vendor } }: ProductEdge) =>
+              vendor.replace(/\s+/g, '-').toLowerCase() === brandId
+          )
+        : data.node.products.edges
     } else {
-      edges = data.products?.edges ?? []
+      const data = await fetch<GetAllProductsQuery>({
+        query: options.query,
+        method,
+        variables,
+      })
+      products = data.products.edges
     }
 
     return {
-      products: edges.map(({ node }: ProductEdge) => normalizeProduct(node)),
-      found: !!edges.length,
+      products: products?.map(({ node }) =>
+        normalizeProduct(node as ShopifyProduct)
+      ),
+      found: !!products?.length,
     }
   },
   useHook: ({ useData }) => (input = {}) => {