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

Solved

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

Danyel1980
Shopify Partner
7 0 3

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 doesn`t work. I don`t 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

Accepted Solution (1)

lizk
Shopify Staff
246 58 74

This is an accepted solution.

Hi there 👋

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.

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Reply 1 (1)

lizk
Shopify Staff
246 58 74

This is an accepted solution.

Hi there 👋

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.

To learn more visit the Shopify Help Center or the Community Blog.