Täydellinen johdanto Apolloon, GraphQL-työkalupakkiin

Haluatko oppia JavaScriptiä? Hanki ilmainen e-kirjani osoitteesta jshandbook.com

Johdatus Apolloon

Viime vuosina GraphQL on saanut erittäin suuren suosion vaihtoehtoisena lähestymistapana sovellusliittymän rakentamiseen RESTin kautta.

GraphQL on loistava tapa antaa asiakkaalle päättää, mitä tietoja hän haluaa lähettää verkon välityksellä sen sijaan, että palvelin lähettää kiinteän tietosarjan.

Sen avulla voit myös määrittää sisäkkäisiä resursseja vähentämällä edestakaisin REST-sovellusliittymien käsittelyyn tarvittavia edestakaisin.

Apollo on tiimi ja yhteisö, joka rakentaa GraphQL: n päälle ja tarjoaa erilaisia ​​työkaluja, jotka auttavat sinua rakentamaan projekteja.

Apollo Logo - apollographql.com

Apollon tarjoamat työkalut ovat pääasiassa kolme: asiakas, palvelin, moottori.

Apollo Client auttaa sinua kuluttamaan GraphQL API -tukea ja tukee suosituimpia käyttöliittymäverkkotekniikoita, kuten React, Vue, Angular, Ember ja Meteor. Se tukee myös alkuperäistä kehittämistä iOS: ssä ja Androidissa.

Apollo-palvelin on GraphQL-palvelimen osa, joka on liittymässä taustaohjelmaan ja lähettää vastaukset takaisin asiakaspyyntöihin.

Apollo Engine on ylläpidetty infrastruktuuri (SaaS), joka toimii keskimäärin asiakkaana asiakkaan ja palvelimen välillä ja tarjoaa välimuistin, suorituskykyraportoinnin, kuormituksen mittauksen, virheenseurannan, skeemakentän käyttötilastot, historiatilastot ja paljon muuta. Se on tällä hetkellä ilmainen jopa miljoona pyyntöä kuukaudessa, ja se on ainoa Apollon osa, joka ei ole avoimen lähdekoodin ja ilmainen. Se rahoittaa hankkeen avoimen lähdekoodin osaa.

On huomionarvoista, että näitä kolmea työkalua ei ole kytketty toisiinsa millään tavalla, ja voit käyttää vain Apollo Client -sovellusta rajapintaan 3. osan sovellusliittymän kanssa tai palvella sovellusliittymää Apollo-palvelimen avulla ilman, että sinulla olisi esimerkiksi lainkaan asiakasta.

Jotkut Apollon käytön edut

Se on kaikki yhteensopivaa GraphQL-standardimääritelmän kanssa, joten Apollossa ei ole omaa tai yhteensopimatonta tekniikkaa.

Mutta on erittäin kätevää, että kaikki nämä työkalut ovat saman katon alla täydellisenä sarjana kaikille GraphQL-tarpeisiisi.

Apollo pyrkii olemaan helppokäyttöinen ja helppo panostaa.

Apollo Client ja Apollo Server ovat kaikki yhteisön rakentamia yhteisöhankkeita yhteisölle. Apolloa tukee Meteor Development Group (Meteorin takana oleva yritys), erittäin suosittu JavaScript-kehys.

Apollo keskittyy pitämään asiat yksinkertaisina. Tämä on jotain avainta menestykseen tekniikalle, joka haluaa tulla suosituksi. Suuri osa siellä olevista tekniikoista, puitteista tai kirjastoista voi olla ylitaitoa 99%: lle pienistä tai keskisuurista yrityksistä, ja se sopii todella suurille yrityksille, joilla on hyvin monimutkaiset tarpeet.

Apollon asiakas

Apollo Client on johtava JavaScript-asiakas GraphQL: lle. Koska se on yhteisön vetämää, sen tarkoituksena on antaa sinun rakentaa käyttöliittymäkomponentteja, jotka ovat rajapinnassa GraphQL-tietojen kanssa - joko näiden tietojen näyttämisessä tai mutaatioiden suorittamisessa tiettyjen toimien tapahtuessa.

Sinun ei tarvitse muuttaa kaikkea sovelluksessasi käyttääksesi Apollo Client -sovellusta. Voit aloittaa vain yhdellä pienellä kerroksella ja yhdellä pyynnöllä ja laajentaa sieltä.

