Fix "'refetch' was used before it was defined."

Author: w3bdesign

components/Checkout/CheckoutForm.component.jsx

@@ -21,6 +21,18 @@ const CheckoutForm = () => {
   const [requestError, setRequestError] = useState(null);
   const [orderCompleted, setorderCompleted] = useState(false);
 
+    // Get Cart Data.
+    const { data, refetch } = useQuery(GET_CART, {
+      notifyOnNetworkStatusChange: true,
+      onCompleted: () => {
+        // Update cart in the localStorage.
+        const updatedCart = getFormattedCart(data);
+        localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
+        // Update cart data in React Context.
+        setCart(updatedCart);
+      },
+    });
+
   // Checkout GraphQL mutation
   const [checkout, { loading: checkoutLoading }] = useMutation(
     CHECKOUT_MUTATION,
@@ -39,17 +51,7 @@ const CheckoutForm = () => {
     }
   );
 
-  // Get Cart Data.
-  const { data, refetch } = useQuery(GET_CART, {
-    notifyOnNetworkStatusChange: true,
-    onCompleted: () => {
-      // Update cart in the localStorage.
-      const updatedCart = getFormattedCart(data);
-      localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
-      // Update cart data in React Context.
-      setCart(updatedCart);
-    },
-  });
+
 
   useEffect(() => {
     if (null !== orderData) {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-woocommerce",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "NextJS WooCommerce webshop",
   "main": "index.js",
   "scripts": {
@@ -24,7 +24,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hook-form": "^6.15.4",
-    "react-instantsearch-dom": "^6.10.0",
+    "react-instantsearch-dom": "^6.10.1",
     "react-spring": "^8.0.27",
     "styled-components": "^5.2.1",
     "uuid": "^8.3.2"