Как использовать Relay с Next.js и TypeScript

Эта проблема

Если у вас есть такой код реле:

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

то вы получите эту ошибку:

Решение

Динамический импорт

Чтобы исправить это, вы можете вместо этого использовать RelayTestDynamic:

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

Это немного раздражает, и если ваши компоненты, использующие Relay, видны при начальной загрузке (вероятно, так и есть), это плохо для производительности (теперь браузеру нужно сделать еще один запрос JS, который мог быть отправлен в первоначальном ответе).

Альфа-версии

В качестве альтернативы вы можете использовать альфа-версии react и react-dom.

yarn add react@alpha react-dom@alpha

В альфа-версиях динамический импорт больше не требуется. Это приводит к некоторым предупреждениям, но, похоже, все работает нормально.

О TSConfig

Https://github.com/relay-tools/relay-compiler-language-typescript#typescript упоминает следующее:

Также обязательно сконфигурируйте компилятор TypeScript для транспиляции в es2015 модулей и оставьте транспиляцию в commonjs модулей до Babel со следующими tsconfig.json настройками:

Я обнаружил, что в этом нет необходимости. Не уверен, почему, может быть, это не применимо при использовании перехватчиков реле?

Посмотрите на эти репозитории примеры.

TL; DR: либо используйте динамический импорт, либо используйте альфа-версию React 18 https://github.com/reactwg/react-18/discussions/9