Problem with order action menus - customer account ui

Extensions
1

Hi, I’m trying to add a custom action button to the new customer account page using the extension target: customer-account.order.action.menu-item.render.

I’m following the official Shopify documentation here:

I’m using the exact same code from the guide (JSX instead of TSX), but the GraphQL query validation doesn’t work — specifically, the data variable is coming back as null.

Code here:

import { useEffect, useState } from "react";
import {
  Button,
  reactExtension,
} from "@shopify/ui-extensions-react/customer-account";

export default reactExtension(
  "customer-account.order.action.menu-item.render",
  async (api) => {
    const { orderId } = api;
    let hasFulfillments = false;
    try {
      const orderQuery = {
        query: `query {
          order(id: "${orderId}") {
            fulfillments(first: 1) {
              nodes {
                latestShipmentStatus
              }
            }
          }
        }`,
      };
      const result = await fetch(
        "shopify://customer-account/api/2024-10/graphql.json",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(orderQuery),
        }
      );
      const { data } = await result.json();
      hasFulfillments = data.order.fulfillments.nodes.length !== 0;
      console.log("hasFulfillments", hasFulfillments);
    } catch (error) {
      console.log(error);
      hasFulfillments = false;
    }
    return <MenuActionExtension showAction={hasFulfillments} />;
  }
);

function MenuActionExtension({ showAction }) {
  if (!showAction) {
    return null;
  }

  return <Button>Custom button</Button>;
}

This is currently running on a development store. I suspect it might be a scope issue, but the orderId is being passed correctly. The issue seems to appear when trying to fetch fulfillments.

Here’s a screenshot of the app’s scopes:

Screenshot 2025-04-09 at 12.50.50
Screenshot 2025-04-09 at 12.50.50946×517 31.9 KB

Rendering the <Button /> component itself works fine. However, when I add the query to check the order’s fulfillment status and conditionally show the button, I get the following error, and <Button /> is not rendered:

TypeError: Cannot read properties of null (reading ‘fulfillments’)

2 
 const orderQuery = {
query:`query ($orderId: ID!) {
        order(id: $orderId) {
}}`,
variables:{
orderId
 }

Storefront API

3

Sorry for the topic. I found the missing scope. I had to add: customer_read_orders