Réamhrá ar GraphQL: conas a oibríonn sé agus conas é a úsáid

Grianghraf le Matt Duncan ar Unsplash

Is teanga fiosrúcháin é GraphQL do APIs. Taispeántar na cineálacha éagsúla sonraí a sholáthraíonn an freastalaí, agus ansin is féidir leis an gcliant na rudaí is mian leo a roghnú.

I GraphQL, is féidir leat acmhainní iolracha freastalaí a fháil in aon ghlao amháin seachas glaonna iolracha REST API a dhéanamh.

Is féidir liosta iomlán na sochar a fháil ag https://graphql.org/.

Is é an rud, go dtí go bhfeiceann tú GraphQL i ngníomh, tá sé deacair na buntáistí a thuiscint. Mar sin, tosaímid ag úsáid GraphQL.

San alt seo, beimid ag úsáid GraphQL in éineacht le NodeJS.

Riachtanais

Suiteáil NodeJS as seo: https://nodejs.org/en/.

Conas GraphQL a úsáid le NodeJs

Is féidir GraphQL a úsáid le go leor teangacha. Táimid ag díriú anseo ar conas is féidir linn GraphQL a úsáid le JavaScript ag úsáid NodeJS.

Cruthaigh fillteán ar a dtugtar graphql-with-nodejs. Téigh chuig fillteán an tionscadail agus rith npm init chun an tionscadal NodeJS a chruthú. Tugtar an t-ordú dó seo thíos.

cd graphql-with-nodejs npm init

Suiteáil na spleáchais

Suiteáil Express leis an ordú seo a leanas:

npm shuiteáil sainráite

Suiteáil GraphQL leis an ordú seo a leanas. Suiteáilfimid GraphQL agus GraphQL do Express.

npm shuiteáil express-graphql graphql

Cód NodeJS

Cruthaigh comhad ar a dtugtar server.js sa tionscadal agus cóipeáil an cód seo a leanas isteach ann:

const express = a cheangal ('sainráite'); port const = 5000; app const = sainráite (); app.get ('/ hello', (req, res) => {res.send ("dia duit");}); app.listen (port); console.log (`Tá an freastalaí ag rith ar localhost: $ {port}`);

Tá críochphointe amháin HTTP GET ag an gcód thuas ar a dtugtar / Dia duit.

Cruthaítear an críochphointe le Express.

Anois déanaimis an cód seo a athrú chun GraphQL a chumasú.

Cumasaigh GraphQL sa chód

Tá críochphointe URL amháin ag GraphQL ar a dtugtar / graphql a dhéileálann le gach iarratas.

Cóipeáil an cód seo a leanas isteach i server.js:

// faigh na leabharlanna riachtanacha go léir sainráite = éilíonn ('sainráite'); const graphqlHTTP = a cheangal ('express-graphql'); const {GraphQLSchema} = a cheangal ('graphql'); const {queryType} = a cheangal ('./ query.js'); // uimhir an chalafoirt agus an aip sainráite const port = 5000 a bhunú; app const = sainráite (); // Sainmhínigh an scéimre const schema = nua GraphQLSchema ({query: queryType}); // Freastalaí GraphQL an nód app.use ('/ graphql', graphqlHTTP ({schema: schema, graphiql: true,}) a bhunú); app.listen (port); console.log (Tá `Freastalaí GraphQL ag rith ar localhost: $ {port}`);

Anois, déanaimis dul tríd an gcód seo.

Le graphqlHTTP is féidir linn freastalaí GraphQL a bhunú faoi / graphql url. Tá a fhios aige conas déileáil leis an iarraidh isteach.

Déantar an socrú seo sna línte cód seo a leanas:

app.use ('/ graphql', graphqlHTTP ({schema: schema, graphiql: fíor,}));

Anois déanaimis scrúdú ar na paraiméadair i ngrafqlHTTP.

grafiql

Is comhéadan úsáideora gréasáin é graphiql is féidir leat a úsáid chun críochphointí GraphQL a thástáil. Táimid fíor chun é a dhéanamh níos éasca na críochphointí éagsúla GraphQL a chruthaigh muid a thástáil.

Scéim

Níl ach críochphointe / grafql seachtrach amháin ag GraphQL. Is féidir go mbeadh roinnt críochphointí eile ag an gcríochphointe seo a chomhlíonann tascanna éagsúla. Shonrófaí na críochphointí seo sa scéim.

Dhéanfadh an scéim na rudaí seo a leanas:

  • Cuir na críochphointí ar fáil
  • Cuir isteach na réimsí ionchuir agus aschuir don phointe deiridh
  • Sonraigh cén gníomh atá le déanamh nuair a shroichtear críochphointe, agus mar sin de.

