Xo'sh, men eshitadigan GraphQL nimasi?

Agar siz menga o'xshasangiz, ehtimol siz yangi texnologiyalar haqida eshitganingizda uch bosqichdan o'tishingiz mumkin:

1. Ishdan bo'shatish

Yana bitta JavaScript kutubxonasi ?! JQuery-dan allaqachon foydalaning!

2. Qiziqish

Hmm, ehtimol men eshitayotgan yangi kutubxonani tekshirishim kerak ...

3. Vahima

Yordam bering! Men hozir ushbu yangi kutubxonani o'rganib chiqishim kerak yoki men butunlay eskiraman!

Ushbu tezkor davrda aqli rasolikni saqlashning hiylasi, sizning qiziqishingiz pasaygan bir paytda, lekin siz hali ham oldinda bo'lganingizda, ikkinchi va uchinchi bosqichlar o'rtasida yangi narsalarni o'rganishdir.

Shuning uchun endi siz GraphQL-ning haqiqatan ham nima ekanligini eshitish uchun eng yaxshi vaqt.

Asoslar

Xulosa qilib aytganda, GraphQL bu ma'lumotni qanday so'rashni tavsiflovchi va odatda serverdan mijozga ma'lumotlarni yuklash uchun foydalaniladigan sintaksis. GraphQL uchta asosiy xususiyatga ega:

  • Bu mijozga aniq ma'lumot kerakligini aniqlashga imkon beradi.
  • Bir nechta manbalardan ma'lumotlarni to'plashni osonlashtiradi.
  • Ma'lumotni tavsiflash uchun tip tizimidan foydalanadi.

Xo'sh, GraphQL qanday boshlandi? Bu amalda nimaga o'xshaydi? Va uni qanday ishlatishni boshlaysiz? Buni bilish uchun o'qing!

Muammo

GraphQL katta eski Facebook-da boshlandi, ammo undan ham sodda dasturlar odatiy REST API-larining cheklanishiga duch kelishi mumkin.

Masalan, siz postlar ro'yxatini ko'rsatishingiz kerakligini tasavvur qiling va har bir post ostidagi yoqtirishlar ro'yxati, shu jumladan foydalanuvchi nomlari va avatarlar. Etarlicha oson, siz o'zingizning ob'yektlaringizni o'z ichiga olgan ob'yektlarni o'z ichiga olgan yoqimli qatorlarni qo'shish uchun o'zingizning API-laringizni chayqaysiz:

Ammo, endi mobil ilovangizda ishlash vaqti keldi va barcha qo'shimcha ma'lumotlarning yuklanishi sekinlashmoqda. Shunday qilib, endi sizga ikkita nuqta kerak, bittasi yoqimli, ikkinchisi esa ularsiz.

Endi aralashmaga yana bir omil qo'shing: xabarlar MySQL ma'lumotlar bazasida saqlanayotgan bo'lsa, boshqa tomondan Redis do'konida yoqadi! Hozir nima qilyapsan?!

Ushbu stsenariyni Facebook'ning ko'plab ma'lumot manbalari va API mijozlari boshqarishi kerak bo'lgan narsalarga ekstrapolyatsiya qiling va nima uchun yaxshi eski REST API'lari o'z chegaralarini ko'rsatishni boshlaganini tasavvur qilishingiz mumkin.

Qaror

Facebook tomonidan ishlab chiqilgan yechim g'oyaviy jihatdan juda sodda: bir nechta "soqov" so'nggi nuqtalarga ega bo'lish o'rniga, murakkab so'rovlarni qabul qiladigan yagona "aqlli" nuqta bilan ishlating, so'ngra ma'lumotlarni mijoz tomonidan talab qilinadigan shaklda massaj qiling.

Amalda aytganda, GraphQL qatlami mijoz bilan bir yoki bir nechta ma'lumot manbalari o'rtasida yashaydi, mijoz so'rovlarini qabul qiladi va sizning ko'rsatmalaringizga muvofiq kerakli ma'lumotlarni oladi. Xijolat bo'ldimi? Metafora vaqti!

