Pilnas „Apollo“, „GraphQL“ priemonių rinkinio, įvadas

Norite sužinoti „JavaScript“? Gaukite nemokamą el. Knygą svetainėje jshandbook.com

„Apollo“ įvadas

Per pastaruosius kelerius metus „GraphQL“ tapo labai populiarus kaip alternatyvus būdas kurti API per „REST“.

„GraphQL“ yra puikus būdas leisti klientui nuspręsti, kuriuos duomenis jis nori perduoti tinklu, užuot davęs serveriui nusiųsti fiksuotą duomenų rinkinį.

Be to, tai leidžia nurodyti įdėtus išteklius, sumažinant pirmyn ir atgal kartais reikalingus reikalus, susijusius su REST API.

„Apollo“ yra komanda ir bendruomenė, kuri remiasi „GraphQL“ ir teikia įvairius įrankius, kurie padeda kurti savo projektus.

„Apollo Logo“, naudodamasi apollographql.com

„Apollo“ teikiami įrankiai daugiausia yra trys: „Client“, „Server“, „Engine“.

„Apollo“ klientas padeda sunaudoti „GraphQL API“ ir palaiko tokias populiariausias priekinių juostų interneto technologijas kaip „React“, „Vue“, „Angular“, „Ember“ ir „Meteor“. Tai taip pat palaiko savąją plėtrą „iOS“ ir „Android“.

„Apollo Server“ yra serverio „GraphQL“ dalis, kuri sąsaja su jūsų programine programa ir siunčia atsakymus atgal į kliento užklausas.

„Apollo Engine“ yra priglobta infrastruktūra (SaaS), tarnaujanti kaip tarpininkas tarp kliento ir jūsų serverio, teikianti talpyklą, našumo ataskaitas, apkrovos matavimą, klaidų stebėjimą, schemos lauko naudojimo statistiką, istorinę statistiką ir dar daug kitų gėrybių. Šiuo metu nemokama iki 1 milijono užklausų per mėnesį ir tai yra vienintelė „Apollo“ dalis, kuri nėra atviro kodo ir nemokama. Ji teikia finansavimą atvirojo kodo projekto daliai.

Verta paminėti, kad šie trys įrankiai niekaip nėra susieti, ir jūs galite naudoti tiesiog „Apollo Client“, norėdami susisiekti su 3-osios dalies API, arba aptarnauti API, naudodami „Apollo Server“, pavyzdžiui, neturėdami jokio kliento.

Kai kurie „Apollo“ naudojimo pranašumai

Visa tai suderinama su „GraphQL“ standartine specifikacija, todėl „Apollo“ nėra patentuotų ar nesuderinamų technologijų.

Tačiau labai patogu, jei visi šie įrankiai yra įrengti viename stoge kaip visas rinkinys visiems jūsų su „GraphQL“ susijusiems poreikiams patenkinti.

„Apollo“ siekia, kad juo būtų lengva naudotis ir prie kurio būtų lengva prisidėti.

„Apollo Client“ ir „Apollo Server“ yra visi bendruomenės sukurti projektai, skirti bendruomenei. „Apollo“ remia „Meteor Development Group“ (įmonė už „Meteor“), labai populiari „JavaScript“ sistema.

„Apollo“ orientuojasi į tai, kad viskas būtų paprasta. Tai yra kažkas naujovės, kuri nori tapti populiaria, sėkmės rakto. 99 proc. Mažų ar vidutinių kompanijų gali būti per daug nukenksminamos technologijos, sistemos ar bibliotekos, ir tai tikrai tinka didelėms įmonėms, turinčioms labai sudėtingus poreikius.

„Apollo“ klientas

„Apollo“ klientas yra pagrindinis „JavaScript“ „GraphQL“ klientas. Kadangi tai yra bendruomenės poreikis, jis skirtas leisti kurti vartotojo sąsajos komponentus, turinčius sąsają su „GraphQL“ duomenimis - tiek pateikiant tuos duomenis, tiek atliekant mutacijas, kai įvyksta tam tikri veiksmai.

