Amalkan pertanyaan GraphQL dengan keadaan API JavaScript

Belajar bagaimana untuk membina API GraphQL boleh menjadi agak mencabar. Tetapi anda boleh belajar cara menggunakan API GraphQL dalam 10 minit! Dan ia berlaku saya mempunyai API yang sempurna untuk itu: jenama baru JavaScript GraphQL State.

Kajian Negeri JavaScript adalah tinjauan tahunan landskap JavaScript. Kami telah melakukannya selama empat tahun sekarang, dan edisi terbaru mencapai lebih dari 20,000 pemaju.

Kami sentiasa bergantung kepada Gatsby untuk membina tapak pameran kami, tetapi sehingga tahun ini, kami memberi makan data kami ke Gatsby dalam bentuk fail YAML statik yang dihasilkan melalui beberapa jenis sihir yang diketahui sebagai manusia semata -mata sebagai "elasticsearch."

Tetapi sejak Gatsby menghilangkan semua sumber data yang dimakannya sebagai Graphql, kita walaupun kita juga boleh melangkau orang tengah dan memberi makan graphql secara langsung! Ya, saya tahu, metafora ini semakin grosser oleh yang kedua dan saya sudah menyesalinya. Maksud saya ialah: Kami membina API GraphQL dalaman untuk data kami, dan sekarang kami menjadikannya tersedia untuk semua orang supaya anda juga dapat mengeksploitasi dataset dengan mudah!

"Tetapi tunggu," kata anda. "Saya telah menghabiskan sepanjang hidup saya mempelajari bilah yang telah meninggalkan saya tidak ada masa untuk belajar GraphQL!" Tidak perlu bimbang: di sinilah artikel ini masuk.

Apa itu Graphql?

Pada terasnya, GraphQL adalah sintaks yang membolehkan anda menentukan data yang anda ingin terima dari API. Perhatikan bahawa saya berkata API , dan bukan pangkalan data. Tidak seperti SQL, pertanyaan GraphQL tidak pergi ke pangkalan data anda secara langsung tetapi ke titik akhir API GraphQL anda yang seterusnya dapat menyambung ke pangkalan data atau sumber data lain.

Kelebihan besar graphQL berbanding paradigma yang lebih lama seperti rehat ialah ia membolehkan anda meminta apa yang anda mahukan. Contohnya:

 pertanyaan {
  pengguna (id: "foo123") {
  nama
 }
}

Akan membawa anda objek pengguna dengan satu medan nama. Juga memerlukan e -mel? Hanya buat:

 pertanyaan {
 pengguna (id: "foo123") {
  nama
  e -mel
 }
}

Seperti yang anda lihat, medan pengguna dalam contoh ini menyokong hujah ID. Dan sekarang kita sampai ke ciri paling hebat GraphQL, bersarang:

 pertanyaan {
 pengguna (id: "foo123") {
  nama
  e -mel
    Catatan { 
      tajuk
      badan
    }
  }
}

Di sini, kami mengatakan bahawa kami ingin mencari jawatan pengguna, dan memuatkan tajuk dan badan mereka. Perkara yang baik mengenai GraphQL ialah lapisan API kami boleh melakukan kerja memikirkan cara untuk mengambil maklumat tambahan dalam format tertentu kerana kami tidak bercakap dengan pangkalan data secara langsung, walaupun ia tidak disimpan dalam format bersarang di dalam pangkalan data sebenar kami.

Sebastian Scholl melakukan pekerjaan yang luar biasa yang menerangkan GraphQL seolah -olah anda menemuinya untuk kali pertama di pengadun koktel.

Memperkenalkan Graphiql

GraphIQL (perhatikan "i" di sana) adalah IDE GraphQL yang paling biasa di luar sana, dan ia adalah alat yang akan kami gunakan untuk meneroka keadaan API JavaScript. Anda boleh melancarkannya sekarang di graphiql.stateofjs.com dan ia akan menyambung secara automatik ke titik akhir kami (iaitu api.stateofjs.com/graphql). UI terdiri daripada tiga elemen utama: panel Explorer, pembina pertanyaan dan panel hasil. Kami kemudiannya akan menambah panel docs untuk itu tetapi mari kita simpannya untuk sekarang.

Tab Explorer adalah sebahagian daripada versi GraphIQL yang dibangunkan dan dikendalikan oleh Turbo. Terima kasih kepada mereka kerana membantu kami mengintegrasikannya. Pastikan anda menyemak repo contoh mereka jika anda ingin menggunakan contoh GraphIQL anda sendiri.

