Does relay-nextjs support NextJS per-page layout?

[sahidrahman404]

Hey. I'm facing an issue where I'm unable to create a layout for each domain in my app using relay-nextjs. Unfortunately, the layout is being ignored. Here's a snippet of my code

function SigninPage({ preloadedQuery }: RelayProps<{}, viewer_viewerQuery>) {
  const query = usePreloadedQuery(ViewerQuery, preloadedQuery)
  console.log(query.viewer?.id)
  return (
    <SigninFrom />
  )
}

function Loading() {
  return <div>Loading...</div>;
}

SigninPage.getLayout = function getLayout(page: ReactNode) {
  return <AuthLayout>{page}</AuthLayout>;
};

export default withRelay(SigninPage, ViewerQuery, {
  fallback: <Loading />,
  createClientEnvironment: () => getClientEnvironment()!,
  serverSideProps: async (ctx) => {
    const token = ctx.req?.cookies['auth'] ?? null
    return { token };
  },
  createServerEnvironment: async (
    ctx,
    { token }: { token: string | null }
  ) => {
    const { createServerEnvironment } = await import('@/lib/server/relay_server_environment');
    return createServerEnvironment(token);
  },
});

[rrdelaney]

@sahidrahman404 This library does not support the app router at all, only the pages router. The app router does not support server rendering components using Relay hooks which is a fundamental requirement for Revere.

[sahidrahman404]

I use the page router in the above example

[sahidrahman404]

Per-page layouts with the getLayout function also doesn't work in relay-nextjs's example

// src/pages/_app.tsx

import { getClientEnvironment } from 'lib/relay_client_environment';
import type { AppProps } from 'next/app';
import { RelayEnvironmentProvider } from 'react-relay/hooks';
import { useRelayNextjs } from 'relay-nextjs/app';
import 'tailwindcss/tailwind.css';

function ExampleApp({ Component, pageProps }: AppProps) {
  const { env, ...relayProps } = useRelayNextjs(pageProps, {
    createClientEnvironment: () => getClientEnvironment()!,
  });
  const getLayout = Component.getLayout || ((page) => page)
  return getLayout(
    <RelayEnvironmentProvider environment={env}>
      <Component {...pageProps} {...relayProps} />
    </RelayEnvironmentProvider>
  );
}

export default ExampleApp;

// src/pages/index.tsx

import { getClientEnvironment } from 'lib/relay_client_environment';
import type { pages_listFilmsQuery } from 'queries/__generated__/pages_listFilmsQuery.graphql';
import React, { ReactNode } from 'react';
import { graphql, usePreloadedQuery } from 'react-relay';
import type { RelayProps } from 'relay-nextjs';
import { withRelay } from 'relay-nextjs';
import Link from 'next/link';

const FilmListQuery = graphql`
  query pages_listFilmsQuery {
    allFilms {
      films {
        id
        title
        openingCrawl
      }
    }
  }
`;

function FilmList({ preloadedQuery }: RelayProps<{}, pages_listFilmsQuery>) {
  const query = usePreloadedQuery(FilmListQuery, preloadedQuery);
  if (query.allFilms == null || query.allFilms.films == null) return null;

  return (
    <div className="max-w-xl mx-auto p-8">
      <h1 className="text-center text-3xl font-semibold mb-5">All Films</h1>

      <div className="grid grid-cols-3 gap-3">
        {query.allFilms.films.map((film) => {
          if (film == null) return null;
          return (
            <div
              key={film.id}
              className="rounded-md h-32 bg-gray-700 text-white"
            >
              <Link href={`/film/${film.id}`}>
                <h2 className="text-center mt-3 hover:underline">
                  {film.title}
                </h2>
              </Link>
              <p className="text-sm p-2 truncate text-gray-200">
                {film.openingCrawl}
              </p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Layout({ children }: { children: ReactNode }) {
  return (
    <>
      <p>layout</p>
      {children}
    </>
  )
}

FilmList.getLayout = (page: ReactNode) => {
  return (
    <Layout>
      {page}
    </Layout>
  )
}

export default withRelay(FilmList, FilmListQuery, {
  createClientEnvironment: () => getClientEnvironment()!,
  createServerEnvironment: async () => {
    const { createServerEnvironment } = await import(
      'lib/server/relay_server_environment'
    );

    return createServerEnvironment();
  },
});

[sahidrahman404]

Oops, sorry for the confusion. To get the layout working correctly, I realized that I need to assign the getLayout() method to the return value of the withRelay() function.

const RelayFilmList = withRelay(FilmList, FilmListQuery, {
  createClientEnvironment: () => getClientEnvironment()!,
  createServerEnvironment: async () => {
    const { createServerEnvironment } = await import(
      'lib/server/relay_server_environment'
    );

    return createServerEnvironment();
  },
});


RelayFilmList.getLayout = (page: ReactNode) => {
  return (
    <Layout>
      {page}
    </Layout>
  )
}

export default RelayFilmList