Jums nereikia pakeisti visko savo programoje, kad galėtumėte naudotis „Apollo Client“. Galite pradėti nuo vieno mažo sluoksnio ir vienos užklausos ir išplėsti iš ten.

Svarbiausia, kad „Apollo Client“ sukurtas būti paprastas, mažas ir lankstus nuo pat pradžių.

Šiame įraše išsamiai aprašysiu „Apollo Client“ naudojimo procesą „React“ programoje.

Kaip serverį naudosiu „GitHub GraphQL API“.

Paleiskite programą „React“

Aš naudoju programą „sukurti-reaguoti“, kad nustatyčiau „React“ programą, kuri yra labai patogi ir prideda tik tai, ko mums reikia:

„npx“ sukurti „reaguoti“ programą „myapp“
„npx“ yra komanda, prieinama naujausiose „npm“ versijose. Atnaujinkite npm, jei neturite šios komandos.

Paleiskite programos vietinį serverį naudodami

verpalų pradžia

Atidaryti src / index.js:

importuoti „reaguoti“ iš „reaguoti“
importuoti „ReactDOM“ iš „react-dom“
importuoti „./index.css“
importuoti programą iš „./App“
importuoti registerServiceWorker iš './registerServiceWorker'

„ReactDOM.render“ (, document.getElementById („root“))
registerServiceWorker ()

ir pašalinkite visą šį turinį.

Pradėkite nuo „Apollo Boost“

„Apollo Boost“ yra lengviausias būdas pradėti naudoti „Apollo Client“ naujame projekte. Įdiegsime tai be react-apollo ir graphql.

Konsolėje paleiskite

verpalai prideda apollo-boost react-apollo graphql

arba su npm:

npm įdiegti „apollo-boost react-apollo graphql“ - išsaugoti

Sukurkite „ApolloClient“ objektą

Pirmiausia importuojate „ApolloClient“ iš „apollo-kliento“ į index.js:

importuoti „ApolloClient“ iš „apollo-client“

„const“ klientas = naujas „ApolloClient“ ()

Pagal numatytuosius nustatymus „Apollo“ klientas naudoja „/ graphql“ galinį tašką dabartiniame pagrindiniame kompiuteryje, todėl naudokime „Apollo“ nuorodą, norėdami nurodyti išsamią informaciją apie ryšį su „GraphQL“ serveriu, nustatydami „GraphQL“ baigties URI.

„Apollo Links“

„Apollo“ nuorodą vaizduoja „HttpLink“ objektas, kurį importuojame iš „apollo-link-http“.

„Apollo Link“ suteikia mums būdą apibūdinti, kaip norime gauti „GraphQL“ operacijos rezultatą ir ką mes norime padaryti su atsakymu.

Trumpai tariant, jūs sukuriate kelis „Apollo Link“ egzempliorius, kurie visi veikia pagal „GraphQL“ užklausą vienas po kito, pateikdami norimą galutinį rezultatą. Kai kurios nuorodos gali suteikti jums galimybę pakartoti užklausą dar kartą, jei nepavyks, paketą ir dar daugiau.

Prie „Apollo“ kliento egzemplioriaus pridėsime „Apollo“ nuorodą, kad galėtume naudoti „GitHub GraphQL“ galutinio taško URI https://api.github.com/graphql

importuoti „ApolloClient“ iš „apollo-client“
importuoti {HttpLink} iš „apollo-link-http“

const klientas = naujas „ApolloClient“ ({
  saitas: naujas „HttpLink“ ({uri: 'https://api.github.com/graphql'})
})

Talpinimas

Mes dar nebaigėme. Prieš pateikdami darbinį pavyzdį, mes taip pat turime pasakyti „ApolloClient“, kokią talpyklos kaupimo strategiją naudoti: „InMemoryCache“ yra numatytoji ir ją reikia pradėti.

