Cos’\u00e8 GraphQL?<\/h2>\n
Dalla documentazione ufficiale<\/a>: “GraphQL \u00e8 un linguaggio di interrogazione per le API e un runtime per soddisfare tali interrogazioni con i dati esistenti. GraphQL fornisce una descrizione completa e comprensibile dei dati della vostra API, d\u00e0 ai clienti la possibilit\u00e0 di chiedere esattamente ci\u00f2 di cui hanno bisogno e nient’altro, rende pi\u00f9 facile l’evoluzione delle API nel tempo e rende disponibili potenti strumenti per gli sviluppatori”<\/p>\n GraphQL \u00e8 un runtime lato server per l’esecuzione di query che utilizzano il sistema di tipi definito per i dati. Inoltre, GraphQL non \u00e8 legato ad alcun database o motore di archiviazione specifico. Al contrario, si appoggia al vostro codice e al vostro archivio dati esistente. Troverete un confronto dettagliato di queste tecnologie nella guida GraphQL vs. API RESTful<\/a>.<\/p>\n Per creare un servizio GraphQL, iniziate definendo i tipi di schema e creando i campi che utilizzano tali tipi. Poi fornite un function resolver da eseguire su ogni campo e tipo ogni volta che i dati vengono richiesti dal client.<\/p>\n Il sistema di tipi di GraphQL viene utilizzato per descrivere quali dati possono essere interrogati e quali dati possono essere manipolati. \u00c8 il cuore di GraphQL. Vediamo quali sono i diversi modi in cui possiamo descrivere e manipolare i dati in GraphQL.<\/p>\n I tipi oggetto di GraphQL sono modelli di dati contenenti campi fortemente tipizzati. Dovrebbe esserci una mappatura 1 a 1 tra i modelli e i tipi di GraphQL. Di seguito \u00e8 riportato un esempio di tipo GraphQL:<\/p>\n GraphQL Query definisce tutte le query che un client pu\u00f2 eseguire sull’API di GraphQL. Per convenzione, occorre definire un sito Di seguito definiamo e mappiamo le query alle corrispondenti API RESTful:<\/p>\n Se le GraphQL Query sono richieste Mettiamo tutte le mutazioni in un unico Avrete notato l’uso dei tipi Potete definire i tipi di input come quello riportato di seguito:<\/p>\n I resolver indicano a GraphQL cosa fare quando viene richiesta una query o una mutazione. Si tratta di una funzione di base che si occupa di raggiungere il livello del database per eseguire le operazioni CRUD (create, read, update, delete), di raggiungere un endpoint API RESTful interno o di chiamare un microservizio<\/a> per soddisfare la richiesta del client.<\/p>\n Potete creare un nuovo file resolvers.js<\/strong> e aggiungere il seguente codice:<\/p>\n Lo schema GraphQL \u00e8 ci\u00f2 che GraphQL espone al mondo. Pertanto, i tipi, le query e le mutazioni saranno inclusi nello schema per essere esposti.<\/p>\n Di seguito spieghiamo come esporre i tipi, le query e le mutazioni:<\/p>\n Nello script precedente, abbiamo incluso i siti GraphQL offre un’implementazione per tutti i principali linguaggi di programmazione e Node.js non ne \u00e8 esente. Sul sito ufficiale di GraphQL<\/a> c’\u00e8 una sezione dedicata al supporto di JavaScript<\/a> e ci sono anche altre implementazioni di GraphQL per semplificare la scrittura e la programmazione.<\/p>\n GraphQL Apollo fornisce un’implementazione per Node.js ed Express.js e permette di iniziare a lavorare facilmente con GraphQL.<\/p>\n Nella prossima sezione scoprirete come creare e sviluppare la vostra prima applicazione GraphQL con Node.js e il framework backend Express.js<\/a> utilizzando GraphQL Apollo.<\/p>\n Creare un server per l’API di GraphQL con Express.js \u00e8 semplice. In questa sezione vedremo come costruire un server GraphQL.<\/p>\n Per prima cosa, bisogna installare e configurare un nuovo progetto Express.js. Create una cartella per il vostro progetto e installate Express.js con questo comando:<\/p>\n Il comando precedente crea un nuovo file package.json<\/strong> e installa la libreria Express.js nel progetto.<\/p>\n Successivamente, struttureremo il nostro progetto come mostrato nell’immagine qui sotto. Conterr\u00e0 diversi moduli per le funzionalit\u00e0 del progetto, come gli utenti, i todos, ecc.<\/p>\n Iniziamo installando le dipendenze Express.js di GraphQL con il seguente comando:<\/p>\n Successivamente, creeremo un file index.js<\/strong> all’interno della cartella modules e aggiungeremo il seguente frammento di codice:<\/p>\n Scomponiamo il frammento di codice:<\/p>\n Per prima cosa, abbiamo importato le librerie necessarie e creato i tipi di query e di mutazione predefiniti. Per ora, la query e la mutazione impostano solo la versione dell’API GraphQL. Ma estenderemo la query e la mutazione in modo da includere altri schemi man mano che procediamo.<\/p>\n Abbiamo poi creato un nuovo tipo scalare per il tempo e il nostro primo resolver per la query e la mutazione create in precedenza. Inoltre, abbiamo generato uno schema utilizzando la funzione Lo schema generato include tutti gli altri schemi che abbiamo importato e ne includer\u00e0 altri quando li creeremo e importeremo.<\/p>\n Il frammento di codice precedente mostra che abbiamo importato diversi schemi nella funzione makeExecutableSchema. Questo approccio ci aiuta a strutturare l’applicazione per renderla pi\u00f9 complessa. Successivamente, creeremo gli schemi Todo e User che abbiamo importato.<\/p>\n Lo schema Todo mostra semplici operazioni CRUD che gli utenti dell’applicazione possono eseguire. Di seguito \u00e8 riportato lo schema che implementa le operazioni CRUD di Todo.<\/p>\n Analizziamo il frammento di codice e scomponiamolo:<\/p>\n Per prima cosa, abbiamo creato uno schema per il nostro Todo utilizzando le parole chiave GraphQL Successivamente, abbiamo creato un resolver, che viene utilizzato per recuperare i dati corretti quando viene richiamata una particolare query o mutazione.<\/p>\n Una volta creata la funzione resolver, possiamo creare singoli metodi per la logica e la manipolazione del database, come mostrato nell’esempio create-todo.js<\/strong>.<\/p>\n Create un file create-user.js<\/strong> nella cartella Il frammento di codice qui sopra \u00e8 un modo semplificato per creare un nuovo Todo nel nostro database utilizzando l’ORM Sequelize. Potete approfondire in Sequelize e su come configurarlo con Node.js<\/a>.<\/p>\n Potrete seguire la stessa procedura per creare diversi schemi a seconda della vostra applicazione oppure clonare il progetto completo da GitHub<\/a>.<\/p>\n Successivamente, configureremo il server con Express.js ed eseguiremo l’applicazione Todo appena creata con GraphQL e Node.js.<\/p>\nLa Terminologia di GraphQL<\/h2>\n
Tipi Oggetto<\/h3>\n
type User {\n id: ID! # The \"!\" means required\n firstname: String\n lastname: String\n email: String\n username: String\n todos: [Todo] # Todo is another GraphQL type\n}<\/code><\/pre>\nQuery<\/h3>\n
RootQuery<\/code> che conterr\u00e0 tutte le query esistenti.<\/p>\ntype RootQuery {\n user(id: ID): User # Corresponds to GET \/api\/users\/:id\n users: [User] # Corresponds to GET \/api\/users\n todo(id: ID!): Todo # Corresponds to GET \/api\/todos\/:id\n todos: [Todo] # Corresponds to GET \/api\/todos\n}<\/code><\/pre>\nMutazioni<\/h3>\n
GET<\/code>, le mutazioni sono richieste POST<\/code>, PUT<\/code>, PATCH<\/code> e DELETE<\/code> che manipolano le API di GraphQL.<\/p>\nRootMutation<\/code>:<\/p>\ntype RootMutation {\n createUser(input: UserInput!): User # Corresponds to POST \/api\/users\n updateUser(id: ID!, input: UserInput!): User # Corresponds to PATCH \/api\/users\n removeUser(id: ID!): User # Corresponds to DELETE \/api\/users\n createTodo(input: TodoInput!): Todo\n updateTodo(id: ID!, input: TodoInput!): Todo\n removeTodo(id: ID!): Todo\n}<\/code><\/pre>\n-input<\/code> per le mutazioni, come UserInput<\/code> e TodoInput<\/code>. \u00c8 una buona pratica definire sempre i tipi di input per la creazione e l’aggiornamento delle risorse.<\/p>\ninput UserInput {\n firstname: String!\n lastname: String\n email: String!\n username: String!\n}<\/code><\/pre>\nResolver<\/h3>\n
import sequelize from '..\/models';\nexport default function resolvers () {\n const models = sequelize.models;\n return {\n \/\/ Resolvers for Queries\n RootQuery: {\n user (root, { id }, context) {\n return models.User.findById(id, context);\n },\n users (root, args, context) {\n return models.User.findAll({}, context);\n }\n },\n User: {\n todos (user) {\n return user.getTodos();\n }\n },\n }\n \/\/ Resolvers for Mutations\n RootMutation: {\n createUser (root, { input }, context) {\n return models.User.create(input, context); \n },\n updateUser (root, { id, input }, context) {\n return models.User.update(input, { ...context, where: { id } });\n },\n removeUser (root, { id }, context) {\n return models.User.destroy(input, { ...context, where: { id } });\n },\n \/\/ ... Resolvers for Todos go here\n }\n}<\/code><\/pre>\nSchema<\/h3>\n
schema {\n query: RootQuery\n mutation: RootMutation\n}<\/code><\/pre>\nRootQuery<\/code> e RootMutation<\/code> creati in precedenza per esporli al mondo.<\/p>\nCome Funziona GraphQL con Node.js ed Express.js?<\/h2>\n
Configurare GraphQL con Express.js<\/h2>\n
Inizializzare il Progetto con Express<\/h3>\n
cd <project-name> && npm init -y\nnpm install express<\/code><\/pre>\n![\"Un](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/graphql-todo-structrue.png\")
Inizializzare GraphQL<\/h3>\n
npm install apollo-server-express graphql @graphql-tools\/schema --save<\/code><\/pre>\nCreare Schemi e Tipi<\/h3>\n
const { gql } = require('apollo-server-express');\nconst users = require('.\/users');\nconst todos = require('.\/todos');\nconst { GraphQLScalarType } = require('graphql');\nconst { makeExecutableSchema } = require('@graphql-tools\/schema');\nconst typeDefs = gql`\n scalar Time\n type Query {\n getVersion: String!\n }\n type Mutation {\n version: String!\n }\n`;\nconst timeScalar = new GraphQLScalarType({\n name: 'Time',\n description: 'Time custom scalar type',\n serialize: (value) => value,\n});\nconst resolvers = {\n Time: timeScalar,\n Query: {\n getVersion: () => `v1`,\n },\n};\nconst schema = makeExecutableSchema({\n typeDefs: [typeDefs, users.typeDefs, todos.typeDefs],\n resolvers: [resolvers, users.resolvers, todos.resolvers],\n});\nmodule.exports = schema;<\/code><\/pre>\nAnalisi del Codice<\/h4>\n
Passo 1<\/h5>\n
![\"Interfaccia](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-1.png\")
Passo 2:<\/h5>\n
makeExecutableSchema<\/code>.<\/p>\n![\"Interfaccia](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-2.png\")
Creare lo Schema Todo<\/h3>\n
const { gql } = require('apollo-server-express');\nconst createTodo = require('.\/mutations\/create-todo');\nconst updateTodo = require('.\/mutations\/update-todo');\nconst removeTodo = require('.\/mutations\/delete-todo');\nconst todo = require('.\/queries\/todo');\nconst todos = require('.\/queries\/todos');\nconst typeDefs = gql`\n type Todo {\n id: ID!\n title: String\n description: String\n user: User\n }\n input CreateTodoInput {\n title: String!\n description: String\n isCompleted: Boolean\n }\n input UpdateTodoInput {\n title: String\n description: String\n isCompleted: Boolean\n } extend type Query {\n todo(id: ID): Todo!\n todos: [Todo!]\n }\n extend type Mutation {\n createTodo(input: CreateTodoInput!): Todo\n updateTodo(id: ID!, input: UpdateTodoInput!): Todo\n removeTodo(id: ID!): Todo\n }\n`;\n\/\/ Provide resolver functions for your schema fields\nconst resolvers = {\n \/\/ Resolvers for Queries\n Query: {\n todo,\n todos,\n },\n \/\/ Resolvers for Mutations\n Mutation: {\n createTodo,\n updateTodo,\n removeTodo,\n },\n};\nmodule.exports = { typeDefs, resolvers };<\/code><\/pre>\nCodice<\/h4>\n
Passo 1:<\/h5>\n
type<\/code>, input<\/code> e extend<\/code>. La parola chiave extend<\/code> viene utilizzata per ereditare e aggiungere nuove query e mutazioni alla query principale e alla mutazione esistente che abbiamo creato in precedenza.<\/p>\n![\"Un'interfaccia](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-3.png\")
Passo 2:<\/h5>\n
![\"Un'interfaccia](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0.png\")
.\/mutations\/<\/code> e aggiungete la logica per creare un nuovo Todo nel vostro database.<\/p>\nconst models = require('..\/..\/..\/models');\nmodule.exports = async (root, { input }, context) => {\n return models.todos.push({ ...input });\n};<\/code><\/pre>\nConfigurazione ed Esecuzione del Server<\/h3>\n
![\"Un'interfaccia](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/new_graphql_playground.png\")