From 24a64eba1d5f20a66d1508060a383d6cac9d851a Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Wed, 31 Mar 2021 00:48:44 -0600
Subject: [PATCH] Updated docs for wishlist and Node.js

---
 framework/commerce/README.md | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/framework/commerce/README.md b/framework/commerce/README.md
index 050ec3b29..6f75f1798 100644
--- a/framework/commerce/README.md
+++ b/framework/commerce/README.md
@@ -280,37 +280,37 @@ const RemoveButton = ({ item }) => {
 
 ## Wishlist Hooks
 
-Wishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.
+Wishlist hooks work just like [cart hooks](#cart-hooks). Feel free to check how those work first.
+
+The example below shows how to use the `useWishlist`, `useAddItem` and `useRemoveItem` hooks:
 
 ```jsx
-import useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'
-import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
-import useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'
+import { useWishlist, useAddItem, useRemoveItem } from '@framework/wishlist'
 
 const WishlistButton = ({ productId, variant }) => {
   const addItem = useAddItem()
   const removeItem = useRemoveItem()
-  const { data } = useWishlist()
+  const { data, isLoading, isEmpty, error } = useWishlist()
+
+  if (isLoading) return <p>Loading...</p>
+  if (error) return <p>{error.message}</p>
+  if (isEmpty) return <p>The wihslist is empty</p>
+
   const { data: customer } = useCustomer()
   const itemInWishlist = data?.items?.find(
-    (item) =>
-      item.product_id === productId &&
-      item.variant_id === variant?.node.entityId
+    (item) => item.product_id === productId && item.variant_id === variant.id
   )
 
   const handleWishlistChange = async (e) => {
     e.preventDefault()
-
-    if (!customer) {
-      return
-    }
+    if (!customer) return
 
     if (itemInWishlist) {
-      await removeItem({ id: itemInWishlist.id! })
+      await removeItem({ id: itemInWishlist.id })
     } else {
       await addItem({
         productId,
-        variantId: variant?.node.entityId!,
+        variantId: variant.id,
       })
     }
   }
@@ -323,7 +323,9 @@ const WishlistButton = ({ productId, variant }) => {
 }
 ```
 
-## Product Hooks and API
+## Commerce API
+
+While commerce hooks focus on client side data fetching and interactions, the commerce API focuses on static content generation for pages and API endpoints in a Node.js context.
 
 ### getAllProducts