importuoti „ApolloClient“ iš „apollo-client“
importuoti {HttpLink} iš „apollo-link-http“
importuoti {InMemoryCache} iš „apollo-cache-inmemory“

const klientas = naujas „ApolloClient“ ({
  nuoroda: naujas „HttpLink“ ({uri: 'https://api.github.com/graphql'}),
  talpykla: nauja „InMemoryCache“ ()
})

Naudokite „ApolloProvider“

Dabar turime prijungti „Apollo“ klientą prie savo komponentų medžio. Mes tai darome naudodami „ApolloProvider“, apvyniodami programos komponentą pagrindiniame „React“ faile:

importuoti „reaguoti“ iš „reaguoti“
importuoti „ReactDOM“ iš „react-dom“
importuoti „ApolloClient“ iš „apollo-client“
importuoti {HttpLink} iš „apollo-link-http“
importuoti {InMemoryCache} iš „apollo-cache-inmemory“
importuoti „ApolloProvider“ iš „react-apollo“

importuoti programą iš „./App“

const klientas = naujas „ApolloClient“ ({
  nuoroda: naujas „HttpLink“ ({uri: 'https://api.github.com/graphql'}),
  talpykla: nauja „InMemoryCache“ ()
})

ReactDOM.render (
  <„ApolloProvider“ klientas = {klientas}>
    
  
  document.getElementById („šaknis“)
)

To pakanka, kad būtų sukurtas numatytasis programos „kurti-reaguoti“ ekranas, suaktyvinus „Apollo Client“:

„Gql“ šablono žyma

Dabar esame pasirengę ką nors padaryti su „Apollo Client“ ir imsimės kai kurių duomenų iš „GitHub“ API ir pateiksime juos.

Norėdami tai padaryti, turime importuoti „gql“ šablono žymą:

importuoti GQL iš „graphql-tag“

Bet kuri „GraphQL“ užklausa bus sukurta naudojant šią šablono žymą:

const query = gql`
  užklausa {
    ...
  }
`

Atlikite „GraphQL“ užklausą

„gql“ buvo paskutinis dalykas, kurio mums reikėjo įrankių rinkinyje.

Dabar esame pasirengę ką nors padaryti su „Apollo Client“ ir imsimės kai kurių duomenų iš „GitHub“ API ir pateiksime juos.

Gaukite API prieigos prieigos raktą

Pirmas dalykas, kurį reikia padaryti, yra gauti asmeninę prieigos prieigos raktą iš „GitHub“.

„GitHub“ tai palengvina pateikdama sąsają, iš kurios pasirenkate bet kokius jums reikalingus leidimus:

Dėl šio mokymo pavyzdžio jums nereikia jokių iš šių leidimų. Jie skirti prieigai prie privačių vartotojų duomenų, tačiau mes tiesiog teiravomės viešųjų saugyklų duomenų.

Gautas prieigos raktas yra „OAuth 2.0 Bearer“ prieigos raktas.

Galite lengvai išbandyti naudodami komandinę eilutę:

$ curl -H "Įgaliojimas: nešėjas *** _ YOUR_TOKEN_HERE _ ***" -X POST -d "\
 {\
   \ "užklausa \": \ "užklausa {peržiūros priemonė {prisijungimas}} \" \
 } \
„https://api.github.com/graphql

kuris turėtų duoti rezultatą

{"data": {"žiūrovas": {"prisijungimas": "*** _ YOUR_LOGIN_NAME _ ***"}}}

arba

{
  "pranešimas": "Netinkami prisijungimo duomenys",
  „document_url“: „https://developer.github.com/v4“
}

jei kažkas nutiko.

Norėdami patvirtinti, naudokite „Apollo“ nuorodą

Taigi, kartu su mūsų „GraphQL“ užklausa turime atsiųsti „Authorization“ antraštę, kaip tai darėme aukščiau pateiktoje „curl“ užklausoje.

