How to return data from App proxy endpoint to Theme extension liquid

[danielbezerra]

Hey guys, so i just created an App proxy endpoint in my remix template App and im able to receive data, but im not understandting how to return data. I get status code 302 on the response, and nothing is returned. Also its followed by a 404 login call, that im not sure what it is.

I have my proxy enpoind defined in app.tsx

<Link to="/app/backend2">Backend endpoint</Link>

and the service is this

export const action: ActionFunction = async ({ request }) => {

console.log("-----hit app proxy---------------");

const { session } = await authenticate.public.appProxy(request);

if (session) {

console.log("response", session);

}

return json({ message: "success" });

};

const Proxy = () => {

return <Page>Proxy</Page>;

};

export default Proxy;

any ideas what im doing wrong

[danielbezerra]

ok, how?..

[danielbezerra · Accepted solution]

nevermind my bad, i just had to erase the part where it returns a html component 

const Proxy = () => {

return <Page>Proxy</Page>;

};

export default Proxy;

and just left the action function in the file, and now its returning the response

[ZephyrSoft]

It's already solved but I'll leave the comment to complement the solution.

When using the Shopify proxy it is not necessary to export a view in Polaris because it is not rendered in the admin panel but in the client.

Therefore you must remove the following:

const Proxy = () => {
  return <Page>Proxy</Page>;
};

export default Proxy;

And there is no need to declare the route in app.tsx either. You should remove it as well.

<Link to="/app/backend2">Backend endpoint</Link>

The only methods that work are GET (loader) and POST (action).

Remember that you can combine a query to your backend and liquid.

Liquid will be rendered in your theme's {{ content_for_layout }}, so you will be able to see the theme's header and footer.

import shopify from "../shopify.server";

export async function loader({ request }) {
  const { admin, liquid } = await shopify.authenticate.public.appProxy(request);

  const response = await admin.graphql(
    `#graphql
    query productTitle {
      products(first: 1) {
        nodes {
          title
        }
      }
    }`,
  );
  const body = await response.json();
  const title = body.data.products.nodes[0].title;

  return liquid(
    `<section style="background: teal; color: white; padding: 5rem; text-align: center;">
      {% if customer %}
        <p>Customer: {{ customer.first_name }}</p>
        <p>Favorite products: ${title}</p>
      {% else %}
        <p>Please sign in</p>
      {% endif %}
    </section>
    `,
  );
}


export async function action({ request }) {
  const { admin } = await shopify.authenticate.public.appProxy(request);
  // Your POST code...
  return null;
}

Puede consultar la documentación completa en:

https://shopify.dev/docs/api/shopify-app-remix/v3/authenticate/public/app-proxy

Result: