GraphQL offre un'alternativa flessibile al classico approccio REST durante la creazione di un'API.

Uno dei fattori più cruciali da considerare durante la progettazione di un'applicazione è il tipo di architettura API da utilizzare. Una progettazione API efficiente è fondamentale per garantire che le app siano performanti per tutto il loro ciclo di vita.

L'architettura RESTful è l'approccio più popolare, ma presenta uno svantaggio significativo: una struttura di endpoint fissa che restituisce dati predeterminati. Questo design può comportare una comunicazione inefficiente.

Al contrario, GraphQL, un'alternativa a REST, offre maggiore flessibilità consentendoti di richiedere solo i dati di cui hai bisogno.

Cosa sono le API GraphQL?

GraphQL è un linguaggio di query che puoi usare per scrivere API di backend (Application Programming Interface). A differenza di API REST, che hanno più endpoint per dati diversi, le API GraphQL hanno un solo punto di ingresso.

I clienti possono specificare i dati di cui hanno bisogno nelle loro query da questo singolo punto di ingresso, rendendolo più flessibile ed efficiente per il recupero solo dei dati necessari.

instagram viewer

In poche parole, un'API GraphQL implementa l'architettura GraphQL descritta da Specifiche GraphQL. Questa progettazione implica la definizione dello schema, delle query e delle mutazioni con cui i client possono interagire.

Ecco una ripartizione semplificata dei componenti essenziali dell'architettura dell'API GraphQL:

  1. Schema: uno schema è una descrizione dei tipi di dati e operazioni forniti dall'API. Fondamentalmente, uno schema definisce la struttura dei dati disponibili e il tipo di query e mutazioni che un client può eseguire per modificare i dati.
  2. Query: i client utilizzano le query per recuperare i dati dal database specificando la struttura dei dati di cui hanno bisogno. Inoltre, possono nidificare più query in una singola richiesta HTTP per recuperare i dati correlati da più endpoint.
  3. Mutazioni: le mutazioni sono operazioni utilizzate per modificare i dati nel database. I client possono inviare richieste di mutazione per creare, aggiornare o eliminare dati.

Imposta un database MongoDB

Per iniziare, creare un database MongoDB. In alternativa, puoi configurare gratuitamente un cluster MongoDB nel cloud.Una volta configurato il database, copia la stringa URI di connessione al database di MongoDB.

Puoi trovare il codice di questo progetto nel suo file Deposito GitHub.

Crea un server Apollo

Server dell'Apollo è una popolare implementazione del server GraphQL che ti consentirà di creare API GraphQL in ambienti JavaScript, inclusi Node.js, Express e altri.

Crea una directory per un nuovo progetto e CD dentro:

mkdir graphql-API-mongoDB
cd graphql-API-mongoDB

Successivamente, inizializza un nuovo progetto Node.js.

npm init --sì

Questo comando crea un file pacchetto.json file.

Installa le dipendenze richieste

Eseguire il seguente comando per installare i pacchetti.

npm install apollo-server graphql mangusta

Infine, crea un file index.js file nella directory principale del progetto.

Configura il server Apollo

Aprire index.js e aggiungi il codice qui sotto:

cost {ApolloServer} = richiedere('apollo-server');
cost mangusta = richiedere('mangusta');
cost typeDefs = richiedere("./graphql/typeDefs");
cost risolutori = richiedere("./graphql/resolver");

cost servitore = nuovo ServerApollo({
typeDef,
risolutori
});

cost MONGO_URI = 'mongodb://localhost: 27017';

mangusta
.connect (MONGO_URI, {
useNewUrlParser: VERO,
usaTopologia unificata: VERO,
})
.Poi(() => {
consolare.tronco d'albero(`Db connesso`);
ritorno server.ascolta({ porta: 5000 });
})
.Poi((ris) => {
consolare.tronco d'albero(`Server in esecuzione su ${res.url}`);
})
.presa(errare => {
consolare.log (err.messaggio);
});

Questo codice inizializza un server GraphQL locale utilizzando la libreria Apollo Server. Quindi stabilisce una connessione a un database MongoDB con l'URI di connessione specificato.

Nota come il codice passa due argomenti alla nuova istanza di ApolloServer: typeDefs e resolver. Questi specificano i tipi di dati e le operazioni che l'API GraphQL può eseguire.

Dopo aver impostato la connessione al database MongoDB, il server inizia l'ascolto sulla porta 5000.

Definire il modello di dati

Crea una nuova cartella nella directory principale della cartella del tuo progetto e assegnagli un nome Modelli. In questa cartella, crea un nuovo nome file dataModel.js e aggiungervi il seguente codice:

cost {modello, schema} = richiedere('mangusta');

cost impiegatoSchema = nuovo Schema({
nome: Corda,
Dipartimento: Corda,
stipendio: Corda,
});

modulo.esporta = modello('Dipendente', schema dipendente);

Definire lo schema GraphQL

Uno schema GraphQL definisce la struttura dei dati che puoi interrogare utilizzando l'API GraphQL. Lo schema delinea anche le query e le mutazioni che l'API può eseguire. È possibile utilizzare le query per recuperare i dati e le mutazioni per modificarli.