Tai galime padaryti su „Apollo Client“ sukurdami „Apollo Link“ tarpinę programinę įrangą. Pradėkite nuo „apollo-link-konteksto“ diegimo:

npm įdiegti „apollo-link-kontekstas“

Šis paketas leidžia mums pridėti autentifikavimo mechanizmą, nustatant mūsų užklausų kontekstą.

Mes galime tai naudoti šiame kode, nurodydami „setContext“ funkciją tokiu būdu:

const authLink = setContext ((_, {antraštės}) => {
  const token = '*** YOUR_TOKEN **'

  grįžti {
    antraštės: {
      ... antraštės,
      autorizacija: „Nešėjas $ {token}“
    }
  }
})

ir kai turėsime šią naują „Apollo“ nuorodą, galėsime ją komponuoti naudodami jau turėtą „HttpLink“, naudodami „concat“ () metodą saite:

„const link“ = authLink.concat („httpLink“)

Čia yra visas failo src / index.js kodas su šiuo metu naudojamu kodu:

importuoti „reaguoti“ iš „reaguoti“
importuoti „ReactDOM“ iš „react-dom“
importuoti „ApolloClient“ iš „apollo-client“
importuoti {HttpLink} iš „apollo-link-http“
importuoti {InMemoryCache} iš „apollo-cache-inmemory“
importuoti „ApolloProvider“ iš „react-apollo“
importuoti {setContext} iš „apollo-link-context“
importuoti GQL iš „graphql-tag“

importuoti programą iš „./App“

const httpLink = new HttpLink ({uri: 'https://api.github.com/graphql'})

const authLink = setContext ((_, {antraštės}) => {
  const token = '*** YOUR_TOKEN **'

  grįžti {
    antraštės: {
      ... antraštės,
      autorizacija: „Nešėjas $ {token}“
    }
  }
})

„const link“ = authLink.concat („httpLink“)

const klientas = naujas „ApolloClient“ ({
  saitas: saitas,
  talpykla: nauja „InMemoryCache“ ()
})

ReactDOM.render (
  <„ApolloProvider“ klientas = {klientas}>
    
  
  document.getElementById („šaknis“)
)
ĮSPĖJIMAS Atminkite, kad šis kodas yra švietimo tikslų pavyzdys. Tai parodo jūsų „GitHub GraphQL API“, kad pasaulis galėtų pamatyti kodą, nukreiptą į priekinius šonus. Gamybos kodas turi išlaikyti šį prieigos raktą privatų.

Dabar galime pateikti pirmąją „GraphQL“ užklausą šio failo apačioje, o šioje pavyzdžio užklausoje prašoma nurodyti 10 populiariausių saugyklų, turinčių daugiau nei 50 000 žvaigždžių, pavadinimus ir savininkus:

const POPULAR_REPOSITORIES_LIST = gql`
{
  paieška (užklausa: „žvaigždės:> 50000“, tipas: REPOSITORY, pirma: 10) {
    repositoryCount
    kraštai {
      mazgas {
        ... saugykloje {
          vardas
          savininkas {
            Prisijungti
          }
          žvaigždžių žvaigždės {
            totalCount
          }
        }
      }
    }
  }
}
`

„client.query“ ({užklausa: POPULAR_REPOSITORIES_LIST}). tada (console.log)

Vykdydami šį kodą, gausite užklausos rezultatą naršyklės pulte:

Pateikite „GraphQL“ užklausos rezultatų rinkinį komponente

Tai, ką matėme iki šiol, jau yra šaunu. Dar šauniau yra tai, kad naudodami „GraphQL“ rezultatų rinkinį pateikiate savo komponentus.

Mes leidžiame „Apollo“ klientui būti našta (ar džiaugsmui) arba gauti duomenis ir tvarkyti visus žemo lygio daiktus. Tai leidžia mums sutelkti dėmesį į duomenų rodymą naudojant „grafql“ komponento stipriklį, kurį siūlo react-apollo:

