ShopifyQL API call response returns HTML instead of JSON

nmywrld
Shopify Partner
4 0 2

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.

 

Replies 3 (3)

ShopifyDevSup
Shopify Staff
1408 231 484

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! 

Developer Support @ Shopify
- Was this reply helpful? Click Like to let us 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

nmywrld
Shopify Partner
4 0 2

Screenshot 2023-01-11 at 11.24.06 PM.png

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

 

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
Shopify Staff
1408 231 484

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!

Developer Support @ Shopify
- Was this reply helpful? Click Like to let us 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