Ennen kaikkea Apollo Client on rakennettu yksinkertaiseksi, pieneksi ja joustavaksi alusta alkaen.

Tässä viestissä aion yksityiskohtaisesti käsitellä Apollo Client -sovelluksen käyttöä React-sovelluksessa.

Käytän GitHub GraphQL API -sovellusta palvelimena.

Käynnistä React-sovellus

Asennan React-sovelluksen luomiseen reagoida-sovelluksen, joka on erittäin kätevä ja lisää vain paljaat luut tarvitsemme:

npx luoda-reagoida-sovellus myapp
npx on komento, joka on saatavana uusimmissa npm-versioissa. Päivitä npm, jos sinulla ei ole tätä komentoa.

Käynnistä sovelluksen paikallinen palvelin

langan alku

Avaa src / index.js:

tuo reagoi 'reagoi'
tuo ReactDOM 'react-domista'
Tuo './index.css'
Tuo sovellus './App' -sovelluksesta
Tuo registerServiceWorker hakemistosta './registerServiceWorker'

ReactDOM.render (, document.getElementById ('root'))
registerServiceWorker ()

ja poista kaikki tämä sisältö.

Aloita Apollo Boost

Apollo Boost on helpoin tapa aloittaa Apollo Client -sovelluksen käyttö uudessa projektissa. Asennamme sen react-apollon ja graphql: n lisäksi.

Suorita konsolissa

lanka lisää apollo-boost react-apollo graphql

tai npm: llä:

npm asenna apollo-boost react-apollo graphql - säästää

Luo ApolloClient-objekti

Aloita tuomalla ApolloClient apollo-asiakasohjelmasta index.js:

tuo {ApolloClient} 'apollo-asiakkaasta'

const-asiakas = uusi ApolloClient ()

Oletusarvoisesti Apollo-asiakas käyttää / graphql-päätepistettä nykyisessä isännässä, joten käytämme Apollo-linkkiä määrittelemään yhteyden tiedot GraphQL-palvelimeen asettamalla GraphQL-päätepiste-URI.

Apollo Linkit

Apollo-linkkiä edustaa HttpLink-objekti, jonka tuomme apollo-link-http: stä.

Apollo Link tarjoaa meille tavan kuvata, kuinka haluamme saada aikaan tuloksen GraphQL-toiminnasta ja mitä haluamme tehdä vastauksen kanssa.

Lyhyesti sanottuna, luot useita Apollo Link -ilmentymiä, jotka kaikki toimivat GraphQL-pyynnössä yksi toisensa jälkeen, tarjoamalla haluamasi lopputuloksen. Jotkut linkit voivat antaa sinulle mahdollisuuden yrittää uudelleen pyyntöä, jos se ei onnistu, eräajoa ja paljon muuta.

Lisäämme Apollo-linkin Apollo Client -ilmentimeemme GitHub GraphQL -päätepiste-URI: n käyttämiseksi https://api.github.com/graphql

tuo {ApolloClient} 'apollo-asiakkaasta'
tuo {HttpLink} osoitteesta apollo-link-http

const asiakas = uusi ApolloClient ({
  linkki: uusi HttpLink ({uri: 'https://api.github.com/graphql'})
})

välimuistia

Emme ole vielä valmis. Ennen toimivan esimerkin saamista meidän on myös kerrottava ApolloClientille, mitä välimuististrategiaa käytetään: InMemoryCache on oletus ja se on hyvä aloittaa.

tuo {ApolloClient} 'apollo-asiakkaasta'
tuo {HttpLink} osoitteesta apollo-link-http
tuo {InMemoryCache} hakemistosta 'apollo-cache-inmemory'

const asiakas = uusi ApolloClient ({
  linkki: uusi HttpLink ({uri: 'https://api.github.com/graphql'}),
  välimuisti: uusi InMemoryCache ()
})

Käytä ApolloProvideria

Nyt meidän on kytkettävä Apollo-asiakas komponenttipuumme. Teemme niin ApolloProviderin avulla käärimällä sovelluskomponentimme React-tiedostoon:

tuo reagoi 'reagoi'
tuo ReactDOM 'react-domista'
tuo {ApolloClient} 'apollo-asiakkaasta'
tuo {HttpLink} osoitteesta apollo-link-http
tuo {InMemoryCache} hakemistosta 'apollo-cache-inmemory'
tuo {ApolloProvider} osoitteesta 'react-apollo'

