product + shopify data stitch

jetskis · Sep 10, 2023 · d0764bf · d0764bf
1 parent ead053a
commit d0764bf
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 110 deletions.
diff --git a/app/queries/product.js b/app/queries/product.js
@@ -5,6 +5,43 @@
 *
 */
 
+
+export const SHOPIFY_PRODUCTS_QUERY = `#graphql
+  query product($ids: [ID!]!) {
+    nodes(ids: $ids) {
+      ... on Product {
+        id
+        title
+        handle
+        vendor
+        options {
+          name,
+          values
+        }
+        variants(first: 100) {
+          nodes {
+            id
+            title
+            availableForSale
+            price {
+              currencyCode
+              amount
+            }
+            compareAtPrice {
+              currencyCode
+              amount
+            }
+            selectedOptions {
+              name
+              value
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
 export const SHOPIFY_PRODUCT_QUERY = `#graphql
   query product($handle: String!, $selectedOptions: [SelectedOptionInput!]!) {
     product(handle: $handle) {

diff --git a/app/routes/($locale)._index.jsx b/app/routes/($locale)._index.jsx
@@ -6,28 +6,63 @@ import { flattenConnection } from '@shopify/hydrogen-react'
 
 import { QUERY_HOME } from '~/queries/sanity'
 
+import {
+  SHOPIFY_PRODUCTS_QUERY
+} from '~/queries/product'
+
+
 import PageComponentList from '~/components/PageComponentList'
 
 export async function loader({context}) {
-  const collections = await context.storefront.query(COLLECTIONS_QUERY)
-  const pages = await context.storefront.query(PAGES_QUERY)
-  const products = await context.storefront.query(PRODUCT_QUERY)
-  const articles = await context.storefront.query(ARTICLES_QUERY)
 
   const sanityPage = await context.sanity.fetch(QUERY_HOME)
-  console.log('sanity page', sanityPage)
-  // We're not covering accounts/auth in this class
-  // const customerAccessToken = await context.session.get('customerAccessToken');
-  // const customer = customerAccessToken ? 
-  //   await getCustomer(context, customerAccessToken)
-  //   : false
+  // console.log('sanity page', sanityPage)
+
+  const productIds = []
+  sanityPage?.modules?.forEach(module => {
+    if (module._type === 'module.productGrid') {
+      module.products?.forEach(({ product }) => {
+        productIds.push(product.store.gid)
+      })
+    }
+  })
+
+  const shopifyProducts = await context.storefront.query(SHOPIFY_PRODUCTS_QUERY, {
+    variables: {
+      ids: [...new Set(productIds)],
+    }
+  })
+
+  console.log('fetched shopify', shopifyProducts)
+  shopifyProducts.nodes.forEach(product => {
+    console.log('product', product.variants)
+  })
+
+  const sanityModules = sanityPage?.modules.map(module => {
+    if (module._type === 'module.productGrid') {
+      // Do something
+      const products = module.products.map(item => {
+        const shopifyProduct = shopifyProducts.nodes.find(({ id }) => {
+          return id === item.product?.store.gid
+        })
+        return {
+          ...item,
+          'shopify': shopifyProduct,
+        }
+      })
+      return {
+        ...module,
+        products
+      }
+    } else {
+      return module
+    }
+  })
+
+  console.log('sanity modules', sanityModules)
 
   return {
     sanityPage,
-    collections,
-    pages,
-    articles,
-    products
   }
 }
 
@@ -43,12 +78,7 @@ export const handle = {
 export default function Homepage() {
 
   const fetcher = useFetcher();
-  const {collections, sanityPage, pages, products, articles} = useLoaderData()
-
-  const pagesArray = flattenConnection(pages.pages)
-  const productArray = flattenConnection(products.products)
-  const collectionArray = flattenConnection(collections.collections)
-  const articlesArray = flattenConnection(articles.articles)
+  const { sanityPage} = useLoaderData()
 
   return (
     <div className='relative'>
@@ -146,96 +176,6 @@ export default function Homepage() {
           </section>
         </div>
       </>
-      <div className='bg-almost-black text-primary-green hidden'>
-        <div className='px-12 pt-12'>
-          <h2 className='text-22'>Fetch Shopify routes (helpful for existing stores/testing):</h2>
-        </div>
-        <div className='relative p-12 grid grid-cols-12'>
-          <div className='col-span-3'>
-            <h2 className='text-mono-22'>Pages:</h2>
-            {pagesArray.map(page => (
-              <Link className='block underline' to={`/pages/${page.handle}`} key={page.handle}>{page.title}</Link>
-            ))}
-          </div>
-          <div className='col-span-3'>
-            <h2 className='text-mono-22'>Products:</h2>
-            {productArray.map(product => (
-              <Link className='block underline' to={`/products/${product.handle}`} key={product.handle}>{product.title}</Link>
-            ))}
-          </div>
-          <div className='col-span-3'>
-            <h2 className='text-mono-22'>Collections:</h2>
-            {collectionArray.map(collection => (
-              <Link className='block underline' to={`/collections/${collection.handle}`} key={collection.handle}>{collection.title}</Link>
-            ))}
-          </div>
-          <div className='col-span-3'>
-            <h2 className='text-mono-22'>Articles:</h2>
-            {articlesArray.map(article => (
-              <Link className='block underline' to={`/journal/${article.blog.handle}/${article.handle}`} key={article.handle}>{article.title}</Link>
-            ))}
-          </div>
-        </div>
-      </div>
     </div>
   );
 }
-
-{/* 
-  Some sample queries to get you started:
-*/}
-
-const COLLECTIONS_QUERY = `#graphql
-  query collections {
-    collections(first: 80) {
-      nodes {
-        id
-        title
-        handle
-      }
-    }
-  }
-`;
-
-const PRODUCT_QUERY = `#graphql
-  query products {
-    products(first: 200, reverse: true, query: "inventory_total:>200") {
-      edges {
-        node {
-          handle
-          title
-        }
-      }
-    }
-  }
-`;
-
-const PAGES_QUERY = `#graphql
-  query pages {
-    pages(first: 100) {
-      edges {
-        node {
-          handle
-          title
-        }
-      }
-    }
-  }
-`;
-
-const ARTICLES_QUERY = `#graphql
-  query articles {
-    articles(first: 100, reverse: true) {
-      edges {
-        node {
-          handle
-          title
-          blog {
-            id
-            handle
-          }
-        }
-      }
-    }
-  }
-`