tsに書き換えようと思ってやってみたけど、結構しんどい、、

relay-compilerのバージョンも古くて、tsに書き換えたときにcompileがうまく通らない。。（フラグメント周りがうまく処理できない。。

一旦、良さそうなソリューションでもないので、また時間があったら検証

Contributing
If you'd like to contribute to this package, developing locally is simple.
Prerequisites: Yarn v1 (v2 is not yet tested)
Run yarn from the root of this package
Start the live reloader for the package cd relay-nextjs && yarn build -w
In a separate terminal strt the example app: cd example && yarn dev
Now, when you make any changes in relay-nextjs, they will instantly be reflected in the example app.

となってるが、、動かないんだが、、

Server Error
TypeError: _interopRequireDefault is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.

relay-runtimeのバージョン的な問題な気がするけど、、（なんかあまりメンテされてない感じがしてどうもやる気が起きない。。

relay-nextjsをv1.0.0にダウングレードをしたら動いた（latestはv1.0.2）

とりあえず全然わからんかったのでissueを立てておく

https://github.com/RevereCRE/relay-nextjs/issues/83

SSR中にクリティカルなリクエストを待つことができないらしい
クリティカルなリクエストとは？（わからないけど、サーバーサイドを拡張してるからつらみがあるのかな？

の内容がわかったかもしれない。

以下はサンプルコード

export default withRelay(UserProfile, UserProfileQuery, {
...
  serverSideProps: async (ctx) => {
    const { getTokenFromCtx } = await import('lib/server/auth');
    const token = await getTokenFromCtx(ctx);
    if (token == null) {
      return {
        redirect: { destination: '/login', permanent: false },
      };
    }

    return { token };
  },
  createServerEnvironment: async (
    ctx,
    { token }: { token: string }
  ) => {
    const { createServerEnvironment } = await import('lib/server_environment');
    return createServerEnvironment(token);
  },
});

このサンプルでは、serverSidePropsでトークンを入手し、returnする。
それをcreateServerEnvironementで受け取ってenvironmentを作り出す。
withRelayにデータフェッチが内包されているため、取得したrelayのデータ（=クリティカルなリクエスト）を用いて何かすることができない

という意味かな？

まぁそんなことする必要ないでしょ？（そのままコンポーネントに渡されて、使うだけなんだから）
というのはわかるけど、サーバーサイドでそのままデータ直接参照したい場合ってないわけではないからそういうことかな？

SG（SSG）のサポートがない

これは確かになさそう（オプションが見当たらない）

並行レンダリングのサポートがない

これに関しては知識不足で検証方法がわからないが、まぁ高度な話だと思うので、特段これ以上調べない。

ちなみに、useLazyLoadQueryに関してはサポートされてるっぽいので、クライアントフェッチはできるはず

評価: △

完成度は高いが、relay-nextjsへの依存度が高めのコードが出来上がってしまう印象

• TypeScirptがちゃんとサポートされている
• usePreloadedQuery等のデフォルトが使える

というのはGood

無理している部分について

セットしている部分

https://github.com/jantimon/next-relay-demo/blob/main/data/ReactRelayContainer.tsx#L35-L36

取り出し部分

https://github.com/jantimon/next-relay-demo/blob/main/data/network.ts#L28-L30

実際にenvironment.getNetwork()をconsole.logしてみると以下のようなものが出てくる

{responseCache: RelayQueryResponseCache, execute: ƒ}

responseCacheオブジェクトが入っているが、privateなapiっぽい（多分、クライアントサイドで扱う分には、usePreloadedQueryとかのAPIが内部的にアクセスするだけなので、外に出す必要がないということだと思う

クライアントサイドフェッチのサンプルがなさそう（useLazyLoadQuery）に関して

getStaticPropsの部分を削除し、useLazyLoadQueryを使ったらちゃんと実行することができた

import { PreloadedQuery } from "react-relay";
import { graphql, useLazyLoadQuery } from "react-relay/hooks";
import { Flag } from "../src/components/Flag";
import { Pasta_Query } from "../__generated__/Pasta_Query.graphql";