importuoti „reaguoti“ iš „reaguoti“
importuoti {graphql} iš 'react-apollo'
importuoti {gql} iš „apollo-boost“

const POPULAR_REPOSITORIES_LIST = gql`
{
  paieška (užklausa: „žvaigždės:> 50000“, tipas: REPOSITORY, pirma: 10) {
    repositoryCount
    kraštai {
      mazgas {
        ... saugykloje {
          vardas
          savininkas {
            Prisijungti
          }
          žvaigždžių žvaigždės {
            totalCount
          }
        }
      }
    }
  }
}
`

const App = graphql (POPULAR_REPOSITORIES_LIST) (rekvizitai =>
  
        {props.data.loading? '': props.data.search.edges.map ((i eilutė, i) =>       
  •         {row.node.owner.login} / {row.node.name}: {''}                    {row.node.stargazers.totalCount}                
  •     )}   
) eksportuoti numatytąją programą

Tai yra mūsų užklausos, pateiktos komponente the, rezultatas

„Apollo“ serveris

„GraphQL“ serverio užduotis yra priimti gaunamas užklausas dėl galinio taško, interpretuoti užklausą ir ieškoti visų duomenų, kurie yra reikalingi kliento poreikiams patenkinti.

Yra daugybė skirtingų „GraphQL“ serverio įdiegimų visoms įmanomoms kalboms.

„Apollo Server“ yra „JavaScript“, ypač „Node.js“ platformos, „GraphQL“ serverio įgyvendinimas.

Tai palaiko daugelį populiarių „Node.js“ schemų, įskaitant:

  • Išreikšti
  • Hapi
  • Koa
  • Atleisk

„Apollo Server“ iš esmės suteikia mums tris dalykus:

  • Mūsų duomenų aprašymo schema būdas.
  • Sistemų, kurios yra funkcijos, kurias rašome norėdami gauti duomenis, reikalingus užklausai įvykdyti, sistema.
  • Tai palengvina mūsų API autentifikavimo tvarkymą.

Norėdami išmokti „Apollo Server“ pagrindų, nenaudosime jokios palaikomos „Node.js“ sistemos. Vietoj to, mes naudosime tai, ką sukūrė „Apollo“ komanda, kažką tikrai puikaus, kuris bus mūsų mokymosi pagrindas: „Launchpad“.

Paleidimo aikštelė

„Launchpad“ yra projektas, kuris yra „Apollo“ skėčio dalis. Tai gana nuostabus įrankis, leidžiantis mums užrašyti kodą debesyje ir sukurti „Apollo“ serverį internete, lygiai taip pat, kaip mes paleistume kodo fragmentą „Codepen“, JSFiddle. arba JSBin.

Išskyrus tai, kad, užuot sukūrę vaizdinį įrankį, kuris ten bus izoliuotas ir reiškė tik kaip vitriną ar kaip mokymosi įrankį, naudodami „Launchpad“, mes sukuriame „GraphQL API“. Tai bus viešai prieinama.

Kiekvienas „Launchpad“ projektas yra vadinamas padu ir turi savo „GraphQL“ baigties URL, pvz .:

https://1jzxrj129.lp.gql.zone/graphql

Sukūrę bloknotą, „Launchpad“ suteikia jums galimybę atsisiųsti visą jį veikiančios „Node.js“ programos kodą. Jums tereikia paleisti npm diegimą ir npm pradėti turėti „Apollo GraphQL Server“ vietinę kopiją.

Apibendrinant galima pasakyti, kad tai puikus įrankis mokytis, dalintis ir kurti prototipus.

„Apollo“ serverio sveikas pasaulis

Kiekvieną kartą, kai sukuriate naują „Launchpad“ kilimėlį, jums pristatomas sveikas pasaulis! iš „Apollo Server“. Pasinerkime į tai.

Pirmiausia iš „grafql“ įrankių importuokite funkciją makeExecvableSchema.