Tuo sovellus './App' -sovelluksesta

const asiakas = uusi ApolloClient ({
  linkki: uusi HttpLink ({uri: 'https://api.github.com/graphql'}),
  välimuisti: uusi InMemoryCache ()
})

ReactDOM.render (
  
    
  ,
  document.getElementById ( 'root')
)

Tämä riittää, kun haluat luoda oletus-luoda-reagoida-sovelluksen-näytön, kun Apollo Client on alustettu:

Gql-mallitunniste

Olemme nyt valmiita tekemään jotain Apollo Client -sovelluksen kanssa, ja haemme joitain tietoja GitHub-sovellusliittymästä ja tarjoamme ne.

Tätä varten meidän on tuotava gql-mallitunniste:

Tuo gql 'graphql-tagista'

Mikä tahansa GraphQL-kysely rakennetaan seuraavan mallipohjan avulla:

const kysely = gql`
  kysely {
    ...
  }
`

Suorita GraphQL-pyyntö

gql oli viimeinen esine, jota tarvitsimme työkalusarjamme.

Olemme nyt valmiita tekemään jotain Apollo Client -sovelluksen kanssa, ja haemme joitain tietoja GitHub-sovellusliittymästä ja tarjoamme ne.

Hanki käyttöoikeustunnus sovellusliittymälle

Ensimmäinen tehtävä on hankkia henkilökohtainen käyttöoikeustunnus GitHubilta.

GitHub tekee siitä helpon tarjoamalla käyttöliittymän, josta voit valita tarvittavat luvat:

Tämän esimerkkiopetuksen vuoksi et tarvitse mitään näistä oikeuksista. Ne on tarkoitettu pääsyyn yksityisten käyttäjien tietoihin, mutta me vain kysymme julkisten arkistojen tietoja.

Saatu merkki on OAuth 2.0 Bearer -merkki.

Voit testata sen helposti suorittamalla komentoriviltä:

$ curl -H "Valtuutus: haltija *** _ YOUR_TOKEN_HERE _ ***" -X POST -d "\
 {\
   \ "kysely \": \ "kysely {katselija {kirjautuminen}} \" \
 } \
"https://api.github.com/graphql

jonka pitäisi antaa sinulle tulos

{ "Data": { "katsoja": { "sisään": "*** _ YOUR_LOGIN_NAME _ ***"}}}

tai

{
  "message": "Virheelliset käyttöoikeustiedot",
  "document_url": "https://developer.github.com/v4"
}

jos jotain meni pieleen.

Käytä todennusta Apollo-linkillä

Joten meidän on lähetettävä valtuutusotsikko GraphQL-pyyntömme mukana, aivan kuten teimme yllä olevassa käpristyspyynnössä.

Voimme tehdä tämän Apollo Client -sovelluksen avulla luomalla Apollo Link -väliohjelmiston. Aloita apollo-link-kontekstin asentamisesta:

npm asenna apollo-link-konteksti

Tämän paketin avulla voimme lisätä todennusmekanismin asettamalla pyyntöjemme kontekstin.

Voimme käyttää sitä tässä koodissa viittaamalla setContext-funktioon tällä tavalla:

const authLink = setContext ((_, {otsikot}) => {
  const token = '*** YOUR_TOKEN **'

  palauta {
    otsikot: {
      ... otsikot,
      valtuutus: `Bearer $ {token}`
    }
  }
})

ja kun meillä on tämä uusi Apollo-linkki, voimme säveltää sen jo käyttämämme HttpLink-sovelluksella käyttämällä linkin concat () -menetelmää:

const link = authLink.concat (httpLink)

Tässä on src / index.js-tiedoston täysi koodi, jolla on tällä hetkellä koodi:

tuo reagoi 'reagoi'
tuo ReactDOM 'react-domista'
tuo {ApolloClient} 'apollo-asiakkaasta'
tuo {HttpLink} osoitteesta apollo-link-http
tuo {InMemoryCache} hakemistosta 'apollo-cache-inmemory'
tuo {ApolloProvider} osoitteesta 'react-apollo'
Tuo {setContext} apollo-link-konteksti -sovelluksesta
Tuo gql 'graphql-tagista'

