How I can make a graphql mutation request inside Checkout UI Extension?

Topic summary

A developer is struggling to implement GraphQL mutations within a Shopify Checkout UI Extension using React. They’ve shared code attempting to create a draft order mutation but report it’s not working.

Key Technical Constraint:

  • Checkout UI Extensions can only make queries (read operations) to the Shopify Storefront API
  • Direct GraphQL mutations to the Shopify Admin API are not currently supported from Checkout UI Extensions

Recommended Workaround:

  • Make network requests to external services (such as your own app server)
  • The external service can then execute the mutation on behalf of the extension

The discussion remains open regarding implementation details for the workaround approach.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.

Hello all,

in the documentation I see a lot of examples for graphql mutations but never a complete example with Shopify UI Extension React JS based.
Here is my example but It doesnt work. I dont know why:

function createDraftOrder() {
  query(
      `mutation ($input: DraftOrderInput!) {
          draftOrderCreate(input: $input) {
              draftOrder {
                  id
              }
          }
      }`,
      {
        "input": {
          "lineItems": [{
            "appliedDiscount": {
              "amount": "5.00",
              "description": "test modify lineitem price",
              "title": "modify lineitem price",
              "value": 5.00,
              "valueType": "FIXED_AMOUNT"
            },
            "variantId": "gid://shopify/ProductVariant/39803484209270",
            "quantity": 1
          }
          ],
          "purchasingEntity":{
            "customerId": "gid://shopify/Customer/5790884724854"
          }
        }
      },
  )
      .then(({data}) => {
      })
      .catch((error) => console.error(error));
}

Thanks

1 Like

Hi there :waving_hand:

From a Checkout UI extension you can make calls to to the Shopify Storefront API. These will be Queries only to retrieve information.

From a Checkout UI extension it is also possible to make network requests to external services such as your apps server.

At this time it is not currently possible to directly make GraphQL mutations to the Shopify Admin API from Checkout UI extensions.

2 Likes