Eski REST modeli pitssa buyurtma qilish, keyin oziq-ovqat mahsulotlarini etkazib berish, keyin quruq tozalagichni kiyimingizni olishga chaqirishga o'xshaydi. Uchta do'kon, uchta telefon qo'ng'irog'i.

Boshqa tomondan GraphQL bu shaxsiy yordamchiga ega bo'lishdir: uchta manzilga manzillarni berganingizdan so'ng, siz o'zingiz xohlagan narsani so'rashingiz mumkin ("menga quruq tozalash, katta pitssa va yigirma tuxumni bering") ) va ularning qaytishini kuting.

Boshqacha aytganda, GraphQL ushbu sehrli shaxsiy yordamchi bilan suhbatlashish uchun standart tilni yaratadi.

Google Images-ga ko'ra, odatiy shaxsiy yordamchi sakkiz qurolli musofir

Amalda, GraphQL API uchta asosiy qurilish bloklari atrofida tashkil etilgan: sxema, so'rovlar va echimlar.

So'rovlar

GraphQL shaxsiy yordamchisiga qilgan so'rovingiz so'rov bo'lib, u quyidagicha ko'rinadi:

so'rov {
  narsalar
}

Biz so'rovning kalit so'zidan foydalangan holda yangi so'rovni e'lon qilamiz, keyin o'z nomini kiritadigan maydonni so'raymiz. GraphQL so'rovlarining eng yaxshi tomoni shundaki, ular ichki maydonlarni qo'llab-quvvatlaydi, shuning uchun biz bir darajaga chuqurroq kirishimiz mumkin:

so'rov {
  narsalar {
    tuxum
    ko'ylak
    pizza
  }
}

Ko'rinib turibdiki, so'rovni amalga oshirayotgan mijoz ma'lumotlarning qaysi "do'koni" dan kelishi haqida qayg'urishi shart emas. Faqat kerakli narsani so'rang va GraphQL serverining qolganlariga g'amxo'rlik qilishga ruxsat bering.

Shuni ta'kidlash kerakki, so'rov maydonlari qatorlarni ko'rsatishi mumkin. Masalan, xabarlar ro'yxatini so'rashda odatiy hol:

so'rov {
  xabarlar {# bu qator
    sarlavha
    tanasi
    muallif {# biz chuqurroq borishimiz mumkin!
      nomi
      avatarUrl
      profilUrl
    }
  }
}

So'rov maydonchalari ham argumentlarni qo'llab-quvvatlaydi. Agar men ma'lum bir xabarni namoyish qilmoqchi bo'lsam, men pochta maydoniga id dalilini qo'sha olaman:

so'rov {
  post (id: "123foo") {
    sarlavha
    tanasi
    muallif {
      nomi
      avatarUrl
      profilUrl
    }
  }
}

Va nihoyat, agar men bu argumentni dinamik qilmoqchi bo'lsam, men o'zgaruvchini aniqlab, so'rov ichida qayta ishlatishim mumkin (biz bu erda so'rovni ham nomlaymiz).

getMyPost so'rovi ($ id: String) {
  post (id: $ id) {
    sarlavha
    tanasi
    muallif {
      nomi
      avatarUrl
      profilUrl
    }
  }
}

Bularning barchasini amalda qo'llashning yaxshi usuli bu GitHub-ning GraphQL API Explorer-dan foydalanish. Masalan, quyidagi so'rovni sinab ko'ring:

so'rov {
  omborxona (egasi: "graphql", nomi: "graphql-js") {
    nomi
    tavsifi
  }
}
GraphQL avtoto`ldirish amalda

Ta'rif ostida yangi maydon nomini kiritishga harakat qilayotganingizda, IDE avtomatik ravishda GraphQL API-dan avtomatik ravishda to'ldirilgan maydon nomlarini taklif qiladi. Pokiza!

GraphQL so'rovining anatomiyasi

GraphQL so'rovlari haqida ko'proq ma'lumotni GraphQL Query maqolasining ajoyib anatomiyasidan olishingiz mumkin.

Resolverlar

Hatto dunyodagi eng yaxshi shaxsiy yordamchi ham siz manzil ko'rsatmasangiz, borib tozalashingiz mumkin emas.

Shunga o'xshab, GraphQL serveringiz so'rovni aniqlagich yordamida aytmasangiz nima qilish kerakligini bilmaydi.

Tasdiqlovchi GraphQL-ga ushbu maydonga mos keladigan ma'lumotlarni qanday va qayerdan olish kerakligini aytadi. Masalan, yuqoridagi postlar uchun echim qanday ko'rinishga ega (Apollon GraphQL-Tools sxemasi generatoridan foydalangan holda):

So‘rov: {
  post (root, args) {
    qaytish Posts.find ({id: args.id});
  }
}

Biz Query-ga o'rnatuvchini joylashtirmoqdamiz, chunki biz to'g'ridan-to'g'ri ildiz darajasida postlarni so'rashni xohlaymiz. Ammo, shuningdek, sub-maydonlar uchun echimlarga ega bo'lishingiz mumkin, masalan, xabar muallifining maydoni:

So‘rov: {
  post (root, args) {
    qaytish Posts.find ({id: args.id});
  }
},
Xabar: {
  muallif (post) {
    Return Users.find ({id: post.authorId})
  }
}

Va esda tutingki, sizning hal qiluvchilaringiz ma'lumotlar bazasi hujjatlarini qaytarish bilan cheklanmaydi. Masalan, ehtimol sizning xabar turingizga sharhlar qo'shishni xohlaysiz:

Xabar: {
  muallif (post) {
    Return Users.find ({id: post.authorId})
  },
  commentCount (post) {
    return comment.find ({postId: post.id}). count ()
  }
}

Bu erda tushunish kerak bo'lgan asosiy tushuncha GraphQL yordamida sizning API sxemangiz va ma'lumotlar bazangiz sxemalari ajratiladi. Boshqacha qilib aytganda, bizning ma'lumotlar bazamizda biron bir muallif va sharhlarCount maydonchalari bo'lmasligi mumkin, ammo biz ularni hal qiluvchilar kuchi bilan "taqlid qilishimiz" mumkin.

O'zingiz ko'rganingizdek, xohlagan kodni yozuvchiga yozishingiz mumkin. Shuning uchun siz ularni ma'lumotlar bazangiz tarkibini o'zgartirishga majbur qilishingiz mumkin, bu holda ular mutatsiyaga qarshi echimlar deb nomlanadi.

Sxema

Bu yaxshi narsalarning barchasi GraphQL-ning yozilgan sxemalar tizimi yordamida mumkin. Bugungi maqsadim - bu batafsil ma'lumot berishdan tashqari, qisqacha ma'lumot berishdir, shuning uchun men bu erda batafsil ma'lumot bermayman.

Agar ko'proq ma'lumot olishni istasangiz, GraphQL hujjatlarini ko'rib chiqishingizni so'rayman.

tez-tez so'raladigan savollar

Bir nechta umumiy savollarga javob berish uchun tanaffus qilaylik.

Siz orqa tarafdasiz. Ha, siz. Biror narsa so'ramoqchi ekanligingizni ko'rib turibman. Oldinga boring, uyalmang!

GraphQL va grafik ma'lumotlar bazalari o'rtasida qanday bog'liqlik bor?

Aslida GraphQL-ning Neo4j kabi grafik ma'lumotlar bazalari bilan hech qanday aloqasi yo'q. "Grafika" qismi sizning API grafigingizda maydonlar va pastki maydonlardan foydalanib o'tish g'oyasidan kelib chiqadi; "QL" so'zi "so'rovlar tili" ni anglatadi.

Men RESTdan juda mamnunman, nega GraphQL-ga o'tishim kerak?

Agar siz hali ham GraphQL murojaat qiladigan REST og'riqli nuqtalariga murojaat qilmagan bo'lsangiz, demak, bu yaxshi narsa!

GraphQL-ni REST-dan foydalanish ehtimol sizning ilovangizning umumiy tajribasiga ta'sir qilmaydi, shuning uchun unga o'tish hech qanday holatda hayot yoki o'lim masalasi emas. Agar sizga biron bir imkoniyat bo'lsa, men GrafQL-ni kichik loyihada sinab ko'rishni maslahat beraman.

GraphQL-dan React / Relay / * bu erda kutubxonani qo'shmasdan foydalanishim mumkinmi?

Ha sen qila olasan! GraphQL shunchaki o'ziga xos xususiyat bo'lganligi sababli, siz istalgan platformadagi istalgan kutubxonada, mijoz bilan (masalan, Apollonda veb, iOS, burchak va boshqalar uchun GraphQL mijozlari mavjud) yoki GraphQL-ga o'z qo'ng'iroqlaringiz bilan foydalanishingiz mumkin. server.

GraphQL Facebook tomonidan yaratilgan va men Facebookga ishonmayman

Shunga qaramay, GraphQL - bu spetsifikatsiya, ya'ni siz Facebook tomonidan yozilgan bitta satr kodini ishlatmasdan GraphQL dasturlaridan foydalanishingiz mumkin.

Va Facebook-ning qo'llab-quvvatlashi shubhasiz GraphQL ekotizimi uchun yoqimli qo'shimcha hisoblanadi, shu bilan birga, menimcha, Facebook hatto undan foydalanishni to'xtatsa ham, GraphQL gullab-yashnashi uchun hamjamiyat juda katta.

Butun "mijozga kerakli ma'lumotlarni so'rashiga ruxsat bering" biznesi menga unchalik xavfsiz emas ...

O'zingizning shaxsiy rezolyutsiyalaringizni yozganingiz sababli, ushbu darajadagi xavfsizlik bilan bog'liq barcha muammolarni hal qilish sizga bog'liq.

Masalan, agar siz mijozga qabul qilinadigan hujjatlar sonini boshqarish uchun chegara parametrini belgilashga ruxsat bersangiz, ehtimol, mijozlar millionlab hujjatlarni qayta-qayta talab qiladigan, xizmat ko'rsatish tarzidagi xujumlarning oldini olish uchun ushbu raqamni kiritishni xohlaysiz.

Xo'sh, nimani boshlashim kerak?

Umuman olganda, GraphQL-ga asoslangan dasturni ishga tushirish uchun sizga kamida ikkita komponent kerak bo'ladi:

  • API-ga xizmat qiladigan GraphQL serveri.
  • Sizning oxirgi nuqtangizga ulanadigan GraphQL mijoz.

Mavjud turli xil variantlar haqida ko'proq bilish uchun o'qing.

Endi siz GraphQL qanday ishlashi haqida xolis tasavvurga ega bo'lsangiz, keling, kosmosdagi asosiy o'yinchilar haqida gaplashaylik.

GraphQL serverlari

Sizga kerak bo'ladigan birinchi g'isht - bu GraphQL serveri. GraphQL o'zi shunchaki aniqlikdir, shuning uchun bu bir necha raqobatdosh dasturlarga eshikni ochiq qoldiradi.

GraphQL-JS (tugun)

Bu GraphQL-ning asl mos yozuvlaridir. API serveringizni yaratish uchun siz uni express-grafql bilan birga ishlatishingiz mumkin.

GraphQL-server (tugun)

Apollo jamoasi shuningdek, o'zlarining yakka tartibdagi GraphQL serverlarini amalga oshiradilar. U hali asl nusxadagi kabi keng tarqalmagan, ammo juda yaxshi hujjatlashtirilgan va qo'llab-quvvatlanadi va tezda joy egallaydi.

Boshqa platformalar

GraphQL.org boshqa har xil platformalar uchun (PHP, Ruby va boshqalar) GraphQL dasturlarining ro'yxatiga ega.

GraphQL mijozlari

Siz o'zingizning GraphQL API-ni bevosita mijozlar uchun maxsus kutubxonaga ehtiyoj sezmasdan so'rashingiz mumkin, ammo bu albatta hayotingizni osonlashtirishi mumkin.

O'rnimizni

Relay - bu Facebook-ning GraphQL o'ziga xos vositasi. Men uni o'zim ishlatmaganman, lekin men eshitgan narsalardan asosan Facebook-ning ehtiyojlariga moslashtirilgan va ko'pgina foydalanish uchun biroz o'ylab topilgan bo'lishi mumkin.

Apollon mijozi

Bu makonda yangi ishtirokchi - Apollon va u tezda egallab olinadi. Oddiy Apollon mijozlar to'plami ikkita g'ishtdan iborat:

  • Brauzerda GraphQL so'rovlarini ishga tushirish va ularning ma'lumotlarini saqlashga imkon beradigan Apollo-mijoz (shuningdek, o'zining devtools kengaytmasi mavjud).
  • Tanlashning oldingi doirasi uchun ulagich (React-Apollo, Angular-Apollo va boshqalar).

Odatdagidek, Apollo-mijoz Redux-dan foydalanib o'z ma'lumotlarini saqlaydi, bu juda yaxshi, chunki Redux o'zi boy ekotizimga ega bo'lgan davlat boshqaruvi kutubxonasi.

Apollo Devtools Chrome kengaytmasi

Ochiq manbali ilovalar

GraphQL ancha yangi bo'lsa-da, lekin undan foydalanadigan ba'zi istiqbolli ochiq manbali dasturlar mavjud.

VulcanJS

Birinchidan, men voz kechish: Men VulcanJS-ning etakchisiman. Men VulcanJS-ni odamlarga React / GraphQL stack kuchidan foydalanishga imkon berish uchun yaratdim. Siz buni "Zamonaviy veb-ekotizim uchun relslar" deb hisoblashingiz mumkin, bu sizga bir necha soat ichida CRUD dasturlarini (masalan, Instagram klonini) yaratishga imkon beradi.

Gatsbi

Gatsby - bu React statik sayt yaratuvchisi bo'lib, hozirda 1.0 versiyasidan boshlab GraphQL tomonidan quvvatlanadi. Avvaliga bu g'alati kombinatsiya kabi ko'rinishi mumkin bo'lsa-da, aslida juda kuchli. Qurilish jarayonida Gatsby bir nechta GraphQL API-laridan ma'lumotlarni yuklab olishi va ulardan foydalanuvchini to'liq statik reaktiv ilovasini yaratish uchun ishlatishi mumkin.

Boshqa GraphQL vositalari

GrafiQL

GraphiQL bu GrafQL so'nggi nuqtalarini so'rash uchun juda qulay brauzerdagi IDE.

GrafiQL

DataLoader

GraphQL so'rovlarining ichki joylashtirilganligi sababli, bitta so'rov osongina o'nlab ma'lumotlar bazasiga qo'ng'iroqlar chaqirishi mumkin. Unumdorlikni oshirishga yo'l qo'ymaslik uchun siz Facebook tomonidan ishlab chiqilgan DataLoader kabi yuklash va keshlash kutubxonasidan foydalanishingiz mumkin.

GraphQL serverini yarating

Yaratish GraphQL Server - bu tugun serveri va Mongo ma'lumotlar bazasi tomonidan ishlaydigan GraphQL serverini tezda tortib olishni osonlashtiradigan buyruq qatori yordamchi dasturi.

GraphQL-up

GraphQL Serverini yaratish singari, GraphQL-up GraphCool xizmati tomonidan ishlaydigan yangi GraphQL-ni tezda yuklashga imkon beradi.

GraphQL xizmatlari

Va nihoyat, bir nechta "GraphQL-backend-as-service" kompaniyalari mavjud bo'lib, ular sizning narsalaringizning butun server tomoniga g'amxo'rlik qiladi va bu sizning barmoqlaringizni GraphQL ekotizimiga botirishning yaxshi usuli bo'lishi mumkin.

Grafcool

GrafikQL va AWS Lambda-ni birlashtirgan va ishlab chiquvchilarning bepul rejasi bilan moslashuvchan orqa platforma.

Scaphold

Xizmat sifatida GraphQL-ning boshqa versiyasi ham mavjud, u ham bepul rejaga ega. Grafcool bilan bir xil funktsiyalarni taklif etadi.

GraphQL-da ishlashingiz mumkin bo'lgan juda ko'p joylar mavjud.

GraphQL.org

Rasmiy GraphQL sizni boshlash uchun juda yaxshi hujjatlarga ega.

LearnGraphQL

LearnGraphQL - bu Kadira shahridagi odamlar tomonidan yig'ilgan interfaol kurs.

LearnApollo

LearnGraphQL-ni yaxshi o'rganish, LearnApollo Graphcool tomonidan yaratilgan bepul kurs.

Apollon Blogi

Apollo blogida Apollon va GraphQL haqida juda ko'p yozilgan va yaxshi yozilgan postlar mavjud.

GraphQL haftalik

Grafikol jamoasi tomonidan ishlangan GraphQL haqida barcha yangiliklar.

Hashbang Haftalik

GraphQL-ga qo'shimcha ravishda React va Meteor-ni qamrab oladigan yana bir ajoyib nashr.

Freecom

GraphQL-dan foydalanib Interkom-klonni qanday yaratishni sizga o'rgatadigan darsliklar.

Ajoyib GraphQL

GraphQL havolalari va manbalarining to'liq ro'yxati.

Xo'sh, yangi olingan GraphQL bilimingizni amalda qanday qo'llaysiz? Siz sinab ko'rishingiz mumkin bo'lgan bir nechta retseptlar.

Apollo + Graphcool + Next.js

Agar siz Next.js va React bilan allaqachon tanish bo'lgan bo'lsangiz, ushbu misol Graphcool-dan foydalanib GraphQL-ning so'nggi nuqtasini o'rnatishga va Apollon-dan foydalanib so'rashga imkon beradi.

VulcanJS

Vulcan o'quv qo'llanmasi oddiy GraphQL ma'lumotlar qatlamini o'rnatish orqali sizni serverda ham, mijozda ham ishlaydi. Vulkan bir-biri uchun yagona platforma bo'lgani uchun, sozlashsiz boshlashning yaxshi usuli. Agar sizga yordam kerak bo'lsa, Slack kanalimizga tushishdan tortinmang!

GraphQL & React qo'llanmasi

Chroma blogida tarkibiy qismlarga asoslangan ishlab chiqishga asoslangan React / GraphQL dasturini yaratish bo'yicha olti qismli qo'llanma mavjud.

Xulosa

Dastlab GraphQL murakkab bo'lib tuyulishi mumkin, chunki bu zamonaviy rivojlanishning ko'plab sohalarida qo'llaniladigan texnologiya. Ammo agar siz asosiy tushunchalarni tushunishga vaqt ajratsangiz, menimcha, ko'plari shunchaki mantiqiy bo'ladi.

Haqiqatan ham uni ishlatasizmi yoki yo'qmi, men GraphQL bilan tanishishga vaqt ajratishingizga to'g'ri keladi. Ko'proq kompaniyalar va ramkalar uni qabul qilmoqdalar va bu keyingi bir necha yil ichida Internetning asosiy qurilish qismlaridan biriga aylanishi mumkin.

Rozimanmi? Rozimisiz? Savollar? Faqat sharhlarda menga xabar bering. Agar sizga ushbu maqola yoqqan bo'lsa, iltimos uni baham ko'ring va baham ko'ring!