Sainmhínítear an scéim sa chód mar seo a leanas:

const schema = nua GraphQLSchema ({query: queryType});

Is féidir cineálacha fiosrúcháin agus sóchán a bheith sa scéimre. Díríonn an t-alt seo ar an gcineál ceiste amháin.

Ceist

Feiceann tú sa scéimre go bhfuil an fiosrúchán socraithe chun queryType.

Allmhairímid queryType ón gcomhad query.js leis an ordú seo a leanas:

const {queryType} = a cheangal ('./ query.js');

Is comhad saincheaptha é query.js a chruthóimid go gairid.

I gceist, sonraímid na críochphointí inléite amháin i scéimre.

Cruthaigh comhad darb ainm query.js sa tionscadal agus cóipeáil an cód seo a leanas isteach ann.

const {GraphQLObjectType, GraphQLString} = a cheangal ('graphql'); // Sainmhínigh an cheist const queryType = nua GraphQLObjectType ({ainm: 'Ceist', réimsí: {Dia duit: {Cineál: GraphQLString, réiteach: feidhm () {seol "Hello World";}}}}); export.queryType = queryType;

Ceist a Mhíniú

cruthaítear queryType mar GraphQLObjectType agus tugtar Ceist air.

Sna réimsí sainmhínímid na críochphointí éagsúla.

Mar sin anseo cuirimid críochphointe ar a dtugtar "Dia duit".

Tá cineál GraphQLString ag Dia duit, rud a chiallaíonn go bhfuil cineál sreangáin fillte ag an gcríochphointe seo. Is é an cineál GraphQLString in ionad Teaghrán toisc gur scéimre GraphQL é. Mar sin ní oibreoidh go díreach le sreang.

Sonraíonn an athscríobh an gníomh a chaithfear a dhéanamh nuair a ghlaoitear an críochphointe. Is é an gníomh anseo sreangán "Hello World" a thabhairt ar ais.

Faoi dheireadh, déanaimid an cineál fiosrúcháin a onnmhairiú le export.queryType = queryType. Déantar é seo chun a chinntiú gur féidir linn é a iompórtáil isteach i server.js.

Rith an feidhmchlár

Rith an feidhmchlár leis an ordú seo a leanas:

Nód Server.js.

Ritheann an feidhmchlár ar localhost: 5000 / graphql.

Is féidir leat an feidhmchlár a thástáil trí dhul chuig localhost: 5000 / graphql.

Ritheann an URL seo comhéadan úsáideora gréasáin Graphiql mar a thaispeántar sa scáileán seo a leanas.

Tá an t-ionchur ar chlé agus an t-aschur ar dheis.

Iontráil an iontráil seo a leanas

{Dia duit}

Mar thoradh air seo tá an t-aschur seo a leanas

{"Dátaí": {"Dia duit": "Dia duit an Domhan"}}

Comhghairdeas

Tá do chéad chríochphointe GraphQL cruthaithe agat.

Cuir níos mó críochphointí leis

Cruthóimid dhá chríochphointe nua:

  • scannán: Filleann an críochphointe seo scannán leis an ID scannáin sonraithe
  • Stiúrthóir: Tugann an críochphointe seo stiúrthóir ar ais le haitheantas an stiúrthóra. Cuirtear gach scannán ón stiúrthóir seo ar ais freisin.

Cuir sonraí leis

De ghnáth, léann feidhmchlár sonraí ó bhunachar sonraí. Sa rang teagaisc seo, ar mhaithe le simplíocht, déanfaimid na sonraí a chódú go crua sa chód féin.

Cruthaigh comhad darb ainm data.js agus cuir an cód seo a leanas leis.

// Cód crua roinnt sonraí maidir le scannáin agus stiúrthóirí Let Films = [{id: 1, Ainm: "Scannán 1", Bliain: 2018, stiúrthóirId: 1}, {id: 2, Ainm: "Scannán 2", Bliain: 2017 , stiúrthóirId: 1}, {id: 3, Ainm: "Scannán 3", Bliain: 2016, stiúrthóirId: 3}]; lig stiúrthóirí = [{id: 1, Ainm: "Stiúrthóir 1", Aois: 20}, {id: 2, Ainm: "Stiúrthóir 2", Aois: 30}, {id: 3, Ainm: "Stiúrthóir 3", Aois: 40}]; export.ovies = scannáin; export.directors = stiúrthóirí;

Tá na sonraí scannáin agus stiúrthóra sa chomhad seo. Úsáidfimid na sonraí sa chomhad seo le haghaidh ár gcríochphointí.

Cuir críochphointe an scannáin leis an gceist