Jangan risau, saya tidak akan membuat anda menulis sebarang kod. Sebaliknya, mari kita mulakan dari pertanyaan GraphQL yang sedia ada, seperti yang sepadan dengan pengalaman pemaju dengan React selama empat tahun yang lalu.

Ingat bagaimana saya katakan kami menggunakan Graphql secara dalaman untuk membina laman web kami? Bukan sahaja kita mendedahkan API, kita juga mendedahkan pertanyaan itu sendiri. Klik butang "Eksport" kecil, salin pertanyaan dalam tab "Graphql", tampalkannya di dalam tetingkap pembina pertanyaan GraphIQL, dan klik butang "Main".

Jika semuanya berjalan mengikut pelan, anda harus melihat data anda muncul dalam panel hasil. Mari luangkan masa untuk menganalisis pertanyaan.

 pertanyaan react_experienceQuery {
  tinjauan (tinjauan: js) {
    alat (id: bertindak balas) {
      id
      entiti {
        Laman Utama
        nama
        github {
          url
        }
      }
      pengalaman {
        Allyears {
          tahun
          Jumlah
          siap {
            hitung
            peratusan
          }
          KesedaranMinterestfaction {
            kesedaran
            minat
            kepuasan
          }
          baldi {
            id
            hitung
            peratusan
          }
        }
      }
    }
  }
}

Pertama datang kata kunci pertanyaan yang mentakrifkan permulaan pertanyaan GraphQL kami, bersama dengan nama pertanyaan, React_ExperienceQuery. Nama pertanyaan adalah pilihan dalam GraphQL, tetapi boleh berguna untuk tujuan debug.

Kami kemudian mempunyai bidang pertama, tinjauan, yang mengambil hujah tinjauan. (Kami juga mempunyai keadaan tinjauan CSS jadi kami perlu menentukan tinjauan yang dipersoalkan.) Kami kemudian mempunyai medan alat yang mengambil hujah ID. Dan segala -galanya selepas itu berkaitan dengan keputusan API untuk alat tertentu itu. Entiti memberi anda maklumat mengenai alat tertentu yang dipilih (contohnya reaksi) manakala pengalaman mengandungi data statistik sebenar.

Sekarang, dan bukannya meneruskan semua bidang di sini, saya akan mengajar anda sedikit helah: Klik Perintah (atau Klik Kawalan ) mana -mana bidang di dalam GraphIQL, dan ia akan membawa panel Dokumen. Tahniah, anda baru sahaja menyaksikan satu lagi helah GraphQL, dokumentasi diri! Anda boleh menulis dokumentasi terus ke definisi API anda dan GraphIQL akan menjadikannya tersedia untuk pengguna akhir.

Menukar pembolehubah

Mari kita tweak sedikit: Dalam pembina pertanyaan, gantikan "React" dengan "Vuejs" dan anda harus melihat satu lagi perkara GraphQL yang sejuk: Penyempurnaan Auto. Ini sangat membantu untuk mengelakkan membuat kesilapan atau menjimatkan masa! Tekan "Main" sekali lagi dan anda akan mendapat data yang sama, tetapi untuk Vue kali ini.

Menggunakan Explorer

Kami kini akan membuka kunci satu lagi alat kuasa GraphQL: The Explorer. Explorer pada dasarnya adalah pokok seluruh API anda yang bukan sahaja membolehkan anda memvisualisasikan strukturnya, tetapi juga membina pertanyaan tanpa menulis satu baris kod! Oleh itu, mari cuba mencipta semula pertanyaan React kami menggunakan penjelajah kali ini.

Pertama, mari kita buka tab penyemak imbas baru dan memuatkan graphiql.stateofjs.com di dalamnya untuk memulakan segar. Klik nod tinjauan di penjelajah, dan di bawahnya nod alat, klik "Main." Medan ID alat harus ditambah secara automatik kepada hasilnya dan - dengan cara - ini adalah masa yang baik untuk menukar nilai argumen lalai ("typescript") untuk "bertindak balas."

Seterusnya, mari terus penggerudian. Sekiranya anda menambah entiti tanpa mana -mana subfield, anda harus melihat garis merah kecil di bawahnya membiarkan anda tahu bahawa anda juga perlu menentukan sekurang -kurangnya satu atau lebih subfields. Jadi, mari tambahkan ID, nama dan laman utama sekurang -kurangnya. Satu lagi helah berguna: anda boleh memberitahu GraphIQL secara automatik untuk menambah semua subfield medan dengan pilihan kawalan mengkliknya di penjelajah.