Nella directory principale del tuo progetto, crea una nuova cartella e assegnale un nome graphql. All'interno di questa cartella, aggiungi due file: typeDefs.js E resolver.js

Aggiungi il codice seguente nel file typeDefs.js:

cost {gql} = richiedere("apollo-server");

cost typeDefs = gql`
digitare Impiegato {
L'ho fatto!
nome: Corda
Dipartimento: Corda
stipendio: Corda
}
input ImpiegatoInput {
nome: Corda
Dipartimento: Corda
stipendio: Corda
}
tipo Interrogazione {
getEmployee (id: ID): Impiegato n.ritorno Impiegato per id
dipendenti: [Dipendente] #ritorno vettore Di Dipendenti
}
digitare Mutazione {
createEmployee (employeeInput: EmployeeInput): Impiegato
updateEmployee (id: ID, dipendenteInput: ImpiegatoInput): Booleano
deleteDipendente (id: ID): Booleano
}
`;

modulo.exports = typeDefs;

Questo codice sopra usa il gql funzione fornita dal pacchetto apollo-server per creare uno schema GraphQL per i dati Employee.

Lo schema è costituito da quattro elementi principali: tipi di dati per le informazioni sui dipendenti, tipi di input, query e mutazioni che l'API può eseguire.

Definire i resolver per l'API GraphQL

Un resolver è una funzione GraphQL che definisce i dati da trasmettere quando un client invia una query API per recuperare i dati. In sostanza, il suo ruolo principale è recuperare i dati richiesti dall'origine dati specificata e restituirli al client.

Aggiungi il codice qui sotto al file resolver.js file nel graphql cartella. I resolver, in questo caso, sono specificati all'interno degli oggetti Query e Mutation.

L'oggetto Query definisce due metodi: dipendenti E getEmployee. Questi metodi sono responsabili del recupero dei dati dei dipendenti dal database su richiesta di un cliente.

cost Impiegato= richiedere("../modelli/dipendentiModello");

// risolutori GraphQL
cost risolutori = {
Domanda: {
dipendenti: asincrono () => {
Tentativo {
cost dipendenti = aspetta Impiegato.find({});
ritorno dipendenti;
} presa (errore) {
consolare.errore (errore);
gettarenuovoErrore("Impossibile recuperare i dipendenti");
}
},
getDipendente: asincrono (genitore, args) => {
Tentativo {
cost dipendente = aspetta Employee.findById (args.id);
ritorno dipendente;
} presa (errore) {
consolare.errore (errore);
gettarenuovoErrore("Impossibile recuperare il dipendente in base all'ID");
}
},
},

L'oggetto Mutazione ha tre metodi: createEmployee, updateDipendente, E deleteDipendente. Questi metodi apportano modifiche ai dati archiviati nel database MongoDB.

 Mutazione: {
asincrono creaDipendente (_, { dipendenteInput: { nome, reparto, stipendio } }) {
cost nuovoDipendente = nuovo Dipendente({
nome: nome,
dipartimento: dipartimento,
stipendio: stipendio
});

cost risposta = aspetta nuovoDipendente.save();
consolare.log (nuovoDipendente);

ritorno {
id: risposta._id,
...risposta._doc
}
},

asincrono aggiornaDipendente (_, {id, dipendenteInput: {nome, reparto, stipendio}}) {
cost aggiornatoDipendente = aspetta Impiegato.aggiornamentoUno(
{ _id: id },
{ nome, reparto, stipendio }
);

Se (!dipendente aggiornato) {
gettarenuovoErrore(`Dipendente con ID: ${id} non trovato');
}

ritornoVERO; // Restituisce un valore booleano che indica il successo dell'aggiornamento
},

asincrono deleteDipendente (_, {id}) {
cost cancellatoDipendente = aspetta Dipendente.deleteUno({ _id: id });

Se (!eliminatoDipendente || eliminatoDipendente.eliminatoCount 0) {
gettarenuovoErrore(«Dipendente con documento d'identità ${id} non trovato');
}

ritornoVERO; // Restituisce un valore booleano che indica il successo dell'eliminazione
},
 },
};

modulo.exports = risolutori;

Infine, esegui questo comando per avviare il server:

nodo index.js

Una volta stabilita una connessione al database, il server si avvierà sulla porta 5000.

Puoi andare avanti e testare la funzionalità dell'API GraphQL effettuando richieste HTTP dal playground GraphQL nel tuo browser.

Ad esempio, puoi utilizzare il createEmployee mutazione per aggiungere nuovi dati dei dipendenti nel database MongoDB.

Popolarità di GraphQL nella comunità degli sviluppatori

GraphQL sta guadagnando terreno nella comunità degli sviluppatori come approccio di progettazione API alternativo alla popolare architettura REST.

Ciò è dovuto alla sua capacità di fornire un modo più flessibile ed efficiente per recuperare i dati da varie fonti, il tutto da un unico punto di ingresso. Ciò evita di dover gestire più endpoint per dati diversi, che è un problema comune con l'architettura dell'API REST. Questa soluzione di progettazione semplifica il processo di creazione e gestione delle API di back-end.