Relay
各コンポーネントがAPI通信する感じになる
従来のコンポーネントをwrapしてGraphQLでfetch処理を書く
Meta製
Suspense for Data Fetchingと組み合わせることでさらに楽に書ける
hooksが用意されている ref
docs
tutorial
こんな感じになるらしい ref
コンポーネント自体はそのままで、一つのコンポーネントごとにAPリクエストを紐付ける感じ
code:ts
class Comment extends React.Component {...} // 中身は省略
module.exports = Relay.createContainer(Comment, {
queries: {
comment: graphql`
Comment {
text,
author {
name,
photo
}
}
`
}
});
#??
各コンポーネントがAPI通信する感じ?
めっちゃ極端に言えば、今までは親からpropsをもらってたけどそれが全部消えて、
各コンポーネントが必要なpropsをAPIから直接もらう感じ?
reduxのstoreとか全く不要になるのか?
Modelとかいう概念も消える?
は?ヤバ、そんなんできるん?mrsekut.icon
移行は大変?
マイクロフロントエンドを実現する時に有用?
https://www.youtube.com/watch?v=lhVGdErZuN4
https://relay.dev/docs/en/experimental/api-reference
@apollo/clientとの比較
https://blog.bitsrc.io/apollo-and-relay-side-by-side-adb5e3844935
https://kazekyo.com/posts/20200925
参考
Facebook Relayについてまとめ - Qiita
概要がわかる
https://relay.dev/docs/en/introduction-to-relay
https://mae.chab.in/archives/2732
https://wawoon.dev/posts/relay-modern-with-nextjs
https://twitter.com/RelayFramework/status/1466875921818861577