TLDR: use importações dinâmicas ou use o React 18 alpha https://github.com/reactwg/react-18/discussions/9

O problema

Se você tiver algum código de relé como este:

import { Suspense } from "react";
import { graphql } from "relay-runtime";
import { useLazyLoadQuery } from "react-relay";
const RelayTestQuery = graphql`
  query RelayTestQuery {
    viewer {
      id
    }
  }
`;
function RelayTestInner() {
  const data = useLazyLoadQuery(RelayTestQuery, {
    variables: {},
  });
  return <div>hi</div>;
}
export default function RelayTest() {
  return (
    <Suspense fallback={<div>Loading</div>}>
      <RelayTestInner />
    </Suspense>
  );
}

export default function Home() {
  return (
    <RelayEnvironmentProvider environment={RelayEnvironment}>
      <RelayTest />
    </RelayEnvironmentProvider>
  );
}

A solução

Importações dinâmicas

Para corrigir isso, você pode usar RelayTestDynamicem vez disso:

import dynamic from "next/dynamic";
const RelayTestDynamic = dynamic(() => import("./RelayTest"), {
  ssr: false,
});
export default RelayTestDynamic;

Versões Alfa

Como alternativa, você pode usar as versões alfa de reacte react-dom.

yarn add react@alpha react-dom@alpha

Sobre o TSConfig

https://github.com/relay-tools/relay-compiler-language-typescript#typescriptmenciona o seguinte:

Certifique-se também de configurar o compilador TypeScript para transpilar para es2015módulos e deixar a transpilação para commonjsmódulos para Babel com as seguintes tsconfig.jsonconfigurações:

Achei isso desnecessário. Não sei por que, talvez não se aplique ao usar ganchos de relé?

Ponteiros de código

Confira esses repositórios para exemplos.

• https://github.com/arcticmatt/relay-nextjs-typescript
• https://github.com/arcticmatt/relay-nextjs