GraphQL - Esempio

In questo capitolo, creeremo una semplice API che restituisce un messaggio di saluto, HelloWorld, e vi accediamo utilizzando GraphiQL.

Esempio

Questo esempio è basato su NodeJS, Express e Apollo server. Impareremo a mettere insieme tutti i concetti con i seguenti passaggi:

Passaggio 1: configurazione di Express

ExpressJS è un framework per applicazioni web che aiuta a creare siti web e applicazioni web. In questo esempio, costruiremo un'API GraphQL sopra il framework Express.

Il prossimo passo è creare una cartella hello-world-servere vai alla stessa cartella dal terminale. Aggiungi package.json e dai un nome al pacchetto. Poiché questo pacchetto viene utilizzato solo internamente, possiamo dichiararlo privato.

{
   "name":"hello-world-server",
   "private":true
}

Installa le dipendenze per il server Express come mostrato di seguito:

C:\Users\Admin\hello-world-server>npm install express body-parser cors

body-parser è un pacchetto middleware che aiuta Express a gestire le richieste HTTP Post in modo efficiente. cors è un altro pacchetto middleware che gestisce la condivisione di risorse tra le origini.

Creare un server.js file all'interno della cartella del progetto e digita quanto segue:

const bodyParser = require('body-parser')
   const cors = require('cors')
   const express = require('express')
   const port = process.env.PORT|| 9000
   const app = express()
   
   //register middleware
   app.use(bodyParser.json() , cors())
   app.listen(port, () =>  console.log(`server is up and running at ${port}`)

Per verificare se il server Express è attivo e in esecuzione, eseguire il codice seguente nella finestra del terminale:

C:\Users\Admin\hello-world-server>node server.js

Il seguente output viene visualizzato nella console del server. Ciò mostra che il server Express è in esecuzione sulla porta 9000.

server is up and running at 9000

Se apri il browser e digiti http://localhost:9000, otterrai la seguente schermata:

Per arrestare il server, premere Ctrl + C.

Passaggio 2: installare GraphQL e Apollo Server

Ora che Express è configurato, il passaggio successivo consiste nel scaricare le seguenti dipendenze GraphQL:

graphql
graphql-tools
[email protected]

Useremo Apollo server v1.0 poiché è una versione stabile. Digita i seguenti comandi per installare queste dipendenze:

C:\Users\Admin\hello-world-server>npm install graphql graphql-tools [email protected]

Possiamo verificare se queste dipendenze sono installate correttamente controllando il file package.json file che abbiamo creato in precedenza.

{
   "name": "hello-world-server",
   "private": true,
   
   "dependencies": {
      "apollo-server-express": "^1.4.0",
      "body-parser": "^1.18.3",
      "cors": "^2.8.4",
      "express": "^4.16.3",
      "graphql": "^0.13.2",
      "graphql-tools": "^3.1.1"
   }
}

Passaggio 3: definire lo schema

Uno schema GraphQL definisce quale tipo di oggetto può essere recuperato da un servizio e quali campi ha. Lo schema può essere definito utilizzandoGraphQL Schema Definition Language. Ora aggiungi il seguente frammento di codice nel fileserver.js file -

// Adding Type Definitions
const typeDefinition = `
   type Query  {
      greeting: String
   }

In questo caso, la query contiene un attributo di saluto che restituisce un valore stringa .

Passaggio 4: creare un resolver

Il primo passo nella creazione di un resolver è aggiungere del codice per elaborare la richiesta del campo di saluto. Questo è specificato in un fileresolver. La struttura della funzione resolver deve corrispondere allo schema. Aggiungi il seguente snippet di codice nel fileserver.js file.

// Adding resolver
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}

Il secondo passo è associare lo schema e il resolver usando makeExecutableSchema. Questa funzione è predefinita nel modulo graphql-tools. Aggiungi il seguente snippet di codice nel file server.js file.

const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

Passaggio 5: definire i percorsi per recuperare i dati dall'applicazione ReactJS / GraphiQL

Aggiungi il seguente snippet di codice nel file server.js file -

const {graphqlExpress, graphiqlExpress} = require('apollo-server-express')

   //create routes for graphql and graphiql
   app.use('/graphql',graphqlExpress({schema}))
   
   app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

La funzione graphqlExpress aiuta a registrare la rottahttp://localhost:9000/graphql. L'applicazione ReactJS può utilizzare questo endpoint per eseguire query sui dati. Allo stesso modo, la funzione graphqliExpress aiuta a registrare la rottahttp://localhost:9000/graphiql. Questo verrà utilizzato dal client del browser GraphiQL per testare l'API.

Il codice server.js completo è come indicato di seguito:

const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT||9000
const app = express()

app.use(bodyParser.json() , cors())
const typeDefinition = `
type Query  {
   greeting: String
}`
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}
const {makeExecutableSchema} = require('graphql-tools')

const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

const {graphqlExpress,graphiqlExpress} = require('apollo-server-express')

app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
app.listen(port, () =>  console.log(`server is up and running ${port}`))

Passaggio 6: avviare l'applicazione

Eseguire server.js utilizzando Node.js come segue -

C:\Users\Admin\hello-world-server>node server.js

Passaggio 7: testare l'API GraphQL

Apri il browser e digita http://localhost:9000/graphiql. Nella scheda query di GraphiQL, inserisci quanto segue:

{
   greeting
}

Di seguito viene fornita la risposta dal server:

{
   "data": {
      "greeting": "Hello GraphQL From TutorialsPoint !!"
   }
}

L'immagine seguente illustra la risposta:

Note - Assicurati di utilizzare Apollo Server versione 1.0.

↰ Previous page Next page ↱