Tuo sovellus './App' -sovelluksesta

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

const authLink = setContext ((_, {otsikot}) => {
  const token = '*** YOUR_TOKEN **'

  palauta {
    otsikot: {
      ... otsikot,
      valtuutus: `Bearer $ {token}`
    }
  }
})

const link = authLink.concat (httpLink)

const asiakas = uusi ApolloClient ({
  linkki: linkki,
  välimuisti: uusi InMemoryCache ()
})

ReactDOM.render (
  
    
  ,
  document.getElementById ( 'root')
)
VAROITUS Muista, että tämä koodi on esimerkki koulutustarkoituksiin. Se paljastaa GitHub GraphQL -sovellusliittymän koko maailmalle näkeväksi käyttöliittymään osoitetussa koodissa. Tuotantokoodin on pidettävä tämä tunnus yksityisenä.

Voimme nyt tehdä ensimmäisen GraphQL-pyynnön tämän tiedoston alareunassa, ja tämä näytekysely kysyy kymmenen suosituimman yli 50 000 tähteä sisältävän arkiston nimiä ja omistajia:

const POPULAR_REPOSITORIES_LIST = gql`
{
  haku (kysely: "tähdet:> 50000", tyyppi: REPOSITORY, ensimmäinen: 10) {
    repositoryCount
    reunat {
      solmu {
        ... arkistossa {
          nimi
          omistaja {
            Kirjaudu sisään
          }
          tähtigazereita {
            lopullinen määrä
          }
        }
      }
    }
  }
}
`

asiakas.kysely ({kysely: POPULAR_REPOSITORIES_LIST}). sitten (console.log)

Tämän koodin suorittaminen palauttaa kyselyn tuloksen selainkonsolissa:

Renderoi komponentissa GraphQL-kyselytulosjoukon

Se mitä olemme nähneet tähän mennessä, on jo siistiä. Vieläkin viileämpää on käyttää GraphQL-tulosjoukkoa komponenttien renderointiin.

Annamme Apollon asiakkaalle taakan (tai ilon) tai noutaa tietoja ja hoitaa kaikki matalan tason asiat. Tämän avulla voimme keskittyä datan näyttämiseen käyttämällä graphql-komponentinparanninta, jota tarjoaa react-apollo:

tuo reagoi 'reagoi'
Tuo {graphql} maasta 'react-apollo'
tuo {gql} apollo-boostista

const POPULAR_REPOSITORIES_LIST = gql`
{
  haku (kysely: "tähdet:> 50000", tyyppi: REPOSITORY, ensimmäinen: 10) {
    repositoryCount
    reunat {
      solmu {
        ... arkistossa {
          nimi
          omistaja {
            Kirjaudu sisään
          }
          tähtigazereita {
            lopullinen määrä
          }
        }
      }
    }
  }
}
`

const App = graphql (POPULAR_REPOSITORIES_LIST) (rekvisiitta =>
  
        {props.data.loading? '': props.data.search.edges.map ((rivi, i) =>       
  •         {row.node.owner.login} / {row.node.name}: {''}                    {Row.node.stargazers.totalCount}                     )}    ) vie oletussovellus

Tässä on komponentista red tehdyn kyselyn tulos

Apollo-palvelin

GraphQL-palvelimen tehtävänä on hyväksyä saapuvat pyynnöt päätepisteessä, tulkita pyyntö ja etsiä kaikki tiedot, jotka ovat tarpeen asiakkaan tarpeiden täyttämiseksi.

Jokaiselle mahdolliselle kielelle on tonnia erilaisia ​​GraphQL-palvelin-toteutuksia.

Apollo Server on GraphQL-palvelinohjelmisto JavaScriptille, erityisesti Node.js-alustalle.

Se tukee monia suosittuja Node.js-kehyksiä, mukaan lukien:

  • Ilmaista
  • Hapi
  • Koa
  • Restify

Apollo-palvelin antaa meille periaatteessa kolme asiaa:

  • Tapa kuvata tietomme kaavalla.
  • Kehys ratkaisijoille, jotka ovat funktioita, jotka kirjoitamme hakemaan pyynnön täyttämiseen tarvittavat tiedot.
  • Se helpottaa todentamisen käsittelyä sovellusliittymämme kanssa.