importuoti {makeExecvableSchema} iš „graphql-tools“

Ši funkcija naudojama kuriant „GraphQLSchema“ objektą, pateikiant jam schemos apibrėžimą (parašytą „GraphQL schemos kalba“) ir skiriamųjų elementų rinkinį.

Schemos apibrėžimas yra šablono pažodinė eilutė, kurioje pateikiamas mūsų užklausos aprašymas ir tipai, susieti su kiekvienu lauku:

const typeDefs = `
  įveskite užklausą {
    labas: Styga
  }
`

Tvarkyklė yra objektas, kuris schemos laukus susieja su skyrimo funkcijomis. Tai gali ieškoti duomenų, kad atsakytų į užklausą.

Čia yra paprastas rezoliucinis elementas, kuriame yra sveikinimo lauko sprendimo priemonė, kuri tiesiog grąžina sveiką pasaulį! eilutė:

const resolvers = {
  Užklausa: {
    sveiki: (šaknis, argumentai, kontekstas) => {
      grįžti „Sveikas pasaulis!“
    }
  }
}

Atsižvelgiant į šiuos du elementus, schemos apibrėžimą ir rezoliuciją, mes naudojame „makeExecvableSchema“ funkciją, kurią anksčiau importavome, kad gautume objektą „GraphQLSchema“, kurį priskiriame schemos konst.

export const schema = makeExecvableSchema ({typeDefs, resolvers})

Tai viskas, ko jums reikia, norint aptarnauti paprastą tik skaitomą API. „Launchpad“ rūpinasi mažytėmis detalėmis.

Čia yra visas paprasto „Hello World“ pavyzdžio kodas:

importuoti {makeExecvableSchema} iš „graphql-tools“

const typeDefs = `
  įveskite užklausą {
    labas: Styga
  }
`

const resolvers = {
  Užklausa: {
    sveiki: (šaknis, argumentai, kontekstas) => {
      grįžti „Sveikas pasaulis!“
    }
  }
}

export const schema = makeExecvableSchema ({
  typeDefs,
  nutarėjai
})

„Launchpad“ yra puikus integruotas įrankis naudoti API:

Ir kaip jau sakiau anksčiau, API yra viešai prieinama, todėl jums tereikia prisijungti ir išsaugoti savo padėkliuką.

Aš padariau bloknotą, kuris atskleidžia jo galinį tašką adresu https://kqwwkp0pr7.lp.gql.zone/graphql, todėl pabandykime tai išbandyti naudodami curl iš komandinės eilutės:

$ garbanoti \
  -X POST \
  -H „Turinio tipas: taikomoji programa / json“ \
  - duomenų '{"užklausa": ,, {labas} "}' \
  https://kqwwkp0pr7.lp.gql.zone/graphql

o tai sėkmingai suteikia mums rezultatą, kurio tikimės:

{
  "duomenys": {
    "labas": "Sveikas pasaulis!"
  }
}

Paleiskite „GraphQL Server“ vietoje

Minėjome, kad viskas, ką sukuriate „Launchpad“, yra atsisiunčiama, todėl tęskime toliau.

Paketą sudaro du failai. Pirmasis, schema.js, yra tai, ką turime aukščiau.

Antrasis, server.js, nebuvo nematomas „Launchpad“ ir būtent tai ir suteikia pagrindinę „Apollo“ serverio funkciją, maitinamą „Express“, populiariosios „Node.js“ sistemos.

Tai nėra pats paprasčiausias „Apollo Server“ sąrankos pavyzdys, todėl norėdamas paaiškinti, pakeisiu jį paprastesniu pavyzdžiu (tačiau drąsiai mokykis tai suprasti supratęs pagrindus).

Jūsų pirmasis „Apollo Server“ kodas

Pirmiausia paleiskite „npm install“ ir „npm paleiskite“ naudodami atsisiųstą „Launchpad“ kodą.

