<typeof loader> inference for MetaFunction data prop of param?

[smowli]

Hello everyone 👋

Is there built-in way to in infer serialized return type of loader for MetaFunion’s data prop in param? I know that there were many discussions & improvements related to loader type inference. Auto inference for useLoaderData<typeof loader> was added. But I can’t find anything related to MetaFunction.

Also the types to make inference work for useLoaderData like SerializeType are part of remix-react and not the core/node part of Remix and I was wondering if there is reason behind this decision. Because to me, it seems that the serialized type is related to network/core behavior and has nothing to do with react 🤔

[kiliman]

Yeah, there is no MetaArgs type like LoaderArgs, etc.

However, you can use the utility type UseDataFunctionReturn to get the correct type. It's not exported by default, so you'll need a deep import.

import { type UseDataFunctionReturn } from "@remix-run/react/dist/components";

export const meta = ({
  data,
}: {
  data: UseDataFunctionReturn<typeof loader>;
}) => {
  return {
    title: data.greeting,
  };
};

As for why it's in the react package, it's most likely because it was needed primarily for the useLoaderData hook, which is implemented there. Accessing the serialized data is done at the component level.

[smowli]

Well, that is unfortunate. Thank you for the reply 👍🏻

[kiliman]

My understanding is that this will actually be included in the next release. It even supports typing parentsData.

[ofekdeitch]

Sharing another suggestion, since @kiliman 's suggestion did not work for me.

First, declare the following type:

import type { SerializeFrom } from "@remix-run/node";

export type MetaFunctionArgs<T> = { data: SerializeFrom<T> };

And then in the route file, use it like this:

export const meta = ({ data }: MetaFunctionArgs<typeof loader>) => {
  const { contact } = data;

  return [{
    title: `${contact.first} ${contact.last}`,
  }]
}

[alecananian]

This will allow you to access other meta function args without redefining all the types:

import { ServerRuntimeMetaArgs } from "@remix-run/server-runtime";

export const meta = ({ data, location }: ServerRuntimeMetaArgs<typeof loader>) => {
  ...
};

[AlexanderMusienko]

For someone who are there in 2025 trying to find the good built-in approach for this question

This way saves your argument types and passes loader type in ({data}) argument properly:

import { MetaFunction } from "@remix-run/node";

export const meta: MetaFunction<typeof loader> = ({data, params}) => {
     ...
}