Using Resource routes in embedded shopify remix app

App Bridge
1

In my embedded shopify remix app I have a resource route like you would have in a regular remix app, its an action that returns data. On another route I have a loader, from which I’m trying to fetch the data from the resource route. However this fails with a 410 error code. If I try querying the resource route using a useFetcher it works as expected. But I need the data in the loader. Any ideas on why this isnt working and what I might need to change?

I dont think this is an app-bridge issue, I just didnt know which topic to choose.

Thank you!

2

Can you provide the loader and action method in the script?

3

Hi @AMaL

// action at api.shopify.ts
export const action = async ({ request }: ActionFunctionArgs) => {
    const { admin } = await authenticate.admin(request);

    const body = await request.formData();
    const intent = body.get('intent');
    switch (intent) {
        case 'ACTION_CASE': {
            const type = body.get('type')?.toString() || "";
            const res = await admin.graphql(
                queryMetaobjectDefinitionByType,
                {
                    variables: {
                        type: type
                    }
                }
            );

            return (await res.json()).data;
        }
        default: {
            return json({
                process: 'NO_PROCESS_FOUND',
                success: false
            });
        }
    }
}

// at app.some-route.tsx
export const loader = async ({ request }: LoaderFunctionArgs) => {
    await authenticate.admin(request);
  
    const baseUrl = new URL(request.url).origin;
    const apiUrl = new URL("/api/shopify", baseUrl).toString();
  
    // I have also manually entered the route here
    const response = await fetch(apiUrl, {
      method: 'POST',
      headers: {
        // i have also used application/x-www-form-urlencoded
          "Content-Type": "application/json",
      },
      body: new URLSearchParams({
          intent: "ACTION_CASE",
          type: "banner",
      }),
    });
  
    if (!response.ok) {
      console.error('response', response);
    }
  
    const data = await response.json();
  
    return json(data);
};