Bermula dengan Graphql dan React Native

Pada tahun 2012, jurutera Facebook Nick Schrock memulakan projek, yang pada mulanya digelar "Supergraph," untuk beralih dari API rakan kongsi yang sudah lapuk dan tidak disokong oleh Facebook. Prototaip ini akhirnya menyumbang dengan ketara kepada perkembangan GraphQL, bahasa pertanyaan sumber terbuka sekarang.

Facebook mentakrifkan GraphQL sebagai "bahasa pertanyaan untuk API anda dan runtime untuk memenuhi pertanyaan tersebut dengan data sedia ada anda." Pada asasnya, ia adalah alternatif yang lain mendapat daya tarikan. Tidak seperti rehat, yang biasanya memerlukan permintaan titik akhir untuk mengumpulkan data, GraphQL membolehkan pemaju menghantar pertanyaan tunggal yang menyatakan keperluan data yang tepat.

Sedia menyelam ke React Native? Artikel ini adalah petikan dari perpustakaan premium kami. Mengakses koleksi sumber asli React React, termasuk asas, projek, tip, alat, dan banyak lagi, dengan SitePoint Premium. Langgan hari ini hanya $ 9/bulan.

sorotan utama:

GraphQL menyediakan kaedah yang dinamik dan cekap untuk pertanyaan API, membolehkan pertanyaan tunggal yang tepat menentukan keperluan data, tidak seperti permintaan endpoint berganda REST.
Persediaan projek memerlukan pengetahuan asas dan pengetahuan ekspo asas. Arahan terperinci disediakan untuk pemasangan pergantungan dan konfigurasi persekitaran.
Tutorial ini menunjukkan integrasi GraphQL dalam aplikasi React Native dengan membina aplikasi perbandingan kacang kopi yang mudah. Ia menggunakan klien Apollo dan perpustakaan lain untuk mengambil dan memaparkan data.
Tutorial meneroka ciri pertanyaan GraphQL, seperti argumen, alias, dan pembolehubah, mempamerkan cara menyesuaikan pertanyaan untuk keperluan data tertentu, meningkatkan fleksibiliti dan kecekapan pengambilan data.
Pengurusan data dalam aplikasi Native React diselaraskan menggunakan API konteks, membolehkan lulus dan akses keadaan yang cekap sepanjang hierarki komponen tanpa penggerudian prop.

Prasyarat:

tutorial ini menganggap pengetahuan asas reaksi asas dan kebiasaan dengan persekitaran ekspo. Anda memerlukan klien Expo yang dipasang pada peranti mudah alih anda atau simulator yang serasi. Arahan pemasangan tersedia

di sini .

Gambaran keseluruhan projek:

Tutorial ini mempamerkan kuasa GraphQL dalam React Native dengan membuat aplikasi perbandingan kacang kopi. Templat asas, yang dibina menggunakan Expo, disediakan untuk memudahkan proses dan memberi tumpuan kepada ciri GraphQL.

untuk memulakan, mengklon repositori ini dan beralih ke cawangan "mendapatkan-mula":

Cawangan ini termasuk pandangan asas dan kebergantungan awal:

<code class="language-bash">git clone https://github.com/jamiemaison/graphql-coffee-comparison.git
cd graphql-coffee-comparison
git checkout getting-started</code>

<code class="language-bash">git clone https://github.com/jamiemaison/graphql-coffee-comparison.git
cd graphql-coffee-comparison
git checkout getting-started</code>

Seterusnya, pasang kebergantungan (pastikan nod v11.10.1 dipasang):

<code class="language-json">{
  "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"
}</code>

untuk mengintegrasikan GraphQL, pasang kebergantungan tambahan:

<code class="language-bash">npm install</code>

kebergantungan ini termasuk:

• apollo-boost: Persediaan GraphQL yang dipermudahkan untuk React/React Native.
• react-apollo: Mengintegrasikan GraphQL dengan klien Apollo.
• graphql-tag: Parses GraphQl Queries Menggunakan Literals Templat.
• graphql: Pelaksanaan rujukan GraphQL JavaScript.

Selepas pemasangan, jalankan npm start. Tetingkap Expo harus muncul, dan melancarkan aplikasi (melalui simulator atau peranti) harus memaparkan skrin yang serupa dengan ini:

aplikasi ini mempunyai dua skrin (diuruskan oleh

): react-navigation dan Home.js. CoffeePage.js memaparkan biji kopi Home.js. Memilih kacang menavigasi ke FlatList untuk maklumat terperinci. Bahagian berikut akan mengisi pandangan ini dengan data GraphQL. CoffeePage.js

(selebihnya respons akan terus mengaprerasikan dan menyusun semula teks yang disediakan, mengekalkan penempatan dan format imej, yang meliputi topik seperti Apollo Server Playground, asas pertanyaan Graphql, meminta data, menyimpan data dengan API konteks, dan Soalan Lazim.)

Atas ialah kandungan terperinci Bermula dengan Graphql dan React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!