Cuirtear na críochphointí nua le queryType sa chomhad query.js.

Taispeántar an cód le haghaidh críochphointe an scannáin thíos:

Scannán: {type: movieType, argóintí: {id: {type: GraphQLInt}}, cinneadh: feidhm (foinse, argóintí) {filleadh _.find (scannáin, {id: args.id}); }}

Is é an cineál tuairisceáin an críochphointe seo ná movieType, a shainmhíneofar go gairid.

Sonraíonn an paraiméadar args an t-ionchur do chríochphointe an scannáin. Is é an t-ionchur don chríochphointe seo ná id de chineál GraphQLInt.

Filleann an fheidhm réitigh an scannán a fhreagraíonn don ID ón liosta scannáin. Is feidhm ón leabharlann lóisteála é find a úsáidtear chun eilimint a fháil ar liosta.

Tá an cód iomlán le haghaidh query.js liostaithe thíos:

const {GraphQLObjectType, GraphQLString, GraphQLInt} = a cheangal ('graphql'); const _ = a cheangal ('lodash'); const {movieType} = a cheangal ('./ types.js'); lig {movies} = a cheangal ('./ data.js'); // Sainmhínigh an cheist const queryType = nua GraphQLObjectType ({ainm: 'Ceist', réimsí: {Dia duit: {Cineál: GraphQLString, réiteach: feidhm () {seol "Hello World";}}, Scannán: {Cineál: movieType, Argóintí: {id: {type: GraphQLInt}}, cinneadh: feidhm (foinse, argóintí) {filleadh _.find (scannáin, {id: args.id});}}}}); export.queryType = queryType;

Ón gcód thuas is féidir linn a fheiceáil go bhfuil movieType sainmhínithe i ndáiríre i gcineálacha.js.

Cuir an cineál saincheapthaTeipe leis

Cruthaigh comhad ar a dtugtar types.js.

Cuir an cód seo a leanas i gcineálacha.js

const {GraphQLObjectType, GraphQLID, GraphQLString, GraphQLInt} = a cheangal ('graphql'); // Sainmhínigh cineál scannáin movieType = nua GraphQLObjectType ({ainm: "Scannán", réimsí: {id: {type: GraphQLID}, ainm: {type: GraphQLString}, bliain: {type: GraphQLInt}, DirectorId: {type: GraphQLID} }}); export.ovieType = movieType;

Is féidir a fheiceáil go gcruthófar movieType mar GraphQLObjectType.

Tá 4 réimse aige: id, ainm, bliain agus stiúrthóirId. Sonraítear na cineálacha do gach ceann de na réimsí seo freisin nuair a chuireann tú iad.

Tagann na réimsí seo go díreach ó na sonraí. Sa chás seo beidh sé ón liosta scannáin.

Cuir an cheist agus an cineál le haghaidh críochphointe an Stiúrthóra

Mar aon leis an scannán, is féidir críochphointe an stiúrthóra a chur leis.

I gceist.js, is féidir críochphointe an stiúrthóra a chur leis mar a leanas:

Stiúrthóir: {type: DirectorType, argóintí: {id: {type: GraphQLInt}}, cinneadh: feidhm (foinse, argóintí) {filleadh _.find (stiúrthóirí, {id: args.id}); }}

Is féidir stiúrthóirType a chur le type.js mar seo a leanas:

// Sainmhínigh Cineál Stiúrthóra DirectorType = nua GraphQLObjectType ({Ainm: "Stiúrthóir", réimsí: {id: {type: GraphQLID}, ainm: {type: GraphQLString}, aois: {type: GraphQLInt}, scannáin: {type: GraphQLList nua (movieType), cinneadh (foinse, argóintí) {filleadh _.filter (scannáin, {DirectorId: source.id});}}}});

Fan nóiméad Tá an stiúrthóirType beagáinín difriúil ó movieType. Cén fáth é sin?

Cén fáth go bhfuil feidhm réitigh i stiúrthóirType? Go dtí seo chonaiceamar nach raibh feidhmeanna réitigh ar fáil ach sa cheist ...

Speisialtacht an stiúrthóraTéip

Nuair a ghlaoitear críochphointe an stiúrthóra, ní mór dúinn sonraí an stiúrthóra agus aon scannáin a d’ordaigh an stiúrthóir a thabhairt ar ais.

Tá na chéad 3 réimse id, ainm, aois i stiúrthóirType simplí agus tagann siad go díreach ó na sonraí (Liosta Stiúrthóirí).

Caithfidh liosta scannáin an stiúrthóra seo a bheith sa cheathrú réimse, Scannáin.

