saleor: refactor GraphQL queries

framework/saleor/api/utils/fetch-graphql-api.ts

@@ -11,11 +11,13 @@ const fetchGraphqlApi: GraphQLFetcher = async (query: string, { variables } = {}
   const config = getConfig()
   const token = getToken()
 
-  const res = await fetch(API_URL || '', {
+  const res = await fetch(API_URL!, {
     ...fetchOptions,
     method: 'POST',
     headers: {
-      Authorization: `Bearer ${token}`,
+      ...(token && {
+        Authorization: `Bearer ${token}`,
+      }),
       ...fetchOptions?.headers,
       'Content-Type': 'application/json',
     },

framework/saleor/cart/use-remove-item.tsx

@@ -27,7 +27,7 @@ export const handler = {
         lineId: itemId,
       },
     })
-    return checkoutToCart(data.checkoutLinesUpdate)
+    return checkoutToCart(data.checkoutLineDelete)
   },
   useHook:
     ({ fetch }: MutationHookContext<Cart | null, RemoveCartItemBody>) =>

framework/saleor/utils/checkout-to-cart.ts

@@ -1,7 +1,7 @@
 import { Cart } from '../types'
 import { CommerceError } from '@commerce/utils/errors'
 
-import { CheckoutLinesAdd, CheckoutLinesUpdate, CheckoutCreate, CheckoutError, Checkout, Maybe } from '../schema'
+import { CheckoutLinesAdd, CheckoutLinesUpdate, CheckoutCreate, CheckoutError, Checkout, Maybe, CheckoutLineDelete } from '../schema'
 
 import { normalizeCart } from './normalize'
 import throwUserErrors from './throw-user-errors'
@@ -11,7 +11,7 @@ export type CheckoutQuery = {
   errors?: Array<CheckoutError>
 }
 
-export type CheckoutPayload = CheckoutLinesAdd | CheckoutLinesUpdate | CheckoutCreate | CheckoutQuery
+export type CheckoutPayload = CheckoutLinesAdd | CheckoutLinesUpdate | CheckoutCreate | CheckoutQuery | CheckoutLineDelete
 
 const checkoutToCart = (checkoutPayload?: Maybe<CheckoutPayload>): Cart => {
   if (!checkoutPayload) {

framework/saleor/utils/fragments/checkout-details.ts

@@ -1,48 +1,48 @@
-export const CheckoutDetails = `
+export const CheckoutDetails = /* GraphQL */ `
-  id
+  fragment CheckoutDetails on Checkout {
-  token
-  created
-
-  totalPrice {
-    currency
-    gross {
-      amount
-    }
-  }
-  subtotalPrice {
-    currency
-    gross {
-      amount
-    }
-  }
-
-  lines {
     id
-    variant {
+    token
-      id
+    created
-      name
-      sku
-      product {
-        slug
-      }
-      media {
-        url
-      }
-      pricing {
-        price {
-          gross {
-            amount
-          }
-        }
-        
-      }
-    }
-    quantity
     totalPrice {
       currency
       gross {
         amount
       }
     }
+    subtotalPrice {
+      currency
+      gross {
+        amount
+      }
+    }
+
+    lines {
+      id
+      variant {
+        id
+        name
+        sku
+        product {
+          slug
+        }
+        media {
+          url
+        }
+        pricing {
+          price {
+            gross {
+              amount
+            }
+          }
+        }
+      }
+      quantity
+      totalPrice {
+        currency
+        gross {
+          amount
+        }
+      }
+    }
   }
 `

framework/saleor/utils/mutations/checkout-create.ts

@@ -2,19 +2,16 @@ import * as fragment from '../fragments'
 
 export const CheckoutCreate = /* GraphQL */ `
   mutation CheckoutCreate {
-    checkoutCreate(input: {
+    checkoutCreate(input: { email: "customer@example.com", lines: [], channel: "default-channel" }) {
-      email: "customer@example.com", 
-      lines: [], 
-      channel: "default-channel"
-    }) {
       errors {
         code
         field
         message
       }
-      checkout { 
+      checkout {
-        ${fragment.CheckoutDetails}
+        ...CheckoutDetails
       }
     }
   }
+  ${fragment.CheckoutDetails}
 `

framework/saleor/utils/mutations/checkout-line-add.ts

@@ -9,8 +9,9 @@ export const CheckoutLineAdd = /* GraphQL */ `
         message
       }
       checkout {
-        ${fragment.CheckoutDetails}
+        ...CheckoutDetails
       }
     }
   }
+  ${fragment.CheckoutDetails}
 `

framework/saleor/utils/mutations/checkout-line-remove.ts

@@ -2,18 +2,16 @@ import * as fragment from '../fragments'
 
 export const CheckoutLineDelete = /* GraphQL */ `
   mutation CheckoutLineDelete($checkoutId: ID!, $lineId: ID!) {
-    checkoutLineDelete(
+    checkoutLineDelete(checkoutId: $checkoutId, lineId: $lineId) {
-      checkoutId: $checkoutId
-      lineId: $lineId
-    ) {
       errors {
         code
         field
         message
       }
       checkout {
-       ${fragment.CheckoutDetails}
+        ...CheckoutDetails
       }
     }
   }
+  ${fragment.CheckoutDetails}
 `

framework/saleor/utils/mutations/checkout-line-update.ts

@@ -9,8 +9,9 @@ export const CheckoutLineUpdate = /* GraphQL */ `
         message
       }
       checkout {
-        ${fragment.CheckoutDetails}
+        ...CheckoutDetails
       }
     }
   }
+  ${fragment.CheckoutDetails}
 `

framework/saleor/utils/normalize.ts

@@ -73,7 +73,10 @@ export function normalizeProduct(productNode: SaleorProduct): Product {
     description: description ? JSON.parse(description)?.blocks[0]?.data.text : '',
     path: `/${slug}`,
     slug: slug?.replace(/^\/+|\/+$/g, ''),
-    price: (pricing?.priceRange?.start?.net && money(pricing.priceRange.start.net)) || { value: 0, currencyCode: 'USD' },
+    price: (pricing?.priceRange?.start?.net && money(pricing.priceRange.start.net)) || {
+      value: 0,
+      currencyCode: 'USD',
+    },
     // TODO: Check nextjs-commerce bug if no images are added for a product
     images: media?.length ? media : [{ url: placeholderImg }],
     variants: variants && variants.length > 0 ? normalizeProductVariants(variants as ProductVariant[]) : [],

framework/saleor/utils/queries/product-one-by-slug.ts

@@ -34,7 +34,7 @@ export const ProductOneBySlug = /* GraphQL */ `
           }
         }
       }
-      images {
+      media {
         url
         alt
       }