Pwa 3339

packages/peregrine/lib/talons/MagentoRoute/__tests__/useMagentoRoute.spec.js

@@ -39,7 +39,19 @@ const givenQueryResult = response => {
     useLazyQuery.mockReset();
     runQuery.mockReset();
     useLazyQuery.mockImplementation(() => {
-        return [runQuery, response];
+        // Create a promise that resolves to the mocked response
+        const queryPromise = new Promise(resolve => {
+            // Immediately resolve with the response
+            resolve(response);
+        });
+
+        // Return a tuple where the first item is an async function (runQuery) and the second is the response object
+        return [
+            async () => {
+                return await queryPromise; // Return the response when the promise resolves
+            },
+            response
+        ];
     });
 };
 
@@ -243,7 +255,8 @@ describe('returns NOT_FOUND when queries come back empty', () => {
 });
 
 describe('returns REDIRECT after receiving a redirect code', () => {
-    test('redirect code 301', async () => {
+    test('redirect code 301', () => {
+        // Arrange: Set up the query result
         givenQueryResult({
             data: {
                 route: {
@@ -256,15 +269,24 @@ describe('returns REDIRECT after receiving a redirect code', () => {
             loading: false
         });
 
-        await act(() => {
-            create(<Component />);
-        });
-
-        expect(replace).toHaveBeenCalledTimes(1);
-        expect(log).toHaveBeenCalledTimes(1);
-        expect(log).toHaveBeenNthCalledWith(1, {
-            isRedirect: true,
-            relativeUrl: '/foo.html'
+        // Create a new Promise to handle `act`
+        return new Promise(resolve => {
+            // Use `act` to render the component
+            act(() => {
+                // Render the component and resolve the promise
+                create(<Component />);
+                resolve();
+            });
+        }).then(() => {
+            // Assert that `replace` was called once
+            expect(replace).toHaveBeenCalledTimes(1);
+            // Assert that `log` was called once
+            expect(log).toHaveBeenCalledTimes(1);
+            // Assert that `log` was called with the expected arguments
+            expect(log).toHaveBeenNthCalledWith(1, {
+                isRedirect: true,
+                relativeUrl: '/foo.html'
+            });
         });
     });
 

packages/peregrine/lib/talons/MagentoRoute/useMagentoRoute.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useLazyQuery } from '@apollo/client';
 import { useRootComponents } from '../../context/rootComponents';
@@ -44,9 +44,11 @@ export const useMagentoRoute = (props = {}) => {
     const component = componentMap.get(pathname);
 
     const [runQuery, queryResult] = useLazyQuery(resolveUrlQuery);
+
     // destructure the query result
     const { data, error, loading } = queryResult;
-    const { route } = data || {};
+    const [getRouteData, setRouteData] = useState(data);
+    const { route } = getRouteData || {};
 
     // redirect to external url
     useEffect(() => {
@@ -59,15 +61,34 @@ export const useMagentoRoute = (props = {}) => {
     }, [route]);
 
     useEffect(() => {
+        let isMounted = true; // Track whether the component is still mounted
+        const runInitialQuery = async () => {
+            try {
+                const { data } = await runQuery({
+                    fetchPolicy: 'cache-and-network',
+                    nextFetchPolicy: 'cache-first',
+                    variables: { url: pathname }
+                });
+
+                if (isMounted) {
+                    setRouteData(data);
+                    fetchedPathname.current = pathname;
+                }
+            } catch (error) {
+                if (isMounted) {
+                    console.error('Error running initial query:', error);
+                }
+            }
+        };
         if (initialized.current || !getInlinedPageData()) {
-            runQuery({
-                fetchPolicy: 'cache-and-network',
-                nextFetchPolicy: 'cache-first',
-                variables: { url: pathname }
-            });
-            fetchedPathname.current = pathname;
+            runInitialQuery();
         }
-    }, [initialized, pathname]); // eslint-disable-line react-hooks/exhaustive-deps
+        // Cleanup function
+        return () => {
+            isMounted = false; // Mark as unmounted
+        };
+    }, [initialized, pathname, runQuery]);
+    // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => {
         if (component) {

packages/venia-ui/upward.yml

@@ -21,7 +21,7 @@ veniaResponse:
           pattern: '(js|json|png|jpg|gif|svg|ico|css|txt)'
           use: veniaStatic
         - matches:  urlResolver.redirect_code
-          pattern: '301'
+          pattern: '(301|302)'
           use: dynamicRedirect
     default: veniaAppShell