TLDR: użyj dynamicznego importu lub użyj React 18 alfa https://github.com/reactwg/react-18/discussions/9

Problem

Jeśli masz taki kod przekaźnika:

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>
  );
}

Rozwiązanie

Import dynamiczny

Aby to naprawić, możesz RelayTestDynamiczamiast tego użyć:

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

Wersje alfa

Alternatywnie możesz użyć wersji alfa reacti react-dom.

yarn add react@alpha react-dom@alpha

Informacje o TSConfig

https://github.com/relay-tools/relay-compiler-language-typescript#typescriptwymienia następujące elementy:

Pamiętaj również, aby skonfigurować kompilator TypeScript do transpilacji do es2015modułów i pozostawić transpilację do commonjsmodułów aż do Babel z następującymi tsconfig.jsonustawieniami:

Uznałem to za niepotrzebne. Nie wiesz dlaczego, może to nie ma zastosowania w przypadku korzystania z hooków Relay?

Wskaźniki kodowe

Sprawdź te repozytoria dla przykładów.

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