migrate from graphql-codegen to genql (#43)

* genql is awesome

* changeset

* genql prerelease

* append ts-nocheck on top of generated files

* version

Author: julianbenegas

examples/nextjs-localstorage/CHANGELOG.md

@@ -0,0 +1,15 @@
+# nextjs-localstorage
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [7be03f0]
+  - @bsmnt/storefront-hooks@2.0.2
+
+## 0.1.1-next.0
+
+### Patch Changes
+
+- Updated dependencies [7be03f0]
+  - @bsmnt/storefront-hooks@1.3.1-next.0

examples/nextjs-localstorage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-localstorage",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -17,6 +17,6 @@
   },
   "devDependencies": {
     "tsconfig": "*",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.5"
   }
 }

examples/nextjs-shopify/CHANGELOG.md

@@ -0,0 +1,17 @@
+# nextjs-shopify
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [7be03f0]
+  - @bsmnt/drop@1.2.1
+  - @bsmnt/storefront-hooks@2.0.2
+
+## 0.1.1-next.0
+
+### Patch Changes
+
+- Updated dependencies [7be03f0]
+  - @bsmnt/drop@1.2.1-next.0
+  - @bsmnt/storefront-hooks@1.3.1-next.0

examples/nextjs-shopify/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nextjs-shopify",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

examples/nextjs-shopify/src/pages/index.tsx

@@ -5,7 +5,10 @@ import styles from '../styles/Home.module.css'
 import { useCartQuery } from '../storefront/hooks'
 import { GetStaticProps } from 'next'
 import { storefront } from '../storefront/sdk-gen/sdk'
