Support single fetch (`v3_singleFetch`)

[aaronadamsCA]

This package doesn't work with single fetch yet.

It took some digging through closed issues and pull requests to figure that out! So I hope it's alright if I create an issue where we can subscribe for updates and share workarounds.

I ran into the same problem as #897. A resource route that uses redirect(…) stopped working with single fetch, it hung on a visible "handling response" message.

@silintzir suggested a workaround in #897 (comment) that seems to work, here's our version of it:

export const headers: HeadersFunction = (args) => {
  const mergedHeaders = new Headers();

  for (const headers of Object.values(args)) {
    for (const [key, value] of new Headers(headers).entries()) {
      mergedHeaders.set(key, value);
    }
  }

  return mergedHeaders;
};

[geongeorge]

I have the same issue issue when I tried to update remix some time back. This needs to be fixed

[lizkenyon]

Hi folks! 👋

The team is currently looking into how we can best support single fetch with the Shopify Remix library.

The problem is occurring because the Shopify Remix package in certain scenarios adds headers to thrown responses. App Bridge then takes specific actions on these request based on those added headers.

When v3_singleFetch is enabled, and you don't have an exported headers function to merge the headers on the route, then the headers is not being added to the request, meaning App Bridge does not take action on the request, and in that case redirect.

I have spoken to the Remix team, and our team is determining the best path forward that will allow us to enable this flag, while also causing the least disruption to developers using our libraries.

For the time being, if you want to use the future flag, adding a headers function to your routes to merge the headers should work. Though something to keep in mind is that there are several scenarios when the library adds headers to requests. One of those being to handle certain scenarios when no valid session token is found. To ensure this scenario is handled by the library with v3_singleFetch you would need to add an exported headers function to each of your routes that use authenticate.admin from the Shopify Remix library.

Sidenote:
You should be able to use the same headers function that is currently used in the app.tsx route currently, if you decided to go this route.

export const headers: HeadersFunction = (headersArgs) => {
  return boundary.headers(headersArgs);
};

Thank you for your patience on this!

[danyn]

Typescript raises errors relating to these future flags notable because single fetch deprecated the "json" helper function. Something needs to be at least acknowledged here.