Use lazy query to avoid fetching until/unless a cart exists

Signed-off-by: Stephen Rugh <rugh@adobe.com>
magento · Jan 15, 2020 · 7b27b29 · 7b27b29
1 parent c1cd366
commit 7b27b29
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 58 deletions.
diff --git a/packages/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js b/packages/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js
@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useLazyQuery } from '@apollo/react-hooks';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 
 /**
@@ -23,12 +23,23 @@ const flattenData = data => {
 
 export const usePriceSummary = props => {
     const [{ cartId }] = useCartContext();
-    const { error, loading, data } = useQuery(props.query, {
-        variables: {
-            cartId
-        },
-        fetchPolicy: 'no-cache'
-    });
+
+    const [fetchPriceSummary, { error, loading, data }] = useLazyQuery(
+        props.query,
+        {
+            fetchPolicy: 'no-cache'
+        }
+    );
+
+    useEffect(() => {
+        if (cartId) {
+            fetchPriceSummary({
+                variables: {
+                    cartId
+                }
+            });
+        }
+    }, [cartId, fetchPriceSummary]);
 
     const handleProceedToCheckout = useCallback(() => {
         // TODO: Navigate to checkout view

diff --git a/packages/venia-ui/lib/components/CartPage/PriceSummary/__tests__/priceSummary.spec.js b/packages/venia-ui/lib/components/CartPage/PriceSummary/__tests__/priceSummary.spec.js
@@ -2,9 +2,10 @@ import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 
 import PriceSummary from '../priceSummary';
-import { useQuery } from '@apollo/react-hooks';
+import { useLazyQuery } from '@apollo/react-hooks';
 
 jest.mock('@apollo/react-hooks', () => {
+    const runQuery = jest.fn();
     const queryResult = {
         data: {
             cart: {
@@ -55,9 +56,9 @@ jest.mock('@apollo/react-hooks', () => {
         error: null,
         loading: false
     };
-    const useQuery = jest.fn(() => queryResult);
+    const useLazyQuery = jest.fn(() => [runQuery, queryResult]);
 
-    return { useQuery };
+    return { useLazyQuery };
 });
 
 jest.mock('@magento/peregrine/lib/context/cart', () => {
@@ -95,73 +96,82 @@ test('renders PriceSummary correctly', () => {
 });
 
 test('renders an error state if query fails', () => {
-    useQuery.mockReturnValueOnce({
-        error: true
-    });
+    useLazyQuery.mockReturnValueOnce([
+        jest.fn(),
+        {
+            error: true
+        }
+    ]);
 
     const tree = createTestInstance(<PriceSummary {...defaultProps} />);
 
     expect(tree.toJSON()).toMatchSnapshot();
 });
 
 test('renders nothing if query is loading', () => {
-    useQuery.mockReturnValueOnce({
-        loading: true
-    });
+    useLazyQuery.mockReturnValueOnce([
+        jest.fn(),
+        {
+            loading: true
+        }
+    ]);
 
     const tree = createTestInstance(<PriceSummary {...defaultProps} />);
 
     expect(tree.toJSON()).toMatchSnapshot();
 });
 test('renders nothing if query returns no items', () => {
-    useQuery.mockReturnValueOnce({
-        data: {
-            cart: {
-                items: [
-                    // Intentionally empty
-                ],
-                applied_gift_cards: [],
-                shipping_addresses: [
-                    {
-                        selected_shipping_method: {
-                            amount: {
-                                value: 0,
-                                currency: 'USD'
-                            }
-                        }
-                    }
-                ],
-                prices: {
-                    subtotal_excluding_tax: {
-                        currency: 'USD',
-                        value: 11
-                    },
-                    grand_total: {
-                        currency: 'USD',
-                        value: 10
-                    },
-                    discounts: [
+    useLazyQuery.mockReturnValueOnce([
+        jest.fn(),
+        {
+            data: {
+                cart: {
+                    items: [
+                        // Intentionally empty
+                    ],
+                    applied_gift_cards: [],
+                    shipping_addresses: [
                         {
-                            amount: {
-                                value: 1,
-                                currency: 'USD'
+                            selected_shipping_method: {
+                                amount: {
+                                    value: 0,
+                                    currency: 'USD'
+                                }
                             }
                         }
                     ],
-                    applied_taxes: [
-                        {
-                            amount: {
-                                value: 0,
-                                currency: 'USD'
+                    prices: {
+                        subtotal_excluding_tax: {
+                            currency: 'USD',
+                            value: 11
+                        },
+                        grand_total: {
+                            currency: 'USD',
+                            value: 10
+                        },
+                        discounts: [
+                            {
+                                amount: {
+                                    value: 1,
+                                    currency: 'USD'
+                                }
                             }
-                        }
-                    ]
+                        ],
+                        applied_taxes: [
+                            {
+                                amount: {
+                                    value: 0,
+                                    currency: 'USD'
+                                }
+                            }
+                        ]
+                    }
                 }
-            }
-        },
-        error: null,
-        loading: false
-    });
+            },
+            error: null,
+            loading: false
+        }
+    ]);
 
     const tree = createTestInstance(<PriceSummary {...defaultProps} />);