-import { CollectionFragment } from '../storefront/sdk-gen/generated'
+import {
+  CollectionFragment,
+  collectionFragment
+} from '../storefront/sdk-gen/fragments'
 
 type PageProps = {
   collections: Array<CollectionFragment>
@@ -75,7 +78,13 @@ export default function Home({ collections }: PageProps) {
 }
 
 export const getStaticProps: GetStaticProps<PageProps> = async (context) => {
-  const { collections } = await storefront.FetchCollections()
+  const { collections } = await storefront.query({
+    collections: {
+      __args: { first: 250 },
+      nodes: collectionFragment
+    }
+  })
+
   return {
     props: {
       collections: collections.nodes

examples/nextjs-shopify/src/storefront/hooks/index.tsx

@@ -1,5 +1,26 @@
 import { createStorefrontHooks } from '@bsmnt/storefront-hooks'
 import { storefront } from '../sdk-gen/sdk'
+import type {
+  CartGenqlSelection,
+  CartUserErrorGenqlSelection,
+  FieldsSelection,
+  Cart as GenqlCart
+} from '../sdk-gen/generated'
+
+const cartFragment = {
+  id: true,
+  checkoutUrl: true,
+  createdAt: true,
+  cost: { subtotalAmount: { amount: true, currencyCode: true } }
+} satisfies CartGenqlSelection
+
+export type Cart = FieldsSelection<GenqlCart, typeof cartFragment>
+
+const userErrorFragment = {
+  message: true,
+  code: true,
+  field: true
+} satisfies CartUserErrorGenqlSelection
 
 export const {
   QueryClientProvider,
@@ -12,54 +33,88 @@ export const {
   cartCookieKey: 'example-nextjs-shopify',
   fetchers: {
     fetchCart: async (cartId) => {
-      const { cart } = await storefront.FetchCart({ id: cartId })
+      const { cart } = await storefront.query({
+        cart: {
+          __args: { id: cartId },
+          ...cartFragment
+        }
+      })
+
       if (cart === undefined) throw new Error('Request failed')
       return cart
     }
   },
   mutators: {
     addLineItemsToCart: async (cartId, lines) => {
-      const { cartLinesAdd } = await storefront.AddLineItem({
-        cartId,
-        lines
+      const { cartLinesAdd } = await storefront.mutation({
+        cartLinesAdd: {
+          __args: {
+            cartId,
+            lines
+          },
+          cart: cartFragment,
+          userErrors: userErrorFragment
+        }
       })
+
       return {
         data: cartLinesAdd?.cart,
         userErrors: cartLinesAdd?.userErrors
       }
     },
     createCart: async () => {
-      const { cartCreate } = await storefront.CreateCart()
+      const { cartCreate } = await storefront.mutation({
+        cartCreate: {
+          cart: cartFragment,
+          userErrors: userErrorFragment
+        }
+      })
       return {
         data: cartCreate?.cart,
         userErrors: cartCreate?.userErrors
       }
     },
+    // TODO we could use the same mutation as createCart?
     createCartWithLines: async (lines) => {
-      const { cartCreate } = await storefront.CreateCartWithLines({ lines })
+      const { cartCreate } = await storefront.mutation({
+        cartCreate: {
+          __args: { input: { lines } },
+          cart: cartFragment,
+          userErrors: userErrorFragment
+        }
+      })
       return {
         data: cartCreate?.cart,
         userErrors: cartCreate?.userErrors
       }
     },
     removeLineItemsFromCart: async (cartId, lineIds) => {
-      const { cartLinesRemove } = await storefront.RemoveLineItem({
-        cartId,
-        lineIds
+      const { cartLinesRemove } = await storefront.mutation({
+        cartLinesRemove: {
+          __args: { cartId, lineIds },
+          cart: cartFragment,
+          userErrors: userErrorFragment
+        }
       })
       return {
         data: cartLinesRemove?.cart,
         userErrors: cartLinesRemove?.userErrors
       }
     },
     updateLineItemsInCart: async (cartId, lines) => {
-      const { cartLinesUpdate } = await storefront.UpdateLineItem({
-        cartId,
-        lines: lines.map((l) => ({
-          id: l.merchandiseId,
-          quantity: l.quantity,
-          attributes: l.attributes
-        }))
+      const { cartLinesUpdate } = await storefront.mutation({
+        cartLinesUpdate: {
+          __args: {
+            cartId,
+            lines: lines.map((l) => ({
+              id: l.merchandiseId,
+              quantity: l.quantity,
+              attributes: l.attributes
+            }))
+          },
+          cart: cartFragment,
+          userErrors: userErrorFragment
+        }
       })
       return {
         data: cartLinesUpdate?.cart,
@@ -70,4 +125,4 @@ export const {
   createCartIfNotFound: true
 })
 
-export { useProductFormHelper } from './use-product-form-helper'
+// export { useProductFormHelper } from './use-product-form-helper'

examples/nextjs-shopify/src/storefront/hooks/use-product-form-helper.tsx

@@ -1,16 +1,12 @@
 import { useCallback, useMemo, useState } from 'react'
-
-import type { ProductFragment, ProductVariant } from '../sdk-gen/generated'
+import { Product, ProductVariant } from '../sdk-gen/generated'
 
 type BareBonesVariant = Pick<
   ProductVariant,
   'availableForSale' | 'compareAtPriceV2' | 'priceV2' | 'selectedOptions' | 'id'
 >
 
-type BareBonesProduct = Pick<
-  ProductFragment,
-  'options' | 'availableForSale'
-> & {
+type BareBonesProduct = Pick<Product, 'options' | 'availableForSale'> & {
   variants: { nodes: Array<BareBonesVariant> }
 } & { [key: string]: unknown }
 

examples/nextjs-shopify/src/storefront/sdk-gen/fragments.ts

@@ -0,0 +1,79 @@
+import type {
+    Collection,
+    Product,
+    CollectionGenqlSelection,
+    FieldsSelection,
+    ProductGenqlSelection,
+    ImageGenqlSelection,
+    ProductVariantGenqlSelection,
+    ProductVariant,
+    Image,
+  } from './generated'
+  
+  const imageFragment = {
+    url: true,
+    width: true,
+    height: true,
+    altText: true,
+  } satisfies ImageGenqlSelection
+  
+  export type ImageFragment = FieldsSelection<Image, typeof imageFragment>
+  
+  export const productVariantFragment = {
+    id: true,
+    title: true,
+    availableForSale: true,
+    quantityAvailable: true,
+    compareAtPriceV2: {
+      amount: true,
+      currencyCode: true,
+    },
+    priceV2: {
+      amount: true,
+      currencyCode: true,
+    },
+    image: imageFragment,
+    selectedOptions: {
+      name: true,
+      value: true,
+    },
+  } satisfies ProductVariantGenqlSelection
+  
+  export type ProductVariantFragment = FieldsSelection<
+    ProductVariant,
+    typeof productVariantFragment
+  >
+  
+  export const productFragment = {
+    id: true,
+    title: true,
+    options: {
+      __args: { first: 25 },
+      id: true,
+      name: true,
+      values: true,
+    },
+    availableForSale: true,
+    variants: {
+      __args: { first: 100 },
+      nodes: productVariantFragment
+    },
+  } satisfies ProductGenqlSelection
+  
+  export type ProductFragment = FieldsSelection<Product, typeof productFragment>
+  
+  export const collectionFragment = {
+    id: true,
+    title: true,
+    description: true,
+    products: {
+      __args: { first: 100 },
+      nodes: productFragment,
+    },
+  } satisfies CollectionGenqlSelection
+  
+  export type CollectionFragment = FieldsSelection<
+    Collection,
+    typeof collectionFragment
+  >
+