Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. GraphQL
Code

Pengantar untuk Apollo Client dengan React untuk GraphQL

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

GraphQL semakin populer akhir-akhir ini dan sepertinya akan menggantikan Rest API. Dalam tutorial ini, kita akan menggunakan Apollo Client untuk berkomunikasi dengan GraphQL API GitHub. Kita akan mengintegrasikan Apollo Client dengan ReactJS, tetapi Anda dapat menggunakannya dengan beberapa platform klien lainnya juga.

Tutorial ini tidak mencakup cara memulai proyek React, tetapi Anda dapat menggunakan aplikasi create-react-app untuk memulai.

Setelah kita memiliki aplikasi react yang siap digunakan, hal berikutnya adalah menginstal modul yang diperlukan.

Memasang Modul

Baris dibawah ini adalah cara untuk menginstal semua modul yang diperlukan.

Sekarang kita dapat menyediakan komponen dengan menggunakan klien.

Menyediakan Klien untuk Komponen

Anda dapat menyediakan klien di mana pun dalam hierarki komponen React Anda. Namun, itu selalu merupakan praktik yang baik untuk menyediakan komponen, membungkus seluruh aplikasi Anda, dengan klien.

Di atas Anda dapat melihat bahwa kami mendefinisikan uri untuk GitHub dan juga menggunakan token khusus untuk header. Anda harus menggunakan token Anda sendiri yang dihasilkan dari GitHub. Jadi jangan lupa untuk menggantinya dengan YOUR_TOKEN.

Untuk contoh ini, kita mendefinisikan token API di klien. Namun, Anda tidak boleh mengungkapkan token API Anda ke publik. Jadi, alangkah baiknya untuk mempertahankannya di server yang diabstraksikan dari sisi klien.

Perhatikan bahwa kami telah membungkus komponen <App/> dengan ApolloProvider dan menggunakan variabel client yang kami buat untuk properti client

Aplikasi GraphiQL

Sebelum mendalami ke dalam pertanyaan lainnya, saya ingin menunjukkan bahwa ada alat yang sangat berguna yang disebut GraphiQL untuk menguji query GraphQL Anda. Sebelum melanjutkan, pastikan Anda telah mengunduhnya.

Setelah Anda membuka GraphiQL, Anda perlu mengatur GraphQL Endpoint dan HTTP Headers.

GraphQL Endpoint: https://api.github.com/graphql

Header Name: Authorization

Header Value: Bearer YOUR_TOKEN

Tentu saja, Anda harus mengganti YOUR_TOKEN dengan token Anda sendiri. Jangan lupa untuk menyertakan Bearer di depan token Anda saat menentukan Header Value.

Jika Anda tidak ingin mengunduh aplikasi, Anda juga dapat menggunakan GraphQL API Explorer online untuk GitHub.

GraphQL Queri

Tidak seperti REST API dengan beberapa end-point, GraphQL API hanya memiliki satu end point, dan Anda hanya mengambil apa yang ditentukan oleh permintaan Anda.

Dokumentasi API GraphQL GitHub memberi Anda lebih banyak wawasan.

Juga, bagian terbaik dari aplikasi GraphiQL adalah memberi Anda akses ke dokumentasi untuk query yang tepat di dalam aplikasi. Anda dapat melihat bilah sisi di sebelah kanan bernama Docs.

Mari mulai dengan query paling sederhana:

Permintaan ini mengembalikan Anda informasi login dari pemirsa. Dalam hal ini, pemirsa adalah Anda karena Anda menggunakan token API Anda sendiri.

Dalam tutorial ini, saya tidak akan memberikan informasi rinci tentang query. Anda selalu dapat merujuk ke dokumentasi dan mencoba query pada GraphQL untuk melihat apakah Anda mendapatkan data yang benar.

Mari gunakan query berikut untuk sisa tutorial.

Query ini mencari 10 repositori terakhir yang cocok dengan string input spesifik, yang akan kami definisikan dalam aplikasi kami.

Akan dikembalikan id, name, description, dan url untuk setiap hasil.

Menggunakan GraphQL Query dalam Komponen React

Kita perlu mengimpor dua modul di bawah ini ke komponen React kita untuk dapat mendefinisikan kueri dalam komponen dan kemudian meneruskan hasilnya ke komponen sebagai properti.

Di sini kita menetapkan query kita ke variabel konstan, tetapi kita belum mendefinisikan parameter name.

Sekarang kita membungkus komponen kita dengan HOC (Higher Order Component) untuk menentukan parameter kueri, mengeksekusi kueri, dan kemudian meneruskan hasilnya sebagai properti ke komponen kita.

Di bawah ini adalah versi terakhir dari komponen kita.

Perhatikan bahwa kita tidak mengekspor komponen App yang sebenarnya tetapi komponen yang dibungkus, yaitu AppWithData.

Periksa Data di Console

Mari lanjutkan dan tambahkan {console.log (this.props)} ke metode render komponen Anda.

Ketika Anda memeriksa console browser Anda, Anda akan melihat ada dua log objek.

Di dalam setiap objek, Anda akan melihat properti data. Ini disediakan untuk komponen kami melalui HOC graphql.

Perhatikan bahwa log pertama properti loading:true sebenarnya di dalam data, dan log kedua loading: false dan objek baru bernama search, yang merupakan data persis yang ingin kita dapatkan.

Tampilkan Data

Mari menulis beberapa JSX untuk menampilkan data yang diambil.

Karena objek search tidak ada di sana, kita tidak bisa langsung mencoba membuatnya. Oleh karena itu, pertama-tama kita perlu memeriksa apakah kita mengambil data dan objek search siap untuk digunakan.

Untuk melakukan itu, kita hanya akan menggunakan informasi loading yang disediakan di dalam properti data.

Jika loading bernilai true maka kita cukup merender teks Loading, jika tidak data itu sendiri.

Saya menggunakan operator terner ?: untuk ekspresi kondisional inline dasar. Jika loading bernilai true, kita menampilkan Loading, dan jika salah, kita menggunakan fungsi peta untuk beralih melalui array data kita untuk menampilkan informasi di dalam elemen <ul> dan <li>.

Ini hanyalah contoh dasar. Anda dapat menggunakan pernyataan if-else biasa dan mengembalikan hasil yang berbeda untuk metode render Anda.

Anda dapat memeriksa repositori Apollo-Client-with-React, mengkloningnya di komputer Anda, dan bermain-main.

NB: Jangan lupa untuk mengganti variabel token dengan token API Anda sendiri untuk GitHub.

Kesimpulan

Kita membahas cara memulai dengan Apollo Client untuk Bereaksi. Kita memasang modul yang diperlukan, mengatur klien, dan kemudian memberikannya ke komponen kita di bagian atas hirarki komponen. Kita belajar cara menguji GraphQL queri dengan cepat sebelum menerapkannya dalam aplikasi kita yang sebenarnya. Akhirnya, kita mengintegrasikan kueri ke dalam komponen React dan menampilkan data yang diambil.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.