Introduzione alla creazione di API e app graphql in nodo.js

La comunicazione e il trasferimento di dati tra il front -end e il backend di qualsiasi applicazione si verificano tramite API (interfaccia di programmazione dell'applicazione). Esistono molti tipi diversi di API utilizzati per comunicare tra applicazioni anteriori e back-end come API RESTful, SOAP API, API GraphQL, ecc. L'API GraphQL è una tecnologia relativamente nuova ed è molto più veloce di altri tipi di API disponibili. Fetching Data dal database utilizzando l'API GraphQL è molto più veloce dell'API REST. Durante l'utilizzo dell'API GraphQL, il client ha il controllo per recuperare solo i dati richiesti invece di ottenere tutti i dettagli; Ecco perché l'API GraphQL funziona più velocemente dell'API REST.

Installazione di pacchetti

Costruiremo un nodo.Applicazione JS utilizzando l'API GraphQL, quindi dobbiamo installare il nodo.JS e NPM per questo prima di iniziare il progetto.

ubuntu@ubuntu: ~ $ sudo apt -get update -y
ubuntu@ubuntu: ~ $ sudo apt-get install nodejs
ubuntu@ubuntu: ~ $ sudo apt-get Installa npm

Impostazione del progetto

Useremo il framework "Express" dal nodo.JS per costruire la nostra applicazione. Crea una directory denominata "graphql" e avvia il progetto.

ubuntu@ubuntu: ~ $ mkdir graphql
ubuntu@ubuntu: ~ $ cd graphql/
ubuntu@ubuntu: ~ $ npm init -y

Setup MongoDB

Nel nostro progetto GraphQL, useremo MongoDB come database. MongoDB è un database di schema e memorizza i dati sotto forma di coppie di chiavi. Per installare MongoDB, seguire i passaggi dati.

Importa la chiave GPG pubblica per MongoDB.

ubuntu@ubuntu: ~ $ wget -qo - https: // www.MongodB.org/statico/pgp/server-4.4.ASC | sudo Apt-Key Aggiungi -

Crea il file dell'elenco per MongoDB.

ubuntu@ubuntu: ~ $ echo "deb [arch = amd64, arm64] https: // repo.MongodB.Org/Apt/Ubuntu Bionic/MongoDB-ORG/4.4 Multiverse "| sudo tee/etc/apt/fonti.elenco.D/MongoDB-ORG-4.4.elenco

Aggiorna i repository locali.

ubuntu@ubuntu: ~ $ sudo apt -get update -y

Installa il pacchetto MongoDB.

ubuntu@ubuntu: ~ $ sudo apt-get install -y mongodb-org

Inizia e abilita Mongod.servizio.

ubuntu@ubuntu: ~ $ sudo systemctl avvia mongolo.servizio
ubuntu@ubuntu: ~ $ sudo systemctl abilita Mongod.servizio

Installazione di moduli NPM

Per la nostra applicazione GraphQL, dobbiamo installare alcuni pacchetti NPM. Installeremo CORS, Express, Body-Parser, Mongoose, ecc.

ubuntu@ubuntu: ~ $ cd graphql/
ubuntu@ubuntu: ~ $ npm Installa Cors Express Body-Parser Mongoose-Save

Per creare un'API GraphQL, dobbiamo installare un pacchetto NPM extra chiamato 'Apollo-Server-Express.'Questo pacchetto NPM viene utilizzato per eseguire GraphQL Server con tutto il nodo.framework HTTP JS come 'Express.'

ubuntu@ubuntu: ~ $ npm Installa Apollo-Server-Express-Save

Definizione dello schema MongoDB

Ora abbiamo il nostro ambiente impostato per la nostra applicazione graphql in nodo.JS, ed è tempo di definire uno schema per la nostra applicazione. Crea modelli/studente di un file.JS 'nella directory del progetto radice.

// Definizione dello schema degli studenti
const mongoose = requisite ('mongoose');
const studentichema = new Mongoose.Schema(
nome:
Tipo: stringa,
Richiesto: vero
,
classe:
Tipo: numero,
Richiesto: vero
,
maggiore:
Tipo: stringa,
Richiesto: vero

,
Timestamp: vero
);
const studente = mongoose.Model ("Studente", Studentschema);
modulo.Exports = Student, Studentschema

Nello schema sopra definito, ogni studente deve avere un nome, una classe e un maggiore.

Costruire API GraphQL

Dopo aver creato lo schema dello studente, ora creeremo API GraphQL. Crea uno schema '.JS 'per scrivere i parametri grafici. Esistono due parametri, "tipi" e "risolutori", utilizzati nell'API GraphQL. In "Tipi", specificheremo il nostro schema, le domande (E.G., Fare richieste di ottenere) e mutazioni (E.G., Aggiornare o eliminare le richieste) allo schema specificato. Scriveremo i diversi metodi definiti in "tipi" per collegare le query e le mutazioni con il database in "Resolvers.'

// Importazione dello schema e del modulo
const gql = requisito ('apollo-server-express');
const studente = requisite ('./modelli/studente ').Alunno;
// Definizione dello schema, della query e della mutazione
const typedefs = gql '
digitare studente
L'ho fatto!,
Nome: String!,
Classe: int!,
Maggiore: stringa!

tipo query
GetStudents: [Studente],
getStudentById (ID: ID!): Alunno

type mutation
AddStudent (nome: stringa!, Classe: int!, Maggiore: stringa! ): Alunno
updateStudent (nome: stringa!, Classe: int!, Maggiore: stringa! ): Alunno
deleteStudent (ID: ID! ): Alunno
'
// Definire i risolurs
const resolvers =
Query:
getStudents: (genitore, args) =>
Restituisci lo studente.Trovare();
,
getStudentById: (genitore, args) =>
Restituisci lo studente.FindById (args.id);

,
Mutazione:
AddStudent: (genitore, args) =>
Let Student = New Student (
Nome: Args.nome,
Classe: args.classe,
Maggiore: args.maggiore
);
Restituisci lo studente.salva();
,
updateStudent: (genitore, args) =>
Se(!args.id) ritorno;
Restituisci lo studente.FindOnAndupdate (
_id: args.id
,

$ set:
Nome: Args.nome,
Classe: args.classe,
Maggiore: args.maggiore

,
new: true, (err, studente) =>
if (err)
console.log (err);
altro ;
)



modulo.Exports =
typedefs,
Risolvi

Creazione del server API GraphQL

Ora abbiamo quasi finito di creare l'applicazione GraphQL. L'unico passaggio rimasto è creare il server. Crea un file denominato "app.JS 'per configurare i parametri del server.

// Importazione dei pacchetti richiesti
const espress = requisito ('express');
const mongoose = requisite ('mongoose');
const bodyParser = requisito ('Body-Parser');
const cors = requisito ('cors');
const Apolloserver = requisite ('Apollo-Server-Express');
// Schema di importazione
const typedefs, resolvers = requisite ('./schema');
// Connessione a MongoDB
const url = “MongoDB: // 127.0.0.1: 27017/studenti ”;
const connect = Mongoose.connect (url, usenewurlparser: true);
Collegare.Quindi ((db) =>
console.log ("connessione riuscita");
, (err) =>
console.log (err);
);
// Creazione di server
const server = new Apolloserver (
Typedefs: typedefs,
Risolvi: risolutori
);
const app = express ();
app.Usa (BodyParser.json ());
app.usare ('*', cors ());
server.ApplicatMidDleware (app);
app.Ascolta (8000, () =>

console.log ('ascoltare 8000');
)

Testare l'API GraphQL

Abbiamo il nostro server GraphQL attivo ed in esecuzione sulla porta 8000 ed è tempo di testare l'API GraphQL. Apri la pagina Web GraphQL nel browser visitando il seguente URL.

http: // localhost: 8000/graphql

E aprirà la seguente pagina web.

Aggiungi lo studente al database utilizzando GraphQL API.

Allo stesso modo, aggiungi più studenti e dopo aver aggiunto lo studente, ottieni tutti gli studenti che utilizzano graphql API.

Nota l'ID di uno degli studenti e ottenere lo studente specifico usando il suo ID.

Conclusione

Il recupero dei dati dal database utilizzando l'API REST standard rende la query rallentata poiché a volte otteniamo più dati di quanto richiesto. Usando GraphQL, possiamo recuperare esattamente i dati richiesti che rendono più veloce l'API graphql. In questo progetto demo, abbiamo solo un singolo schema, quindi abbiamo creato API GraphQL per quel singolo schema. Inoltre, abbiamo definito da tre a quattro metodi per lo schema. Puoi creare più di una query o mutazioni in base alla tua applicazione.