Seterusnya adalah pengalaman. Terus menambah bidang dan subfield sehingga anda mendapat sesuatu yang mendekati pertanyaan yang anda mulakan pada awalnya disalin dari tapak JavaScript. Mana -mana item yang anda pilih segera dicerminkan di dalam panel pembina pertanyaan. Di sana anda pergi, anda hanya menulis pertanyaan Graphql pertama anda!

Penapisan data

Anda mungkin melihat item penapis ungu di bawah pengalaman. Ini sebenarnya adalah sebab utama mengapa anda ingin menggunakan API GraphQL kami berbanding dengan hanya melayari laman web kami: mana -mana pengagregatan yang disediakan oleh API boleh ditapis oleh beberapa faktor, seperti jantina responden, saiz syarikat, gaji, atau negara.

Kembangkan penapis dan pilih Companysize dan kemudian EQ dan Range_more_than_1000. Anda hanya mengira populariti React di kalangan syarikat besar! Pilih Range_1 sebaliknya dan kini anda boleh membandingkannya dengan datapoint yang sama di kalangan freelancer dan pemaju bebas.

Adalah penting untuk diperhatikan bahawa GraphQL hanya mentakrifkan primitif peringkat yang sangat rendah, seperti bidang dan argumen, jadi EQ, dalam, nin, dan lain-lain, penapis bukanlah sebahagian daripada GraphQL sendiri, tetapi hanya argumen yang telah kami tentukan ketika menubuhkan API. Ini boleh menjadi banyak kerja pada mulanya, tetapi ia memberi anda kawalan penuh ke atas bagaimana pelanggan boleh menanyakan API anda.

Kesimpulan

Mudah -mudahan anda melihat bahawa pertanyaan API GraphQL bukanlah perjanjian yang besar, terutama dengan alat yang hebat seperti GraphIQL untuk membantu anda melakukannya. Sekarang pasti, sebenarnya mengintegrasikan data GraphQL ke dalam aplikasi dunia sebenar adalah perkara lain, tetapi ini kebanyakannya disebabkan oleh kerumitan pengendalian pemindahan data antara klien dan pelayan. Bahagian GraphQL itu sendiri sebenarnya agak mudah!

Sama ada anda berharap untuk memulakan dengan GraphQL atau hanya belajar cukup untuk menanyakan data kami dan tampil dengan beberapa pandangan baru yang luar biasa, saya harap panduan ini akan terbukti berguna!

Dan jika anda berminat untuk mengambil bahagian dalam tinjauan seterusnya kami (yang sepatutnya menjadi keadaan CSS 2020) maka pastikan anda mendaftar untuk senarai mel kami supaya anda dapat diberitahu apabila kami melancarkannya.

Rujukan API JavaScript

Anda boleh mendapatkan lebih banyak maklumat mengenai API (termasuk pautan ke titik akhir sebenar dan repo github) di API.StateOfJS.com.

Berikut adalah glosari cepat istilah yang digunakan di dalam keadaan API JS.

Medan peringkat atas

• Demografi: Kumpulkan semua maklumat demografi seperti jantina, saiz syarikat, gaji, dll.
• Entiti: Memberi akses kepada maklumat lanjut mengenai "entiti" tertentu (Perpustakaan, Rangka Kerja, Bahasa Pengaturcaraan, dan lain -lain).
• Ciri: Data penggunaan untuk ciri JavaScript atau CSS tertentu.
• Ciri -ciri: Sama, tetapi merentasi pelbagai ciri.
• Matriks: Memberi akses kepada data yang digunakan untuk mengisi heatmaps rentas silang kami.
• Pendapat: Data pendapat untuk soalan tertentu (misalnya "Adakah anda fikir JavaScript bergerak ke arah yang betul?").
• LainTools: Data untuk bahagian "Alat Lain" (editor teks, penyemak imbas, bundlers, dll.).
• Sumber: Data untuk bahagian "Sumber" (tapak, blog, podcast, dll.).
• Alat: Pengalaman data untuk alat tertentu (perpustakaan, rangka kerja, dan lain -lain).
• Alat: Sama, tetapi merentasi pelbagai alat.
• ToolSrankings: Kedudukan (kesedaran, minat, kepuasan) merentasi pelbagai alat.

Bidang biasa

• Penyiapan: Perkadaran responden tinjauan menjawab sebarang soalan yang diberikan.
• Baldi: Arahan yang mengandungi data sebenar.
• Tahun/Allyears: Sama ada untuk mendapatkan data untuk tahun tinjauan tertentu; atau array yang mengandungi semua tahun.

Atas ialah kandungan terperinci Amalkan pertanyaan GraphQL dengan keadaan API JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!