For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
Hi,
I try to send a graphql request from my pos ui application :
const token = await api.session.getSessionToken(); const query = "{ query { shop { name } } }"; const url = `https://${shop}.myshopfy.com/api/2023-10/graphql.json`; await fetch(url, { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${token}`, "Accept": "application/json" }, body: JSON.stringify(query), }) .then(function(response) { screen.appendChild(root.createComponent(Text, {}, `response : ${response.status}`)); return response.json(); } ) .then(function (json) { screen.appendChild(root.createComponent(Text, {}, `json : ${json}`)); return json; }) .catch(function (error) { screen.appendChild(root.createComponent(Text, {}, `fetch : ${error}`)); });
Did I miss something ?
Hi Solpay
It looks like you have a typo in the const url: myshopfy.com instead of myshopify.
Try with this and see if the error resolves.
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
Hi,
You're right !
I have now a 403 response :
{"code" : "ACCESS_DENIED"}
I have this in my shopify.app.toml file :
scopes = "read_all_orders,read_products,read_customers,read_locales,read_locations"
I tried
'X-Shopify-Access-Token': `${token}`
instead of
"Authorization": `Bearer ${token}
I have no more a 403 error but response is empty.
I tried then to add this :
'Accept': '*/*',
'Access-Control-Allow-Origin': '*'
But I still have an empty response
Little help would be greatly appreciated.
Thanks
Hi again,
A few things about the original code snippet:
1. The word query
doesn't need to be inside the braces. It should be just the query structure. So, it should be:
const query = `{ shop { name } }`;
2. When making a GraphQL request, the body should be an object with a query
property. So, you should modify the body
property to:
body: JSON.stringify({ query }),
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
Hi Liam,
I obtain the same result.
I tried too this :
fetch('https://reqbin.com/echo/get/json', {
method: 'GET',
headers: {
'Accept': 'application/json',
},
})
.then(response => {
screen.appendChild(root.createComponent(Text, {}, `fetch test : ${JSON.stringify(response)}`));
return response.json();
})
.then(response => screen.appendChild(root.createComponent(Text, {}, `fetch test : ${JSON.stringify(response)}`)));
But I have the same empty response. Is it possible to make a request in a pos ui application?
I enabled the "Allow network access in checkout UI extensions" option but nothing changes.
this is my browser's network tab
Hi,
Do you have an example of sending a graphql request in a typescript pos ui app ?
I have now this error :
Access to fetch at 'https://xxxx.myshopify.com/admin/api/2023-10/graphql.json' from origin 'https://cdn.shopify.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I don't understand why it's so complicated to perform a graphql request.
Little help would be greatly appreciated.
Thanks
Hi, Do you able to solve this?