RelayとBack4Appを使用したGraphQL開発ガイド

12 分

graphql relayを始めるはじめにこのガイドでは、relayとは何か、スキーマの扱い方、back4appでgraphqlを使う方法を学びます。前提条件これはまだチュートリアルではありませんが、快適に読むためには次のものが必要です：基本的なjavascriptの知識。 graphqlについての基本的な理解。もし持っていない場合は、 graphql js が始めるのに最適な場所です。 relay relayはfacebookエンジニアリングチームによって開発されたgraphqlクライアントで、データ駆動型アプリケーションを構築する際のパフォーマンスを考慮して設計されています。より正確には、relayはクライアント側でgraphqlデータを宣言的に取得し管理するためのフレームワークであり、アプリケーションの成功を助けるために厳格な規約を使用します。facebookのような複雑なアプリケーションを支えるためにスケーラビリティを考慮して構築されました。graphqlとrelayの最終的な目標は、即時のui応答インタラクションを提供することです。 graphqlを使用する主な利点の1つは、アプリケーションページを構築するために必要なすべてのデータを単一のクエリで取得できることです。もちろん、これは良いことです（サーバーへの往復を節約できます）が、それに伴う問題もあります。同じコンポーネントをアプリケーションの異なる部分で再利用する際に、異なるクエリを使用する可能性があります。この種の問題を避けるために、relayは重要な概念を使用します：コロケーションです。コロケーション relayを使用する際、コンポーネントとそのデータ要件は一緒に存在します。コンポーネントのデータ要件はその内部で宣言されます。つまり、すべてのコンポーネントは自分が必要とするデータを宣言します。relayは、各コンポーネントがレンダリング時に必要なデータを持っていることを保証します。コロケーションの概念の背後にあるrelayの構造はコンテナです。最も一般的なのはrelayフラグメントコンテナです。コンテナは、各コンポーネントをレンダリングする際に必要なデータを満たそうとするコンポーネントです。コンテナはgraphqlフラグメントを使用してデータ依存関係を宣言します。各コンポーネントには独自のフラグメントコンテナがあります。コンテナはデータを直接取得するのではなく、レンダリング時に必要なデータの仕様を宣言するだけです。データはサーバー側で取得されます。relayは、レンダリングが行われる前にデータが利用可能であることを確認します。relayは、冗長性を無視して、これらのコンテナでデータのツリーを構成し、サーバー上でデータを取得します。この概念を例で説明しましょう。フラグメントはgraphqlタイプのフィールドの選択です。relayはフラグメント、ページネーション、リフェッチコンテナで動作します。最も一般的なのはフラグメントコンテナです。以下にgraphqlのフラグメントを示し、その後にrelayでの同じものを示します。 1 query health { 2 health 3 } 1 type homeprops = { 2 query home query; 3 }; 4	 5 const home = ({query} homeprops) => { 6 return ( 7 \<view> 8 \<text>api health {query health ? 'health' 'not health' }\</text> 9 \</view> 10 ); 11 }; 12	 13 const homefragment = createfragmentcontainer(home, { 14 query graphql` 15 fragment home query on query { 16 health 17 } 18 `, 19 }); 20	 21 export default createqueryrenderermodern(homefragment, home, { 22 query graphql` 23 query homequery { 24 home query 25 } 26 `, 27 hidesplash true, 28 }); 最初のコードでは、クエリを再利用可能なフラグメントに分割できるgraphqlバージョンが表示されています。次のコードでは、フラグメントとデータを同じコンポーネントで表示するrelayバージョンが表示されています。コロケーションとは、データ定義とビュー定義が一緒に存在することを意味します。コロケーションにはいくつかの利点があります。必要なデータを正確に宣言するだけで済みます。つまり、データを過剰に取得することが難しくなり、アプリケーションが改善され、データを不足して取得することが難しくなり、欠落したデータによるエラーを防ぎます。もう一つの重要な概念はデータマスキングで、これはコンポーネントが要求したデータにのみアクセスできることを意味します。データマスキングは依存関係エラーを防ぐのに役立ちます。また、コンポーネントは使用しているデータが変更された場合にのみ更新されます。クエリレンダラーモダンより良い理解のために、公式のクエリレンダラーのドキュメント https //relay dev/docs/en/query renderer html#docsnav を確認することをお勧めします。フラグメントコンテナに基づいて、relayはそれらを読み取り、持っているデータに基づいてサーバーにリクエストを行います。しかし、このリクエストはどのように行われるのでしょうか？ここでクエリレンダラーモダンが登場します。クエリレンダラーモダンは、フラグメントコンテナを読み取り、サーバーにリクエストを行い、データをコンポーネントに返すコンポーネントです。すべてのルートコンポーネントには、このリクエストを行うクエリレンダラーモダンがあります。上記の例では、読み取る必要があるフラグメントのみを渡すための抽象化があり、残りの作業はcreatequeryrenderermodernの内部で行われます。ドキュメントの次のステップでは、上記の純粋な例に基づいて抽象化を理解するためにcreatequeryrenderermodernを入力します以下はquery render modernの純粋な例です 1 export default function artistrenderer({artistid}) { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql` 6 query queryrenderersartistquery($artistid string!) { 7 # the root field for the query 8 artist(id $artistid) { 9 # a reference to your fragment container 10 artistheader artist 11 } 12 } 13 `} 14 variables={ {artistid} } 15 render={({error, props}) => { 16 if (error) { 17 return \<div>{error message}\</div>; 18 } else if (props) { 19 return \<artist artist={props artist} />; 20 } 21 return \<div>loading\</div>; 22 }} 23 /> 24 ); 25 } query renderer modernは hocコンポーネントであることがわかります。言い換えれば、リクエストされるデータを持つコンテナを所有するコンポーネントをラップし、relay環境でリクエストを行い、データを下に渡してコンポーネントに返します。自動型生成 relayを使用して、安全にアプリケーションの型を構築できます。前述のように、すべてのコンポーネントは自分のデータの所有者になります。したがって、relay compilerを実行すると、すべてのデータのフラグメントを読み取り、graphqlスキーマとチェックを行います。relayコンパイラのすべてのチェックが問題ない場合、生成される型は generated というフォルダーに作成されます。このフォルダーは、ルートコンポーネントフォルダー内に作成されます。以下の例を参照してくださいコンポーネントホームがapiの健康状態をチェックしています 1 const home = ({query} homeprops) => { 2 return ( 3 \<view> 4 \<text>api health {query health ? 'health' 'not health' }\</text> 5 \</view> 6 ); 7 }; 8	 9 const homefragment = createfragmentcontainer(home, { 10 query graphql` 11 fragment home query on query { 12 health 13 } 14 `, 15 }); 16	 17 export default createqueryrenderermodern(homefragment, home, { 18 query graphql` 19 query homequery { 20 home query 21 } 22 `, 23 hidesplash true, 24 }); homeコンポーネントのために生成されたフォルダー生成されたタイプこれを行った後、コンポーネントにタイプをインポートして構成するだけです 1 import {home query} from " / generated /home query graphql"; 2 3 type homeprops = { 4 query home query; 5 }; タイプはflowで生成され、facebookのタイプのコア言語です。しかし、ライブラリを使用するとtypescriptで生成できます。これはreact nativeで作業する際に最も一般的です。要約すると、relayコンパイラを使用すると、実行時前にデータの実装を確認できます。これにより、バグを防ぎ、アプリケーションの品質と開発時間を向上させることができます。クエリでは、n個の異なるコンポーネントで重複データを回避できます。重複データがあるかどうかを確認します。重複があれば、冗長性を取り除きます。これにより、クエリのペイロードサイズが削減され、アプリケーションのパフォーマンスがさらに向上します。開発クエリでは、n個の異なるコンポーネントで重複データを回避できます。重複データがあるかどうかを確認します。重複があれば、冗長性を取り除きます。これにより、クエリのペイロードサイズが削減され、アプリケーションのパフォーマンスがさらに向上します。サーバーサイド back4app back4appは、プロジェクトで使用するための準備が整ったrelay準拠のgraphql apiを生成します。back4appが生成するものは、サーバーサイドで自分で構築する必要がないものですインフラストラクチャ back4appダッシュボードでは、クラス、タイプ、データベースに必要なすべてを含む完全なデータモデルを作成できます。自分でサーバーのセットアップや維持を心配する必要はありません。データモデルをback4appで作成した後、フロントエンド側でgraphqlを使用してそれを消費するために必要なすべてを生成します。graphql apiスキーマを見てみましょう。スキーマスキーマファイルは、すべてのgraphqlアプリケーションのコアです。クライアント側で使用できるサーバー全体を説明します。relayは、スキーマファイルを使用してクエリの文字列を確認し、生成されたファイルが / generated /mycomponent graphqlに表示されるようにします。これは、「自動タイプ生成」のトピックで述べた通りです。 relayコンパイラを使用するには、graphqlサーバーのapiを説明する graphqlまたは jsonのgraphqlスキーマファイルが必要です。これらのファイルは、サーバーの真実のソースのローカル表現であり、編集されることはありません。 graphqlのすべてのスキーマは、クエリタイプ、ミューテーションタイプ、サブスクリプションタイプで構成できます。フロントエンドでrelayによって消費されるスキーマで作業するには、バックエンドのいくつかのコア概念、すなわちノードインターフェースと接続が必要です。ノードインターフェースとrelay接続について読むことをお勧めします。この読み物をより抽象的に理解しやすくするためです。ノードインターフェースノードインターフェースは、idを介してデータを取得するためにgraphqlのすべてのタイプを実装します。これは、サーバーからデータをより簡単に取得し、更新するための実装です。したがって、各タイプの各データには、ノードインターフェースによって実装されるグローバルユニークidと呼ばれるユニークなidがあります。ノードを使用することで、relayはネストされたクエリを回避し、それを使用して取得と再取得を行います。これは実装が難しく、少しの作業が必要ですが、私たちはすでにこれをあなたのために構築しました！ページネーションフロントエンドとバックエンドの両方でデータを構成するためにrelayが役立つように構築されています。ページネーションで作業するために、接続があります。これらの接続は、取得しているタイプのノードを実装し、標準モデルを持ち、サーバー側でのページネーションの実装を容易にします。幸運なことに、再び、私たちはこれをすでにフロントエンドで使用するために構築しています。結論このガイドでは、relayとは何か、その主な概念と動作方法を紹介しました。また、back4appがgraphqlサーバーの作成を自動化し、私たちにgraphql apiを持つ完全なデータベースを提供する方法も見ることができました。要約すると、バックエンド全体はすでにback4appによって構築されています。ダッシュボードでタイプを作成し、生成されたスキーマに基づいて消費を開始するだけです。次のセクションでは、フロントエンドでこのスキーマを扱う方法と、relayを使用するための環境を準備する方法を説明します。また、私たちは graphqlクックブック https //www back4app com/docs/parse graphql/graphql getting started を持っており、ダッシュボードの概念を理解するのに役立てることができます。