V7. Headers is a pain

[ziimakc]

Let's say you have api backend and on frontend side use loaders for SEO and clientLoaders for performance to eliminate bff as middleman after first load.

Let's say you store tokens in cookies and need to refresh them even on SSR first load.

For each route where we use loader or action we are forced to add headers and return data to ensure that for example any cookie set header during request to api is forwarded or cleared on auth error, including SSR.

Maybe there is more elegant way to solve this?

function mergeReactRouterHeaders(args: HeadersArgs): Headers {
	const result = new Headers();

	for (const [key, value] of args.actionHeaders.entries()) {
		result.append(key, value);
	}
	for (const [key, value] of args.loaderHeaders.entries()) {
		result.append(key, value);
	}
	for (const [key, value] of args.parentHeaders.entries()) {
		result.append(key, value);
	}
	if (args.errorHeaders) {
		for (const [key, value] of args.errorHeaders.entries()) {
			result.append(key, value);
		}
	}

	return result;
}

export const headers = (args) => {
	return mergeReactRouterHeaders(args);
};

export const loader = async (args)=> {
	const headers = new Headers();

	const res = await fetch('smth', { headers });

	return data(res, { headers });
};