next apollo example

次へ＆アポロの例

この例では、Next.jsアプリでApolloを使用する際に関係する式典の一部を捨てたい場合に理想的な次のApolloパッケージを利用しています。また、私の好みのCSS-in-JSソリューション、感情も備えています。

デモ

使い方

インストールして実行します

npm install
npm run dev

今すぐクラウドに展開します（ダウンロード）

now

例の背後にあるアイデア

Apolloは、GraphQLサーバーから必要な正確なデータを簡単に照会できるGraphQLクライアントです。データの取得と変異に加えて、Apolloはクエリとその結果を分析して、データのクライアント側のキャッシュを構築します。これは、さらなるクエリと突然変異が実行されるため、最新の状態に保たれ、サーバーからより多くの結果を取得します。

この単純な例では、Apolloを次のコンポーネント（HOC）内に包むことで、ApololoをNextとシームレスに統合します。 HOCパターンを使用して、Apolloによって作成されたクエリ結果データの中央ストアを、次のアプリケーションの各ページ内に定義されたReactコンポーネント階層に渡すことができます。

最初のページの読み込みで、サーバー上および内部getInitialPropsでは、ApolloメソッドのgetDataFromTree呼び出します。この方法は約束を返します。約束が解決する時点で、Apolloクライアントストアは完全に初期化されます。

この例は、GraphQLバックエンドのPrisma + Nexusに依存しています。