GraphQL request error in Admin Extensions

[JosipCodes]

I’m trying to follow the ‘Getting started with…’ tutorials for Admin Action and Admin Block extensions; and cannot get the GraphQL requests to work - each one of them returns error 400 Bad Request with the response:

{"errors":{"query":"Required parameter missing or invalid"}}

To give you a simple example; see the code snippet here https://shopify.dev/docs/apps/admin/admin-actions-and-blocks/build-an-admin-block#step-4-create-backend-data-and-integrate-with-the-pages-contextual-save-bar

The query is simple and valid, trying to get certain metafields from Products:

export async function getIssues(productId) {
  // This example uses metafields to store the data. For more information, refer to https://shopify.dev/docs/apps/custom-data/metafields.
  return await makeGraphQLQuery(
    `query Product($id: ID!) {
      product(id: $id) {
        metafield(namespace: "$app:issues", key:"issues") {
          value
        }
      }
    }
  `,
    { id: productId }
  );
}

And the GraphQL call method aligns what I’ve found in other docs:

async function makeGraphQLQuery(query, variables) {
  const graphQLQuery = {
    query,
    variables,
  };
  const res = await fetch("shopify:admin/api/graphql.json", {
    method: "POST",
    body: JSON.stringify(graphQLQuery),
  });
  if (!res.ok) {
    console.error("Network error");
  }
  return await res.json();
}

What I’ve also tried:

• adding the headers (“Content-Type: application/json”), even though it correctly sends them
• adding credentials: “include”
• simpler queries that don’t even include param (e.g. give me top 5 products)
• fetch the 3rd party API and it actually works

[JosipCodes]

I’d like to post an update - I’ve managed to make graphql API call work by using the query string params, instead of body. Here’s an example:

async function makeGraphQLQuery(query, variables) {
    const graphQLQuery = {
      query: query.replace(/\n/g, ""), 
      variables: Object.keys(variables).map(key => {
        return `variables[${key}]=${encodeURIComponent(variables[key])}`
      }).join('&'),
    };
  
    const res = await fetch(`shopify:admin/api/graphql.json?query=${graphQLQuery.query}&${graphQLQuery.variables}`, {
      method: "POST",
    });
  
    if (!res.ok) {
      console.error("Network error");
    }
  
    return await res.json();
  }

This leads me to believe that fetch() strips the body from the request – why is that? Is this a known issue? I’ve been searching the forums for a solution, and here someone had a similar problem that was solved by disabling the request body parsing. Is this possible from an Admin extension?

[lizk]

Hi there

I tested the code provided in the tutorial and I wasn’t able to reproduce the same issue. Could you verify for me that the issue is still happening?

[JosipCodes]

Hi @lizk ,

thanks for taking time – yes, it still happens. I’ve tried again from scratch to replicate it, here are my steps:

• I wanted to run an admin action, so I followed a tutorial here (which requires me to create an app as shown here)
  • I’ve named my app, selected an existing Shopify App, and selected one of my stores to preview it on
  • I’ve installed the app on the store too
• I’ve installed the Shopify CLI latest version
• I’ve create an extension using the npm run shopify app generate extension ... command
• Without even continuing further, I’ve ran npm run dev and previewed my admin action on a real product on my store. Since the template code already has a GraphQL query, I could verify that it doesn’t work; please check out my screenshots:

[lizk]

Hi there

I attempted using your steps, and I was not able to reproduce the issue, so this is a tricky one!

Could you please do the following to help narrow down what the issue may be:

1. Print out the actually error code that is being returned
2. Attempt to add the extension to a brand new shopify app
3. Attempt to add the extension and app to a brand new development store

[JosipCodes]

Hi @lizk ,

I’ve created a brand new Partners organization, generated a development store (with Developer Previews enabled), and used content generating.

I’ve also created a brand new app using Shopify CLI, selected Remix and installed it on the abovementioned store.

I’ve generated a new extension using this command:

npm run shopify app generate extension -- --template admin_action --name issue-tracker-action --flavor react

Which out of the box has a GraphQL call to show you what’s the current product when you open the admin action.

I’ve ran the npm run dev to get to the console, and clicked on the extension to preview it – I’m still facing the same error (see in screenshot that there’s no product name):

Here’s the network request: