i want to use two models on order index page using customer account ui menuActionExtension.

Shopify Apps

Topic summary

A developer is attempting to use two models on the order index page via Shopify’s customer account UI menuActionExtension and asks if this is possible.

Code Context:

  • Uses customer-account.order.action.menu-item.render extension point
  • Fetches order fulfillment data via GraphQL query
  • Checks latestShipmentStatus to determine if order is fulfilled
  • Conditionally renders “Contact Us” or “Cancel” buttons based on fulfillment status

Technical Issue:

  • The provided code appears corrupted/reversed in sections (garbled text like }nottuB/<lecnaC>nottuB<)
  • Makes it difficult to assess the exact implementation or identify specific problems

Status:

  • No responses yet
  • Question remains unanswered regarding feasibility of using multiple models with this extension type
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

i want to use two models on order index page using customer account ui menuActionExtension. is it possible?
my code:
import { useEffect, useState } from “react”;
import { Button, reactExtension, useApi } from “@shopify/ui-extensions-react/customer-account”;

// Main entry point for the extension
export default reactExtension(
“customer-account.order.action.menu-item.render”,
() =>
);

function MenuActionExtension() {
const api = useApi(“customer-account.order.action.menu-item.render”);
const { orderId } = api;
console.log(orderId); // Verify that orderId is available
const [isFulfilled, setIsFulfilled] = useState(false);
const [loading, setLoading] = useState(true);

useEffect(() => {
const fetchOrderFulfillment = async () => {
let latestShipmentStatus = null;

try {
const orderQuery = {
query: query { order(id: "${orderId}") { fulfillments(first: 10) { nodes { id, latestShipmentStatus } } } },
};

const result = await fetch(
“shopify://customer-account/api/unstable/graphql.json”,
{
method: “POST”,
headers: {
“Content-Type”: “application/json”,
},
body: JSON.stringify(orderQuery),
}
);

const { data } = await result.json();
console.log(data);

if (!data?.order) {
// Handle case when order is null or doesn’t exist
console.log(“Order data is null or invalid.”);
setIsFulfilled(false);
} else if (data.order.fulfillments.nodes.length === 0) {
// No fulfillments found
setIsFulfilled(false);
} else {
// Check fulfillment status
latestShipmentStatus = data.order.fulfillments.nodes[0].latestShipmentStatus;
setIsFulfilled(latestShipmentStatus === ‘fulfilled’);
}
} catch (error) {
console.log(“Error fetching order data:”, error);
setIsFulfilled(null); // Error state
} finally {
setLoading(false); // Stop loading regardless of success or error
}
};

fetchOrderFulfillment();
}, [orderId]);

return (
<>
{isFulfilled ? (
Contact Us
) : (
Cancel
)}
</>
);
}