Ar an gcúis seo luaimid gurb é an réimse don chineál scannáin ná GraphQLList ó movieType (Liosta scannáin).

Ach cé chomh díreach agus a gheobhaimid na scannáin go léir a rinne an stiúrthóir seo?

Chuige seo tá feidhm réitigh againn i réimse na scannán. Is iad na hionchuir don fheidhm réitigh seo foinse agus args.

Tá sonraí an tuismitheora réad san fhoinse.

Ligean le rá na réimsí id = 1, ainm = "Randamach" agus aois = 20 do stiúrthóir. Ansin source.id = 1, source.name = "Randamach" agus source.age = 20

Sa sampla seo, aimsíonn an fheidhm réitigh gach scannán ina bhfuil an stiúrthóir comhoiriúnach le haitheantas an stiúrthóra riachtanach.

Cód

Tá cód uile an fheidhmchláir seo ar fáil sa stór GitHub seo

An t-iarratas a thástáil

Anois déanaimis tástáil ar an iarratas ar chásanna éagsúla.

Rith an feidhmchlár leis an nód server.js.

Téigh go localhost: 5000 / graphql agus bain triail as na hiontrálacha seo a leanas.

Scannán

Bealach isteach:

{Scannán (ID: 1) {ainm}}

Eagrán:

{"Dátaí": {"movie": {"name": "Scannán 1"}}}

Ón bhfaisnéis thuas, is féidir linn a fheiceáil gur féidir leis an gcliant a iarraidh go díreach, agus cinntíonn GraphQL nach gcuirtear ach na paraiméadair seo ar ais. Ní dhéantar ach an réimse ainm a cheistiú anseo agus sin amháin a sheolann an freastalaí ar ais.

Sa scannán (ID: 1), is é ID an paraiméadar ionchuir. Iarraimid ar an bhfreastalaí an scannán a sheoladh ar ais le ID 1.

Bealach isteach:

{Scannán (ID: 3) {ainm ba mhaith liom bliain}}

Eagrán:

{"Dátaí": {"movie": {"name": "Scannán 3", "id": "3", "Bliain": 2016}}}

Sa sampla thuas, iarrtar na réimsí Ainm, ID agus Bliain. Seolann an freastalaí na réimsí seo go léir ar ais.

Stiúrthóir

Bealach isteach:

{Stiúrthóir (id: 1) {ainm ba mhaith liom, aois}}

Eagrán:

{"Dátaí": {"Stiúrthóir": {"Ainm": "Stiúrthóir 1", "id": "1", "Aois": 20}}}

Bealach isteach:

{Stiúrthóir (id: 1) {ainm ba mhaith liom, aois, scannáin {ainm, bliain}}}

Eagrán:

{"Dátaí": {"Stiúrthóir": {"Ainm": "Stiúrthóir 1", "id": "1", "Aois": 20, "Scannáin": [{"name": "Scannán 1", " Bliain ": 2018}, {" name ":" Scannán 2 "," bliain ": 2017}]}}}

Sa sampla thuas feicimid feidhmíocht GraphQL. Deirimid go dteastaíonn stiúrthóir uainn le ID 1. Deirimid freisin go dteastaíonn scannáin uile an stiúrthóra seo uainn. Tá an treo agus an réimse scannáin inúsáidte agus is féidir leis an gcustaiméir a iarraidh go díreach cad atá uaidh.

Is féidir é seo a leathnú chuig réimsí agus cineálacha eile freisin. Mar shampla, d’fhéadfaimis ceist a reáchtáil mar Aimsigh stiúrthóir le ID 1. Tá tú ag lorg gach scannán don stiúrthóir seo. Faigh na haisteoirí do gach scannán. Faigh na 5 scannán is fearr do gach aisteoir agus mar sin de. Maidir leis an gceist seo, caithfimid an gaol idir na cineálacha a shonrú. Ansin is féidir leis an gcustaiméir aon chaidreamh atá ag teastáil a cheistiú.

Comhghairdeas

Tá bunchoincheapa GraphQL ar eolas agat anois.

Féach an doiciméadacht chun tuilleadh a fháil amach faoi GraphQL

Maidir leis an údar

Is breá liom an teicneolaíocht agus leanaim an dul chun cinn sa réimse seo. Is maith liom freisin cuidiú le daoine eile le mo chuid eolais theicneolaíoch.

Tá fáilte romhat teagmháil a dhéanamh liom trí mo chuntas LinkedIn https://www.linkedin.com/in/aditya1811/

Is féidir leat mé a leanúint freisin ar Twitter https://twitter.com/adityasridhar18

Mo shuíomh Gréasáin: https://adityasridhar.com/

Foilsithe ar dtús ag adityasridhar.com.