TLDR: sử dụng nhập động hoặc sử dụng React 18 alpha https://github.com/reactwg/react-18/discussions/9

Vấn đề

Nếu bạn có một số mã Relay như thế này:

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

Giải pháp

Nhập động

Để khắc phục điều này, bạn có thể sử dụng RelayTestDynamicthay thế:

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

Phiên bản Alpha

Ngoài ra, bạn có thể sử dụng các phiên bản alpha của reactvà react-dom.

yarn add react@alpha react-dom@alpha

Về TSConfig

https://github.com/relay-tools/relay-compiler-language-typescript#typescript đề cập đến những điều sau:

Ngoài ra, hãy chắc chắn định cấu hình trình biên dịch TypeScript để chuyển tải sang es2015các mô-đun và để chuyển dịch sang commonjscác mô-đun lên đến Babel với các tsconfig.jsoncài đặt sau :

Tôi thấy điều đó là không cần thiết. Không chắc tại sao, có thể nó không áp dụng khi sử dụng móc Relay?

Codepointers

Kiểm tra các đại diện này để biết ví dụ.

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