Send a graphql request from a POS UI app

Ben06
Shopify Partner
14 0 3

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 ?

Replies 9 (9)

Liam
Shopify Staff
2731 302 783

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

Ben06
Shopify Partner
14 0 3

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"

 

Ben06
Shopify Partner
14 0 3

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

Liam
Shopify Staff
2731 302 783

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 }),
You can also check the browser's network tab for any error messages or status codes that could indicate what's going wrong.
Hope this helps!

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

Ben06
Shopify Partner
14 0 3

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.

Ben06
Shopify Partner
14 0 3

shopify.png

this is my browser's network tab

Ben06
Shopify Partner
14 0 3

Hi,

 

Do you have an example of sending a graphql request in a typescript pos ui app ? 

Ben06
Shopify Partner
14 0 3

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.
shopify request.png

I don't understand why it's so complicated to perform a graphql request. 

Little help would be greatly appreciated.

Thanks

afiqcoreka
Shopify Partner
2 0 0

Hi, Do you able to solve this?