ShopifyQL API call response returns HTML instead of JSON

Retired Boards Appdev Graphql Basics And Troubleshooting
1

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 (

<TitleBar
title=“Test Page”
primaryAction={{
content: “Primary action”,
onAction: handleAnalytics,
loading: isLoading,
}}
secondaryActions={[
{
content: “Secondary action”,
onAction: () => console.log(“Secondary action”),
},
]}
/>

);
}

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

2

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!

3

Screenshot 2023-01-11 at 11.24.06 PM.png
Screenshot 2023-01-11 at 11.24.06 PM.png1214×772 109 KB

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.

Screenshot 2023-01-11 at 11.19.33 PM.png
Screenshot 2023-01-11 at 11.19.33 PM.png1338×1156 140 KB

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?

4

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!