Mazgo serveris, kurį mes inicijavome iš anksto, naudoja nodemon, kad iš naujo paleistų serverį, kai keičiasi failai, taigi, pakeitus kodą, serveris paleidžiamas iš naujo, pritaikius jūsų pakeitimus.

Pridėkite šį kodą į server.js:

const express = reikalauti ('express')
const bodyParser = reikalauti ('body-parser')
const {graphqlExpress} = reikalauti ('apollo-server-express')
const {schema} = reikalauti ('./ schema')

const server = express ()

server.use ('/ graphql', bodyParser.json (), graphqlExpress ({schema}))

server.listen (3000, () => {
  console.log („GraphQL klausymasis http: // localhost: 3000 / graphql“)
})

Vos 11 eilučių tai yra daug paprasčiau nei „Launchpad“ nustatytą serverį, nes pašalinome visus dalykus, dėl kurių šis kodas tapo lankstesnis jų poreikiams.

Kodavimas priverčia jus priimti sunkius sprendimus: kiek jums dabar reikia lankstumo? Kaip svarbu turėti švarų, suprantamą kodą, kurį galėtumėte pasiimti po šešių mėnesių ir lengvai patobulinti, arba perduoti kitiems kūrėjams ir komandos nariams, kad jie galėtų būti produktyvūs per tiek laiko, kiek reikia?

Kodas atliekamas štai ką:

Pirmiausia mes importuojame kelias bibliotekas, kuriomis naudosimės.

  • išreikšti, kuris įgalins pagrindinę tinklo funkciją atskleisti galutinį tašką
  • „bodyParser“ yra mazgas, kuriame analizuojama tarpinė programinė įranga
  • „graphqlExpress“ yra „Apollo Server“ objektas, skirtas „Express“
const express = reikalauti ('express')
const bodyParser = reikalauti ('body-parser')
const {graphqlExpress} = reikalauti ('apollo-server-express')

Toliau mes importuosime „GraphQLSchema“ objektą, kurį sukūrėme aukščiau esančiame faile schema.js, kaip schemą:

const {schema} = reikalauti ('./ schema')

Čia yra keletas standartinių „Express“ rinkinių, ir mes tiesiog inicijuojame serverį 3000 uoste

const server = express ()

Dabar mes pasiruošę inicijuoti „Apollo Server“:

„graphqlExpress“ ({schema})

ir mes tai perduodame kaip HTTP JSON užklausų pabaigos tašką:

server.use ('/ graphql', bodyParser.json (), graphqlExpress ({schema}))

Viskas, ko mums dabar reikia, yra paleisti „Express“:

server.listen (3000, () => {
  console.log („GraphQL klausymasis http: // localhost: 3000 / graphql“)
})

Pridėkite „GraphiQL“ baigtį

Jei naudojate „GraphiQL“, galite lengvai pridėti / grafiql pabaigą, kad galėtumėte naudoti naudodami „GraphiQL“ interaktyvųjį naršyklės IDE:

server.use ('/ graphiql', graphiqlExpress ({
  endpointURL: '/ graphql',
  užklausa: ``
}))

Dabar mums tiesiog reikia paleisti „Express“ serverį:

server.listen (PORT, () => {
  console.log („GraphQL klausymasis http: // localhost: 3000 / graphql“)
  console.log („GraphiQL klausymasis http: // localhost: 3000 / graphiql“)
})

Galite tai išbandyti dar kartą naudodami garbanas:

$ garbanoti \
  -X POST \
  -H „Turinio tipas: taikomoji programa / json“ \
  - duomenų '{"užklausa": ,, {labas} "}' \
  http: // localhost: 3000 / graphql

Tai suteiks jums tą patį rezultatą, kaip ir aukščiau, kur skambinote „Launchpad“ serveriais:

{
  "duomenys": {
    "labas": "Sveikas pasaulis!"
  }
}
Norite sužinoti „JavaScript“? Gaukite nemokamą el. Knygą svetainėje jshandbook.com