Add Checkout mutation

Author: w3bdesign

components/Checkout/CheckoutForm.component.jsx

@@ -2,7 +2,9 @@ import { useState, useContext, useEffect } from 'react';
 import { useQuery, useMutation } from '@apollo/react-hooks';
 
 import { GET_CART } from 'utils/const/GQL_QUERIES';
+import { CHECKOUT_MUTATION } from 'utils/const/GQL_MUTATIONS';
 import { INITIAL_STATE } from 'utils/const/INITIAL_STATE';
+
 import { AppContext } from 'utils/context/AppContext';
 
 import { getFormattedCart } from 'utils/functions/functions';
@@ -13,6 +15,24 @@ const CheckoutForm = () => {
   const [orderData, setOrderData] = useState(null);
   const [requestError, setRequestError] = useState(null);
 
+  // Checkout GraphQL mutation
+  const [
+    checkout,
+    { data: checkoutResponse, loading: checkoutLoading, error: checkoutError },
+  ] = useMutation(CHECKOUT_MUTATION, {
+    variables: {
+      input: orderData,
+    },
+    onCompleted: () => {
+      refetch();
+    },
+    onError: (error) => {
+      if (error) {
+        setRequestError(error);
+      }
+    },
+  });
+
   // Get Cart Data.
   const { loading, error, data, refetch } = useQuery(GET_CART, {
     notifyOnNetworkStatusChange: true,
@@ -46,8 +66,8 @@ const CheckoutForm = () => {
 
   useEffect(() => {
     if (null !== orderData) {
-      // Do checkout mutation when the value for orderData changes.
-      // checkout();
+      // Perform checkout mutation when the value for orderData changes.
+      checkout();
     }
   }, [orderData]);
 

utils/const/GQL_MUTATIONS.js

@@ -60,3 +60,23 @@ export const ADD_TO_CART = gql`
     }
   }
 `;
+
+export const CHECKOUT_MUTATION = gql`
+mutation CHECKOUT_MUTATION( $input: CheckoutInput! ) {
+  checkout(input: $input) {
+    clientMutationId
+    order {
+      id
+      orderId
+      refunds {
+        nodes {
+          amount
+        }
+      }
+      status
+    }
+    result
+    redirect
+  }
+}
+`;