ShopifyQL API call response returns HTML instead of JSON

[nmywrld]

I am developing a new app in NodeJS and trying to make a API call to retrieve ShopifyQL data. The response i get is 200, but it returns a HTML object rather than the expected JSON format.

Here are the relevant code:

1. index.js:

import fetchAnalytics from [file location]

app.get("/admin/api/2023-01/graphql", async (_req, res) => {

const data = await fetchAnalytics(res.locals.shopify.session);

res.status(200).send(data)

2. fetchAnalytics.js (placed in the same location as the default product-creator function)

import shopify from "./shopify.js";

const analytics_query = `[valid query]`

export default async function fetchAnalytics (session) {

const client = new shopify.api.clients.Graphql({ session });

res = await client.query({

data: {

query: analytics_query,

},

});

return res

}

3. [page name].jsx

const handleAnalytics = async () => {

setIsLoading(true);

const response = await fetch("/admin/api/2023-01/graphql");

setIsLoading(false);

console.log(await response.json())

return (

<Page>

<TitleBar

title="Test Page"

primaryAction={{

content: "Primary action",

onAction: handleAnalytics,

loading: isLoading,

}}

secondaryActions={[

{

content: "Secondary action",

onAction: () => console.log("Secondary action"),

},

]}

/>

</Page>

);

}

Not sure why HTML format is always returned! Thanks in advance for any help that can be given.

[ShopifyDevSup]

Hey @nmywrld - this does seem very odd. Would you be able to share an X-Request-ID value from any of the Shopify response headers you received that were formatted in HTML? I'm unable to replicate the behaviour on my end, so our next step is to take a look to see if we can track down your call in our logs and investigate further from there. 

Hope to hear from you soon! 

[nmywrld]

Hello, thanks for the reply, here is the response recieved.

I understand that you need the x-request-id but this is all i have.

I have made sure that i have requested for the following access: "read_reports, read_customers, read_fulfillments, read_inventory, read_orders, read_products, read_all_orders"

and i have also attempted to request for access to protected customer data.

am i missing any other pre-requisites?

[ShopifyDevSup]

The `shopifyqlQuery` query needs to be a POST request to the Admin API endpoint, which takes the form `https://{store_name}.myshopify.com/admin/api/2023-01/graphql.json` whereas your post appears to be a GET request to an ngrok tunnel. 

The following is an example CURL request for a ShopifyQL query:

curl -L -X POST 'https://YOUR_STORE_NAME.myshopify.com/admin/api/2023-01/graphql.json' \
-H 'X-Shopify-Access-Token: YOUR_ADMIN_ACCESS_TOKEN' \
-H 'Content-Type: application/json' \
--data-raw '{"query":"query ($q: String!) {\n  shopifyqlQuery(query: $q) {\n    __typename\n    ... on TableResponse {\n      tableData {\n        unformattedData\n        rowData\n        columns {\n          name\n          dataType\n          displayName\n        }\n      }\n    }\n  }\n}\n","variables":{"q":YOUR_SHOPIFYQL_QUERY_HERE}}'

Below is the same implemented in NodeJS:

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: `query {
    shopifyqlQuery(query: YOUR_SHOPIFYQL_QUERY_HERE) {
      __typename
      ... on TableResponse {
        tableData {
          unformattedData
          rowData
          columns {
            name
            dataType
            displayName
          }
        }
      }
    }
  }
  `,
});

Hope that helps!