Order query returns null in Customer Account UI Extension

Extensions
1

Hi everyone,

I’m working on a Customer Account UI Extension and trying to query order data using the Customer Account API. However, when I run the query, it returns null for the order field.

Here’s my current query and code:

const order = useOrder();
const dataQuery = {
  query: `query {
    order(id: "${order.id}") {
      createdAt
      id
    }
  }`
};

useEffect(() => {
  async function getData() {
    const query = await fetch("shopify://customer-account/api/unstable/graphql.json", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(dataQuery),
    });

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

  getData();
});

Result from console:

{
  "data": {
    "order": null
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 1,
      "actualQueryCost": 1,
      "throttleStatus": {
        "maximumAvailable": 7500.0,
        "currentlyAvailable": 7499,
        "restoreRate": 100.0
      }
    }
  }
}

To verify that the API works correctly in general, I successfully queried customer data:

query: `query {
  customer {
    id
    creationDate
  }
}`

Result:

{
  "data": {
    "customer": {
      "id": "gid://shopify/Customer/6846038638883",
      "creationDate": "2023-03-17T21:25:43Z"
    }
  },
  ...
}

Scopes in .toml file:

[access_scopes]
scopes = "customer_read_orders, customer_read_customers"

Extension target in shopify.extension.toml file:

[[extensions.targeting]]
module = "./src/OrderStatusBlock.tsx"
target = "customer-account.order-status.block.render"

Am i missing something or why order query returns nothing?

Thanks!

2

Try passing userErrors and you may be able to see what the problem is then.

3

Tried that:

`query {
  order(id: "${order.id}"){
    id
    createdAt
  }
  userErrors {
    field
    message
  }
}`

"Field 'userErrors' doesn't exist on type 'QueryRoot'"

And i’m seeing that there is not userErrors fields on customer api order query

Thanks anyway.

4

From what I can see, useOrder is only available on the Order Status Page, is that where you’re using it?

Have you confirmed the following returns something by logging it?

const order = useOrder();

You also aren’t passing any dependencies so theres a chance order is null when you’re trying to use it in the fetch, I would suggest passing order in your dependencies for the useEffect.

5

Have you confirmed the following returns something by logging it?

It returns this as it should:

{
    "id": "gid://shopify/Order/5272497684771",
    "name": "#1002",
    "processedAt": "2023-03-21T13:17:12Z",
    "confirmationNumber": "AFKFAFK2"
}

You also aren’t passing any dependencies so theres a chance order is null when you’re trying to use it in the fetch, I would suggest passing order in your dependencies for the useEffect .

I can confirm that id is placed properly to the fetch. I can inspect the query on dev console.

6

Okay. It started working after i created new test order. The order i tested extension was made 2023. So i don’t know if that’s the reason.

7

Do you have the read_all_orders scope? Otherwise you only have access to the last 60 days of orders.