1
- import { useCallback , useEffect , useRef } from 'react' ;
1
+ import { useCallback , useEffect , useRef , useState } from 'react' ;
2
2
import { useHistory , useLocation } from 'react-router-dom' ;
3
3
import { useLazyQuery } from '@apollo/client' ;
4
4
import { useRootComponents } from '../../context/rootComponents' ;
@@ -44,9 +44,11 @@ export const useMagentoRoute = (props = {}) => {
44
44
const component = componentMap . get ( pathname ) ;
45
45
46
46
const [ runQuery , queryResult ] = useLazyQuery ( resolveUrlQuery ) ;
47
+ const [ getRouteData , setRouteData ] = useState ( null ) ;
48
+
47
49
// destructure the query result
48
- const { data , error, loading } = queryResult ;
49
- const { route } = data || { } ;
50
+ const { error, loading } = queryResult ;
51
+ const { route } = getRouteData || { } ;
50
52
51
53
// redirect to external url
52
54
useEffect ( ( ) => {
@@ -59,16 +61,20 @@ export const useMagentoRoute = (props = {}) => {
59
61
} , [ route ] ) ;
60
62
61
63
useEffect ( ( ) => {
62
- if ( initialized . current || ! getInlinedPageData ( ) ) {
63
- runQuery ( {
64
+ const runInitialQuery = async ( ) => {
65
+ const { data } = await runQuery ( {
64
66
fetchPolicy : 'cache-and-network' ,
65
67
nextFetchPolicy : 'cache-first' ,
66
68
variables : { url : pathname }
67
69
} ) ;
70
+ setRouteData ( data ) ;
68
71
fetchedPathname . current = pathname ;
72
+ } ;
73
+ if ( initialized . current || ! getInlinedPageData ( ) ) {
74
+ runInitialQuery ( ) ;
69
75
}
70
- } , [ initialized , pathname ] ) ; // eslint-disable-line react-hooks/exhaustive-deps
71
-
76
+ } , [ initialized , pathname , runQuery ] ) ; // eslint-disable-line react-hooks/exhaustive-deps
77
+
72
78
useEffect ( ( ) => {
73
79
if ( component ) {
74
80
return ;
0 commit comments