Provide `data` and `error` to Layout function #8846

aaronadamsCA · 2024-02-22T00:00:06Z

aaronadamsCA
Feb 22, 2024

I'd like to suggest providing the new Layout function with (supported) access to data and error.

This would let us do the same kinds of things in Layout that we can already do today in meta and with our own custom Document components, such as:

export function Layout({ data, error, children }: LayoutProps): ReactNode {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
          {data != null
            ? data.title
            : isRouteErrorResponse(error)
              ? error.statusText
              : "Error"}
        </title>
        <Meta />
        <Links />
        <link
          rel="stylesheet"
          href={data != null ? data.stylesheet : defaultStylesheet}
        />
        <style
          dangerouslySetInnerHTML={{
            __html: `
              :root {
                --custom-property: ${data != null
                  ? data.customProperty
                  : defaultCustomProperty};
              }
            `,
          }}
        />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

This shows a props-based API, but of course it could also be hook-based.

I think it's important because:

Layout is probably the best place for global tags now, for all the reasons already described in the docs.
Global tags are often data-driven.
Some tags, like <style> tags, can't be inserted using the meta API anyway.

For now the workaround is to not use Layout, I think. (Or you could try calling useLoaderData() and/or useRouteError() in your Layout component, but I bet that's going to break some things!)

sergiodxa · 2024-02-22T00:06:17Z

sergiodxa
Feb 22, 2024
Maintainer

You can get the root data with useRouteLoaderData<typeof loader>("root") right now, the return type will be SerializedFrom<typeof loader> | undefined (it will be undefined in case of error.

I'm not sure if you can also call useRouteError too.

4 replies

aaronadamsCA Feb 22, 2024
Author

Ah, useRouteLoaderData is a great idea for now, thanks for that!

It looks like you can call useRouteError in Layout, you get a console warning but it does work, and it's technically already type-safe since it returns unknown. I'm unsure if there are further impacts or risks.

If not, maybe removing that warning and adding some docs and tests is all there is to this, unless there's something I'm missing.

brophdawg11 Mar 1, 2024
Maintainer

What console warning are you referring to?

Right now, I think this is a fine pattern but I wouldn't be opposed to this idea of props if it turns out that the vast majority of folks are doing data/error forking in their Layout's:

export function Layout({ children }: { children: React.ReactNode }) {
  let data = useRouteLoaderData("root");
  let error = useRouteError();
  ...
}

aaronadamsCA Mar 1, 2024
Author

What console warning are you referring to?

@brophdawg11 I can't reproduce it, so who knows! 🤷

brophdawg11 Mar 4, 2024
Maintainer

For now, we added a note to the docs on this in #8958

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Provide `data` and `error` to Layout function #8846

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Provide data and error to Layout function #8846

aaronadamsCA Feb 22, 2024

Replies: 1 comment · 4 replies

sergiodxa Feb 22, 2024 Maintainer

aaronadamsCA Feb 22, 2024 Author

brophdawg11 Mar 1, 2024 Maintainer

aaronadamsCA Mar 1, 2024 Author

brophdawg11 Mar 4, 2024 Maintainer

Provide `data` and `error` to Layout function #8846

aaronadamsCA
Feb 22, 2024

Replies: 1 comment 4 replies

sergiodxa
Feb 22, 2024
Maintainer

aaronadamsCA Feb 22, 2024
Author

brophdawg11 Mar 1, 2024
Maintainer

aaronadamsCA Mar 1, 2024
Author

brophdawg11 Mar 4, 2024
Maintainer