Apollo Server -palvelun perusteiden oppimisen vuoksi emme aio käyttää mitään tuettuja Node.js-kehyksiä. Sen sijaan käytämme jotain, jonka Apollon joukkue on rakentanut, jotain todella hienoa, joka on oppimisen perusta: Launchpad.

Laukaisualusta

Launchpad on projekti, joka on osa Apollo-tuotteiden sateenvarjoa, ja se on melko uskomaton työkalu, jonka avulla voimme kirjoittaa koodin pilveen ja luoda Apollo-palvelimen verkossa, aivan kuin olisimme suorittaneet koodinpätkän Codepenissa, JSFiddle tai JSBin.

Paitsi, että sen sijaan, että rakentaisimme visuaalisen työkalun, joka aiotaan eristää siellä ja tarkoitti vain esittelyä tai oppimisvälineenä, Launchpadilla luomme GraphQL API: n. Se tulee olemaan julkisesti saatavilla.

Jokainen Launchpad-projektin nimi on pad, ja sillä on GraphQL-pääte-URL-osoite, kuten:

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

Kun olet luonut tyynyn, Launchpad antaa sinulle mahdollisuuden ladata sitä käyttävän Node.js-sovelluksen koko koodi. Sinun tarvitsee vain suorittaa asennus npm: llä ja npm: llä on paikallinen kopio Apollo GraphQL Server -sovelluksesta.

Yhteenvetona, se on loistava työkalu oppia, jakaa ja prototyyppi.

Apollo-palvelimen Hello World

Joka kerta kun luot uuden Launchpad-tyynyn, sinulle esitetään Hello, World! of Apollo Server. Sukellaan siihen.

Tuo ensin makeExecvableSchema-toiminto graafql-työkaluista.

tuo {makeExecvableSchema} 'graphql-tools'

Tätä toimintoa käytetään luomaan GraphQLSchema -objekti tarjoamalla sille skeemamäärittely (kirjoitettu GraphQL-skeemakielellä) ja joukko ratkaisijoita.

Kaavan määritelmä on mallin kirjaimellinen merkkijono, joka sisältää kyselyn kuvauksen ja kuhunkin kenttään liittyvät tyypit:

const typeDefs = `
  kirjoita kysely {
    hei: merkkijono
  }
`

Resoluutio on objekti, joka kartoittaa kaavat kentät resoluutiofunktioihin. Se pystyy etsimään tietoja vastaamaan kyselyyn.

Tässä on yksinkertainen ratkaisija, joka sisältää hello-kentän ratkaisutoiminnon, joka yksinkertaisesti palauttaa Hello-maailman! string:

const resolvers = {
  Kysely: {
    hei: (root, args, konteksti) => {
      palauta 'Hei maailma!'
    }
  }
}

Koska nämä kaksi elementtiä, skeemamäärittely ja ratkaisija, käytämme aiemmin tuomaamme makeExecvableSchema-toimintoa saadaksesi GraphQLSchema -objektin, jonka osoitamme skeeman const: lle.

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

Tämä on kaikki mitä tarvitset palvellaksesi yksinkertaista luku-vain sovellusliittymää. Launchpad hoitaa pienet yksityiskohdat.

Tässä on täydellinen koodi yksinkertaiselle Hello World -esimerkille:

tuo {makeExecvableSchema} 'graphql-tools'

const typeDefs = `
  kirjoita kysely {
    hei: merkkijono
  }
`

const resolvers = {
  Kysely: {
    hei: (root, args, konteksti) => {
      palauta 'Hei maailma!'
    }
  }
}

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

Launchpad tarjoaa loistavan sisäänrakennetun työkalun sovellusliittymän käyttämiseen:

Ja kuten aiemmin totesin, sovellusliittymä on julkisesti saatavissa, joten sinun on vain kirjauduttava sisään ja tallennettava Pad.

Tein tyynyn, joka paljastaa sen päätepisteen osoitteessa https://kqwwkp0pr7.lp.gql.zone/graphql, joten kokeillaan sitä käyttämällä komentorivin curl:

$ curl \
  -X POST \
  -H "Sisältö-tyyppi: application / json" \
  --data '{"kysely": "{hello}"}' \
  https://kqwwkp0pr7.lp.gql.zone/graphql

joka antaa meille onnistuneesti odotetun tuloksen:

{
  "data": {
    "hei": "Hei maailma!"
  }
}

