GraphQLを始めて、ネイティブを反応します

Facebookは、GraphQLを「APIのクエリ言語、および既存のデータでそれらのクエリを満たすためのランタイム」として定義しています。 基本的に、それは牽引力を獲得する休息の代替品です。通常、データを収集するために複数のエンドポイント要求が必要なRESTとは異なり、GraphQLにより、開発者は正確なデータニーズを指定する単一のクエリを送信できます。

ネイティブの反応に飛び込む準備はできましたか？この記事は、プレミアムライブラリからの抜粋です。 SitePoint Premiumを使用して、ファンダメンタルズ、プロジェクト、ヒント、ツールなどを含む、Reactネイティブリソースの包括的なコレクションにアクセスします。今日、月額わずか9ドルで購読しています

キーハイライト：

GRAPHQLは、APIクエリに動的で効率的な方法を提供し、RESTの複数のエンドポイントリクエストとは異なり、データ要件を正確に定義する単一クエリを有効にします。 プロジェクトのセットアップには、基本的なReactネイティブとエキスポの知識が必要です。 依存関係のインストールと環境構成のために詳細な指示が提供されています。 このチュートリアルは、シンプルなコーヒー豆の比較アプリケーションを構築することにより、Reactネイティブアプリ内のGraphQL統合を示しています。 Apolloクライアントやその他のライブラリを使用してデータを取得および表示します。 チュートリアルでは、引数、エイリアス、変数などのGraphQLのクエリ機能を調査し、特定のデータニーズのクエリをカスタマイズする方法を紹介し、データの取得柔軟性と効率を改善します。 React Native Appのデータ管理は、コンテキストAPIを使用して合理化されており、プロップドリルなしでコンポーネント階層全体に効率的な状態通過とアクセスを可能にします。

• 前提条件：
このチュートリアルは、基本的な反応のネイティブ知識と博覧会環境に精通していることを前提としています。 モバイルデバイスまたは互換性のあるシミュレーターにインストールされているExpoクライアントが必要です。 インストール手順は
• 。
• プロジェクトの概要：

このチュートリアルは、Coffee Bean比較アプリを作成することにより、ReactネイティブのGraphQLのパワーを紹介します。 Expoを使用して構築されたベーステンプレートが提供され、プロセスを簡素化し、GraphQL機能に焦点を当てています。

開始するには、このリポジトリをクローンして、「開始」ブランチに切り替えます：

このブランチには、基本的なビューと初期依存関係が含まれています

git clone https://github.com/jamiemaison/graphql-coffee-comparison.git
cd graphql-coffee-comparison
git checkout getting-started

次に、依存関係をインストールします（ノードv11.10.1がインストールされていることを確認）：

{
  "expo": "^32.0.0",
  "react": "16.5.0",
  "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
  "react-navigation": "^3.6.1"
}

GraphQLを統合するには、追加の依存関係をインストールしてください：

npm install

これらの依存関係には次のものが含まれます

：React/React Native用のSimplified GraphQLセットアップ。
• apollo-boost
：GraphQLをApolloクライアントと統合します
• react-apollo：テンプレートリテラルを使用してgraphqlクエリを解析します。
• graphql-tag：JavaScript GraphQL参照実装
• インストール後、実行graphql。 エキスポウィンドウが表示され、アプリを起動する（シミュレーターまたはデバイスを介して）これに似た画面を表示する必要があります。

npm startこのアプリには、2つの画面（

で管理されています）：

およびがあります。

コーヒー豆の

を表示します。 詳細については、Beanを選択することでreact-navigationに移動します。 次のセクションでは、これらのビューにGraphQLデータに登録されています。 Home.js CoffeePage.jsHome.js FlatListCoffeePage.js（応答の残りの部分は、提供されたテキストを言い換えて再構築し続け、画像の配置と形式を維持し、Apollo Server Playground、GraphQLクエリの基本、データのリクエスト、コンテキストAPIでデータの保存をカバーします。およびFAQ

以上がGraphQLを始めて、ネイティブを反応しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。