Caching app proxy Liquid response

Extensions
1

Hey folks,

Does anyone know how to define cache control for app proxy routes that return Liquid?

Base route:

export const loader = async ({ request }) => {
  const { liquid } = await authenticate.public.appProxy(request);

  return liquid(
    `{
      "shop": "{{ shop.name }}"
    }`,
    {
      layout: false,
    },
  );
};

Attempt 1: Passing the headers option in the liquid function

export const loader = async ({ request }) => {
  const { liquid } = await authenticate.public.appProxy(request);

  return liquid(
    `{
      "shop": "{{ shop.name }}"
    }`,
    {
      layout: false,
      headers: {
        'Cache-Control':
          'public, max-age=31536000, s-maxage=31536000, immutable',
      },
    },
  );
};

Attempt 2: Modifying the response headers

export const loader = async ({ request }) => {
  const { liquid } = await authenticate.public.appProxy(request);

  const response = await liquid(
    `{
      "shop": "{{ shop.name }}"
    }`,
    {
      layout: false,
    },
  );

  const headers = new Headers(response.headers);
  headers.set(
    'Cache-Control',
    'public, max-age=31536000, s-maxage=31536000, immutable',
  );

  return new Response(response.body, {
    headers,
  });
};

Neither of these pass the cache control through. The code is for the clarity of the example. The end goal is to reduce the amounts of calls to our servers when we know that the data isn’t changing often. As we’re growing, we see up to 200 requests a minute for a route that really ought to be cached by the browser and Cloudflare.

Any help is appreciated!

2

We ended up resolving by replacing the use of Liquid responses in the app proxy and using the admin GraphQL instead, which won’t go through the theme and respects the headers we set.

Not a true solution unfortunately.

3

@Edi_Bouazza Unfortunately, app proxy pages, while extremely powerful, seem to be low priority for support by shopify. We’ve been hoping for better support since the Remix template came out - foregoing the liquid response and losing the theme context (header / footer) creates a disjointed user experience.

While it doesn’t solve your specific issue, there is an interesting reply at the bottom of this thread about a workaround for limitations of app proxy. Perhaps if there are enough requests it will get prioritized by shopify.

1 Like