Added codegen

codegen.json

@@ -0,0 +1,21 @@
+{
+  "schema": {
+    "https://buybutton.store/graphql": {
+      "headers": {
+        "Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJlYXQiOjE3NjcxMzkyMDAsInN1Yl90eXBlIjoyLCJ0b2tlbl90eXBlIjoxLCJjb3JzIjpbImh0dHBzOi8vZGV2ZWxvcGVyLmJpZ2NvbW1lcmNlLmNvbSJdLCJjaWQiOjEsImlhdCI6MTU3NjI1MzgyNCwic3ViIjoiM3dtZThrcWtrNjQwNzZueWljMGkzamk0NG5wajQ2byIsInNpZCI6OTk5MzMxNzg0LCJpc3MiOiJCQyJ9.Rqt6hNI2W-XSOzHl4pqtfhAOygwka6atCIaIZ_WAa9v3dOctnBlZpBV5wzd3ICCy4sTCOZ9mJwcFH5_CHmJpNQ"
+      }
+    }
+  },
+  "documents": [
+    {
+      "./lib/bigcommerce/api/queries/**/*.ts": {
+        "noRequire": true
+      }
+    }
+  ],
+  "generates": {
+    "./lib/bigcommerce/schema.d.ts": {
+      "plugins": ["typescript", "typescript-operations"]
+    }
+  }
+}

lib/bigcommerce/api/index.ts

@@ -0,0 +1,11 @@
+import { CommerceAPI } from 'lib/commerce/api';
+import { GetAllProductsQuery } from '../schema';
+import { getAllProductsQuery } from './queries/get-all-products';
+
+export default class BigcommerceAPI implements CommerceAPI {
+  getAllProducts<T = GetAllProductsQuery>(
+    query: string = getAllProductsQuery
+  ): Promise<T> {
+    return null as any;
+  }
+}

lib/bigcommerce/api/queries/get-all-products.ts

@@ -0,0 +1,79 @@
+export const responsiveImageFragment = /* GraphQL */ `
+  fragment responsiveImage on Image {
+    url320wide: url(width: 320)
+    url640wide: url(width: 640)
+    url960wide: url(width: 960)
+    url1280wide: url(width: 1280)
+  }
+`;
+
+export const getAllProductsQuery = /* GraphQL */ `
+  query getAllProducts {
+    site {
+      products(first: 4) {
+        pageInfo {
+          startCursor
+          endCursor
+        }
+        edges {
+          cursor
+          node {
+            entityId
+            name
+            path
+            brand {
+              name
+            }
+            description
+            prices {
+              price {
+                value
+                currencyCode
+              }
+              salePrice {
+                value
+                currencyCode
+              }
+            }
+            images {
+              edges {
+                node {
+                  ...responsiveImage
+                }
+              }
+            }
+            variants {
+              edges {
+                node {
+                  entityId
+                  defaultImage {
+                    ...responsiveImage
+                  }
+                }
+              }
+            }
+            options {
+              edges {
+                node {
+                  entityId
+                  displayName
+                  isRequired
+                  values {
+                    edges {
+                      node {
+                        entityId
+                        label
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ${responsiveImageFragment}
+`;

lib/bigcommerce/cart.tsx

@@ -1,7 +1,7 @@
 import {
   CartProvider as CommerceCartProvider,
   useCart as useCommerceCart,
-} from '../commerce/cart';
+} from 'lib/commerce/cart';
 
 export type Cart = any;
 

lib/bigcommerce/index.tsx

@@ -2,7 +2,7 @@ import {
   CommerceProvider as CoreCommerceProvider,
   Connector,
   useCommerce as useCoreCommerce,
-} from '../commerce';
+} from 'lib/commerce';
 
 async function getText(res: Response) {
   try {

lib/commerce/api/index.ts

@@ -0,0 +1,9 @@
+export interface CommerceAPI {
+  getAllProducts(query: string): Promise<any>;
+}
+
+// export default class CommerceAPI {
+//   getAllProducts(query: string) {
+
+//   }
+// }

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "generate": "graphql-codegen"
   },
   "dependencies": {
     "@tailwindcss/ui": "^0.6.2",
@@ -17,15 +18,19 @@
     "react-dom": "^16.13.1",
     "swr": "^0.3.3"
   },
-  "resolutions": {
-    "webpack": "^5.0.0-beta.30"
-  },
   "devDependencies": {
+    "@graphql-codegen/cli": "^1.17.10",
+    "@graphql-codegen/typescript": "^1.17.10",
+    "@graphql-codegen/typescript-operations": "^1.17.8",
     "@types/node": "^14.11.2",
     "@types/react": "^16.9.49",
+    "graphql": "^15.3.0",
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
     "tailwindcss": "^1.8.10",
     "typescript": "^4.0.3"
+  },
+  "resolutions": {
+    "webpack": "^5.0.0-beta.30"
   }
 }