How to Cancel Order using GraphQL in Shopify Remix App?

When building a Shopify app using the Remix framework, you may need to interact with Shopify’s Admin API for order management. One common requirement is to cancel an order programmatically.

Prerequisites: 

Before proceeding, ensure that the user has the necessary permissions and write access scope to cancel orders within the Shopify store.

How to Cancel Order using GraphQL in Shopify Remix App?

Create a page named order.jsx

We need to create code for canceling an order:

const { admin } = await authenticate.admin(request);

const response = await admin.graphql(
  `#graphql
  mutation OrderCancel($orderId: ID!, $notifyCustomer: Boolean, $refund: Boolean!, $restock: Boolean!, $reason: OrderCancelReason!, $staffNote: String) {
    orderCancel(orderId: $orderId, notifyCustomer: $notifyCustomer, refund: $refund, restock: $restock, reason: $reason, staffNote: $staffNote) {
      job {
        id
        done
      }
      jobResult {
        id
        done
      }
      orderCancelUserErrors {
        field
        message
        code
      }
    }
  }`,
  {
    variables: {
      "orderId": "gid://shopify/Order/148977776",
      "notifyCustomer": true,
      "refund": true,
      "restock": true,
      "reason": "CUSTOMER",
      "staffNote": "Wrong size. Customer reached out saying they already re-purchased the correct size."
    },
  },
);

const data = await response.json();

Using this code, you can cancel an order from your store using GraphQL.

Conclusion:

In conclusion, canceling orders from the GraphQL API can save your time and also helps you not to handle it from Shopify’s official order pages; you can handle it from your app, and you can use this code to cancel multiple orders at the same time.