merge-meta.ts

import type { V2_HtmlMetaDescriptor, V2_MetaFunction } from "@remix-run/node";

export const mergeMeta = (
  overrideFn: V2_MetaFunction,
  appendFn?: V2_MetaFunction,
): V2_MetaFunction => {
  return arg => {
    // get meta from parent routes
    let mergedMeta = arg.matches.reduce((acc, match) => {
      return acc.concat(match.meta || []);
    }, [] as V2_HtmlMetaDescriptor[]);

    // replace any parent meta with the same name or property with the override
    let overrides = overrideFn(arg);
    for (let override of overrides) {
      let index = mergedMeta.findIndex(
        meta =>
          ("name" in meta &&
            "name" in override &&
            meta.name === override.name) ||
          ("property" in meta &&
            "property" in override &&
            meta.property === override.property) ||
          ("title" in meta && "title" in override),
      );
      if (index !== -1) {
        mergedMeta.splice(index, 1, override);
      }
    }

    // append any additional meta
    if (appendFn) {
      mergedMeta = mergedMeta.concat(appendFn(arg));
    }

    return mergedMeta;
  };
};

usage.ts

import { mergeMeta } from "./merge-meta";

export const meta = mergeMeta(
  // these will override the parent meta
  ({ data }) => {
    return [{ title: data.project.name }];
  },
  
  // these will be appended to the parent meta
  ({ matches }) => {
    return [{ name: "author", content: "Ryan Florence" }];
  },
);

// both functions get the same arguments as a normal meta function

@cairin since TS 5.5 mergeMeta cannot infer data correctly.

It appears that the issue is unique to my project. I upgraded TypeScript to version 5.5.2 in a newly installed Remix app without any problems. However, comparing both tsconfig files hasn't resolved the issue. @cairin mergeMeta function version works with latest Remix app and TS. 🤷‍♂️

@ryanflorence how about merge handle, does the same logic work too?

For those that may be having issues with mergeMeta not being typed with the supplied loader, it's quite possible you may need to update references to the old V2_MetaFunction in mergeMeta with just MetaFunction (this fixed the issue for me in a Remix V2 app).

@ryanflorence Wondering if you have thoughts on how to get this utility to work when upgrading to React Router V7? Using in the same way as before seems to type data as unknown.

Ok so I got around to updating my code and implementing this via react router v7.

Very easy and clean out of the box

import type { Route } from "./+types/posts.$id";
...

export const meta: Route.MetaFunction = ({ data }) => {
   // data is typed with the data from your loader for this route
}

export const meta: Route.MetaFunction = ({ data }) => {
   // data is typed with the data from your loader for this route
}

@AltanS That is the recommended approach for RR V7 if you're not worried about outputting meta from parent routes. That alone won't handle merging meta from parent routes though, which this gist handled for Remix. I raised a discussion in React Router repo a while back for those that are interested in replacements for the Remix-specific mergeMeta util but in RR V7 apps 👍

For posterities: to make TS to work with loaded data in <2 remix versions, I had to change the signature as follows:

export const mergeMeta = <
  Loader = unknown,
  ParentsLoaders extends Record<string, unknown> = Record<string, unknown>,
>(
  overrideFn: MetaFunction<Loader, ParentsLoaders>,
  appendFn?: MetaFunction<Loader, ParentsLoaders>,
): MetaFunction<Loader, ParentsLoaders> => {
  return (arg) => {
  …