After deploying, the fetch request from the POS UI Extensions to admin is not completed successfully

Extensions
1

I am currently developing a function that sends a fetch request with the OrderId from the Order Details Modal of POS UI Extensions to Admin, which calls the API to get detailed information about a specific order, then saves that data to a cloud database, returns part of that data, and displays it in the POS Order Details Modal.

Fetching was working fine locally, but after deployment, fetching stopped working.

Looking at the log, the fetch request is sent to the backend without any problems, and it is also saved to the database successfully.
The log says 200.

Therefore, I think that maybe the return is wrong, or the response is not being received properly on the pos side.

The POS UI side gets an error saying Load failed.

In the local environment, it was returning with Response.json, but when deployed, I got an error saying Response.json is not a function, so I set v3_singleFetch: true in remix.config.js and use data().

Can someone tell me why the fetch is not completed successfully?

<OrderModal.jsx>

import React, { useState, useEffect } from "react";
import {
  Text,
  Screen,
  ScrollView,
  useApi,
  reactExtension,
  Banner,
  Box,
  Stack,
  SectionHeader,
  Image,
} from "@shopify/ui-extensions-react/point-of-sale";

const Modal = () => {
  const api = useApi();
  const [authenticated, setAuthenticated] = useState();
  const [error, setError] = useState();
  const [apiResponse, setApiResponse] = useState();
  const orderId = api.order.id;

  useEffect(() => {
    const fetchOrder = async()=>{
      try{
        setTest("getSessionToken...");
        const token = await api.session.getSessionToken();

        setTest("about to fetch");
        const res = await fetch(
          `https://XXXXXXXXXXXXXXXXXXXXXXXXXXXX.com/api/getorder?orderId=${orderId}`,
          {
            method: "GET",
            mode: "cors",
            credentials: "include",
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${token}`,
            },
          }
        );
        if (!res.ok) {
          throw new Error(`HTTP error! status: ${res.status}`);
        }
        const data = await res.json();
        setApiResponse(data);
        setAuthenticated(true);
      } catch (err) {
        setError(err.toString());
      }
    };

    if(orderId) {
      fetchOrder();
    }
  }, [orderId, api.session])

  return (
    <Screen name="API Test Results" title="API Call Test">
      <ScrollView>
        <Box padding="100">
          <Banner
            title={authenticated ? "API Request Successful" : "Processing..."}
            variant={authenticated ? "confirmation" : "info"}
            visible
          />
        </Box>
        {error && (
          <Box padding="100">
            <Banner title={error} variant="confirmation" visible />
          </Box>
        )}
        {apiResponse && (
          <>
            <Box padding="300">
              <Stack direction="inline">
                <Box>
                  <Image src="https://example.icon.png" />
                </Box>
              </Stack>
            </Box>
            <Box paddingBlockEnd="500" paddingInline="500">
              <Box>
                <SectionHeader title="Code" />
                <Text variant="display">{apiResponse.accessCode}</Text>
              </Box>
              <SectionHeader title="API Response Data" />
              <Stack direction="block" gap="200" paddingBlockStart="200">
                <Text variant="headingSmall">
                  Total Price:
                  {apiResponse.orderDetails.totalPrice || "N/A"}
                </Text>
                <Text variant="headingSmall">Order ID: {api.order.id}</Text>
              </Stack>
            </Box>
          </>
        )}
      </ScrollView>
    </Screen>
  );
};

export default reactExtension("pos.order-details.action.render", () => (
  <Modal />
));

<api.getorder.jsx>

import { authenticate } from "../shopify.server";
import prisma from "../db.server";
import { v4 as uuidv4 } from "uuid";
import { generateUniqueAccessCode } from "../utils/accessCode";
import { data } from "@remix-run/node";

export const loader = async ({ request }) => {
  const { admin } = await authenticate.admin(request);
  const url = new URL(request.url);
  const orderId = url.searchParams.get("orderId");

  let orderRecord = await prisma.orders.findUnique({
    where: { orderId },
  });

  if (!orderRecord) {
    const orderGid = `gid://shopify/Order/${orderId}`;
    const query = `
  query OrderDetail($orderId: ID!) {
    order(id: $orderId) {
      createdAt
      fulfillments { location { id } }
      lineItems(first: 50) {
        edges {
          node {
            quantity
            title
            variant { price }
            taxLines { price }
          }
        }
      }
      totalPrice
      totalTax
      totalDiscounts
    }
  }
`;
    const response = await admin.graphql(query, {
      variables: { orderId: orderGid },
    });
    const responseJson = await response.json();
    const order = responseJson.data.order;

    const accessCode = await generateUniqueAccessCode();

    orderRecord = await prisma.orders.create({
      data: {
        id: uuidv4(),
        orderId,
        rawPayload: JSON.stringify(order),
        status: "new",
        accessCode: accessCode,
      },
    });
  }
  const Result = JSON.parse(orderRecord.rawPayload);

  return data({
    orderDetails: Result,
    accessCode: orderRecord.accessCode,
  });
};

＜Log＞

OPTIONS /api/getorder?orderId=10036768375078 204 - - 2.504 ms
[shopify-app/INFO] Authenticating admin request | {shop: null}
ZMYOKF
GET /api/getorder?orderId=10036768375078 200 - - 9.997 ms

If you want more information, please let me know.

2

even “return null” didn’t work…

3

I solved this by adding header in return.