Send a graphql request from a POS UI app

[Ben06]

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 ?

[Liam]

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.

[Ben06]

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]

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]

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!

[Ben06]

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]

this is my browser’s network tab

[Ben06]

Hi,

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

[Ben06]

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

[afiqcoreka]

Hi, Do you able to solve this?