Suorita GraphQL Server paikallisesti

Mainitsimme, että kaikki Launchpadilla luomasi ovat ladattavissa, joten jatkakaamme.

Paketti koostuu kahdesta tiedostosta. Ensimmäinen, schema.js, on mitä meillä on yllä.

Toinen, server.js, oli näkymätön Launchpadissa, ja se tarjoaa taustalla olevan Apollo Server -toiminnon, jota powered by Express, suosittu Node.js-kehys.

Se ei ole yksinkertaisin esimerkki Apollo-palvelimen asennuksesta, joten selityksen vuoksi korvaan sen yksinkertaisella esimerkillä (mutta tutkikaa mielestäsi sen jälkeen, kun olet ymmärtänyt perusteet).

Ensimmäinen Apollo Server -koodisi

Suorita ensin npm install ja npm start lataamasi Launchpad-koodilla.

Previusin alustetut solmupalvelimet käyttävät nodemonia palvelimen uudelleenkäynnistämiseen, kun tiedostot muuttuvat, joten kun muutat koodia, palvelin käynnistetään uudelleen tehdyillä muutoksilla.

Lisää tämä koodi server.js:

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

const-palvelin = express ()

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

palvelin.listen (3000, () => {
  console.log ('GraphQL-kuuntelu osoitteessa http: // localhost: 3000 / graphql')
})

Vain 11 rivillä tämä on paljon yksinkertaisempaa kuin Launchpadin asettama palvelin, koska poistimme kaikki asiat, jotka tekivät koodista joustavamman heidän tarpeisiinsa.

Koodaus pakottaa sinut tekemään vaikeita päätöksiä: kuinka paljon joustavuutta tarvitset nyt? Kuinka tärkeää on puhdas, ymmärrettävä koodi, jonka voit noutaa kuuden kuukauden kuluttua ja helposti muokata tai siirtää muille kehittäjille ja tiimin jäsenille, jotta he voisivat olla tuottavia niin vähän aikaa kuin tarvitaan?

Tämä on mitä koodi tekee:

Tuomme ensin muutaman kirjaston, jota aiomme käyttää.

  • ilmaista, mikä antaa taustalla olevan verkkotoiminnon paljastaa päätepisteen
  • bodyParser on Solmu-kehon jäsentävä väliohjelmisto
  • graphqlExpress on Apollo Server -objekti Expressille
const express = vaadi ('express')
const bodyParser = vaadi ('body-parser')
const {graphqlExpress} = vaadi ('apollo-server-express')

Seuraavaksi tuomme yllä olevaan schema.js-tiedostoon luomamme GraphQLSchema-objektin kaaviona:

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

Tässä on jokin vakio Express-sarja, ja me vain alustamme palvelimen portissa 3000

const-palvelin = express ()

Nyt olemme valmiita alustamaan Apollo Server:

graphqlExpress ({schema})

ja välitämme sen takaisinsoitona päätepisteeseemme HTTP JSON -pyyntöihin:

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

Tarvitsemme nyt vain Expressin käynnistämisen:

palvelin.listen (3000, () => {
  console.log ('GraphQL-kuuntelu osoitteessa http: // localhost: 3000 / graphql')
})

Lisää GraphiQL-päätepiste

Jos käytät GraphiQL: tä, voit helposti lisätä / graphiql-päätepisteen kuluttaaksesi GraphiQL: n interaktiivisella selaimen sisäisessä IDE: ssä:

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

Meidän on nyt vain käynnistettävä Express-palvelin:

server.listen (PORT, () => {
  console.log ('GraphQL-kuuntelu osoitteessa http: // localhost: 3000 / graphql')
  console.log ('GraphiQL-kuuntelu osoitteessa http: // localhost: 3000 / graphiql')
})

Voit testata sen käyttämällä curl-ohjelmaa uudelleen:

$ curl \
  -X POST \
  -H "Sisältö-tyyppi: application / json" \
  --data '{"kysely": "{hello}"}' \
  http: // localhost: 3000 / graphql

Tämä antaa sinulle saman tuloksen kuin yllä, jossa soitit Launchpad-palvelimille:

{
  "data": {
    "hei": "Hei maailma!"
  }
}
Haluatko oppia JavaScriptiä? Hanki ilmainen e-kirjani osoitteesta jshandbook.com