Allow deferring the query for OkendoProvider's data (#30)

* Allow deferring the query for OkendoProvider's data Pending new version of `okendo-shopify-hydrogen` * Add star rating to collection item And fix type in collection * Upgrade `@okendo/shopify-hydrogen` And tweak doc * Put back `.nvmrc` at `18.17.1` as this is the minimum version we support We'll bump it when we'll bump the minimum version we support
okendo · Jul 11, 2024 · 211f3c5 · 211f3c5
1 parent 3d37fec
commit 211f3c5
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 22 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v21.7.3
+v18.17.1
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 > **Note**
 > This demo store is built on Hydrogen v2, based on Remix. If you are using a store built with the now deprecated Hydrogen 1, please see [here](https://github.com/okendo/okendo-shopify-hydrogen-demo/tree/hydrogen-1-archive).
 
-> Note: there have been multiple versions of Shopify's Hydrogen demo store. If you project is based on an old version of it, consult our version history to find out how to add Okendo to it.
+> Note: there have been multiple versions of Shopify's Hydrogen demo store. If you project is based on an old version of it, consult the history of this repository.
 
 # Demo store for the Okendo Hydrogen components
 
@@ -17,6 +17,7 @@ This demo store is simply the `demo-store` template [provided by Shopify](https:
 ## Start the demo store locally
 
 You will need to create a `.env` file with the following values from your Hydrogen instance:
+
 ```
 SESSION_SECRET=
 PUBLIC_STORE_DOMAIN=

diff --git a/app/root.tsx b/app/root.tsx
@@ -97,7 +97,7 @@ export async function loader({context}: LoaderFunctionArgs) {
       header: await headerPromise,
       isLoggedIn: isLoggedInPromise,
       publicStoreDomain,
-      okendoProviderData: await getOkendoProviderData({
+      okendoProviderData: getOkendoProviderData({
         context,
         subscriberId: '<your-okendo-subscriber-id>',
       }),
@@ -127,12 +127,13 @@ export default function App() {
         <OkendoProvider
           nonce={nonce}
           okendoProviderData={data.okendoProviderData}
-        />
-        <Layout {...data}>
-          <Outlet />
-        </Layout>
-        <ScrollRestoration nonce={nonce} />
-        <Scripts nonce={nonce} />
+        >
+          <Layout {...data}>
+            <Outlet />
+          </Layout>
+          <ScrollRestoration nonce={nonce} />
+          <Scripts nonce={nonce} />
+        </OkendoProvider>
       </body>
     </html>
   );

diff --git a/app/routes/collections.$handle.tsx b/app/routes/collections.$handle.tsx
@@ -1,11 +1,15 @@
-import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
 import {
-  Pagination,
-  getPaginationVariables,
+  OkendoStarRating,
+  type WithOkendoStarRatingSnippet,
+} from '@okendo/shopify-hydrogen';
+import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import {
   Image,
   Money,
+  Pagination,
+  getPaginationVariables,
 } from '@shopify/hydrogen';
+import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import type {ProductItemFragment} from 'storefrontapi.generated';
 import {useVariantUrl} from '~/lib/variants';
 
@@ -81,7 +85,7 @@ function ProductItem({
   product,
   loading,
 }: {
-  product: ProductItemFragment;
+  product: ProductItemFragment & WithOkendoStarRatingSnippet;
   loading?: 'eager' | 'lazy';
 }) {
   const variant = product.variants.nodes[0];
@@ -103,6 +107,10 @@ function ProductItem({
         />
       )}
       <h4>{product.title}</h4>
+      <OkendoStarRating
+        productId={product.id}
+        okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+      />
       <small>
         <Money data={product.priceRange.minVariantPrice} />
       </small>

diff --git a/app/routes/collections.all.tsx b/app/routes/collections.all.tsx
@@ -1,4 +1,7 @@
-import { OkendoStarRating, WithOkendoStarRatingSnippet } from '@okendo/shopify-hydrogen';
+import {
+  OkendoStarRating,
+  type WithOkendoStarRatingSnippet,
+} from '@okendo/shopify-hydrogen';
 import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
 import {
   Image,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@okendo/shopify-hydrogen": "^2.1.5",
+    "@okendo/shopify-hydrogen": "^2.2.1",
     "@remix-run/react": "^2.8.0",
     "@remix-run/server-runtime": "^2.8.0",
     "@shopify/cli": "^3.59.2",
@@ -50,6 +50,6 @@
     "vite-tsconfig-paths": "^4.3.1"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=18.17.1"
   }
 }