const Pasta = () => {
  const data = useLazyLoadQuery<Pasta_Query>(graphql`
    query Pasta_Query($countryCode: ID!) {
      country(code: $countryCode) @required(action: THROW) {
        name
        ...Flag_icon
      }
    }
  `, { countryCode: 'IT' });
  return (
    <main>
      <h1>{data.country.name}</h1>
      <Flag country={data.country} />
    </main>
  );
};

// export async function getServerSideProps() {
//   return {
//     props: {
//       preloadedQueries: {
//         query: await getPreloadedQuery(preloadQuery, {
//           countryCode: "IT",
//         }),
//       },
//     },
//   };
// }

export default Pasta;

ライブラリ群（ハイドレート部分等）が自分達で実装になるため、基本コピペで良いだろうが、メンテナンスを自分達でする必要ありという部分

色々見ていくと、無理やりカスタマイズしているところはあるものの、全体的に見ると割とシンプルになっているし、メンテナンスが多く発生するところでもないので良さそう

評価: ○

思っていたより完成度が高く、辛いポイントがlibs配下にしまえそうなので、良さそう

• TypeScirptがちゃんとサポートされている
• usePreloadedQuery等のデフォルトが使える
• 最低限の_app.tsxとかの拡張に止まるので、負債を中にしまい込んでしまえば標準機能で綺麗に作っていけそう
• getServerSideProps等の拡張も必要ない

responseCache部分について

無理やりなんとかしてる部分について、よりうまくできないか考えてみる

何をしているのか？

1. サーバーでプリロードする

https://github.com/jantimon/next-relay-demo/blob/main/pages/Pasta.tsx#L30-L40

2. Relayコンテナに1を渡す

https://github.com/jantimon/next-relay-demo/blob/main/pages/_app.tsx#L7

3 environmentを作成する

3.1 relayのenvironmentを作成する

https://github.com/jantimon/next-relay-demo/blob/main/data/ReactRelayContainer.tsx#L18

3.2 3.1と同時にnetworkというものを同時に作成する

https://github.com/jantimon/next-relay-demo/blob/main/data/relayEnvironment.tsx#L9

3.3 3.2と同時にデータを格納しておくcacheの箱を作成

https://github.com/jantimon/next-relay-demo/blob/main/data/network.ts#L6-L9

3.4 3.3で生成した箱を3.1で作ったnetworkに無理やり格納しておく

https://github.com/jantimon/next-relay-demo/blob/main/data/network.ts#L30

3.3で用意した箱はあくまでも、classを呼び出しているだけなので、networkに対して無理やり箱をつくりあげている

3.5 最終的にはnetworkも3.1で作ったenvironmentに格納してあげる

https://github.com/jantimon/next-relay-demo/blob/main/data/relayEnvironment.tsx#L22

以上で、キャッシュを入れておく箱の準備完了

4. データを整形

https://github.com/jantimon/next-relay-demo/blob/main/data/ReactRelayContainer.tsx#L21-L32

5. 3で作ったenvironment>network>responseCacheに対して、4を突っ込む

https://github.com/jantimon/next-relay-demo/blob/main/data/ReactRelayContainer.tsx#L33-L36

6. 最終的にコンポーネント側が知りたいのはデータではなく、データのありか（ref）なので、それをpropsとして整形して返してあげる

https://github.com/jantimon/next-relay-demo/blob/main/data/ReactRelayContainer.tsx#L38-L46

クライアントサイドフェッチのサンプルがなさそう（useLazyLoadQuery）に関しての続き

useLazyLoadQueryを実行した時、Suspenseのfallbackが実行されるだろう。と思い、実行

結果、SSRではFallbackが実行され、クライアントサイドでは実行されず。
SSR側でSuspenseを待ち合わせ、出来上がったDOMを渡す？

でも、クライアントサイドでもデータのフェッチは行ってそう

よくわからない。（Suspenseの知識が足りていないのか