GraphQLを始めて、ネイティブを反応します-jsチュートリアル-php.cn

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

William Shakespeare

リリース： 2025-02-14 08:37:12

オリジナル

161 人が閲覧しました

Getting Started with GraphQL and React Native

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

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

キーハイライト：

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

前提条件：
。
プロジェクトの概要：

このチュートリアルは、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

ログイン後にコピー

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

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

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

で管理されています）：

および Getting Started with GraphQL and React Native があります。

コーヒー豆の

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

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