GraphQL - Configuración del entorno

En este capítulo, aprenderemos sobre la configuración del entorno para GraphQL. Para ejecutar los ejemplos de este tutorial, necesitará lo siguiente:

  • Una computadora con Linux, macOS o Windows.

  • Un navegador web, preferiblemente la última versión de Google Chrome.

  • Una versión reciente de Node.js instalada. Se recomienda la última versión de LTS.

  • Visual Studio Code con la extensión GraphQL para VSCode instalada o cualquier editor de código de su elección.

Cómo construir un servidor GraphQL con Nodejs

Pasaremos por un enfoque detallado paso a paso para construir el servidor GraphQL con Nodejs como se muestra a continuación:

Paso 1: verificar las versiones de nodo y Npm

Después de instalar NodeJs, verifique la versión de node y npm usando los siguientes comandos en la terminal:

C:\Users\Admin>node -v
v8.11.3

C:\Users\Admin>npm -v
5.6.0

Paso 2: cree una carpeta de proyecto y ábrala en VSCode

La carpeta raíz del proyecto puede denominarse test-app.

Abra la carpeta usando el editor de código de Visual Studio siguiendo las instrucciones a continuación:

C:\Users\Admin>mkdir test-app
C:\Users\Admin>cd test-app
C:\Users\Admin\test-app>code.

Paso 3: cree package.json e instale las dependencias

Cree un archivo package.json que contendrá todas las dependencias de la aplicación del servidor GraphQL.

{
   "name": "hello-world-server",
   "private": true,
   "scripts": {
      "start": "nodemon --ignore data/ server.js"
   },
   
   "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"
   },
   
   "devDependencies": {
      "nodemon": "1.17.1"
   }
}

Instale las dependencias usando el comando como se indica a continuación:

C:\Users\Admin\test-app>npm install

Paso 4: crear una base de datos de archivos planos en la carpeta de datos

En este paso, usamos archivos planos para almacenar y recuperar datos. Crea una carpeta de datos y agrega dos archivosstudents.json y colleges.json.

Lo siguiente es el colleges.json archivo -

[
   {
      "id": "col-101",
      "name": "AMU",
      "location": "Uttar Pradesh",
      "rating":5.0
   },
   
   {
      "id": "col-102",
      "name": "CUSAT",
      "location": "Kerala",
      "rating":4.5
   }
]

Lo siguiente es el students.json archivo -

[
   {
      "id": "S1001",
      "firstName":"Mohtashim",
      "lastName":"Mohammad",
      "email": "[email protected]",
      "password": "pass123",
      "collegeId": "col-102"
   },
   
   {
      "id": "S1002",
      "email": "[email protected]",
      "firstName":"Kannan",
      "lastName":"Sudhakaran",
      "password": "pass123",
      "collegeId": "col-101"
   },
   
   {
      "id": "S1003",
      "email": "[email protected]",
      "firstName":"Kiran",
      "lastName":"Panigrahi",
      "password": "pass123",
      "collegeId": "col-101"
   }
]

Paso 5: crear una capa de acceso a datos

Necesitamos crear un almacén de datos que cargue el contenido de la carpeta de datos. En este caso, necesitamos variables de colección, estudiantes y universidades . Siempre que la aplicación necesita datos, utiliza estas variables de colección.

Cree el archivo db.js en la carpeta del proyecto de la siguiente manera:

const { DataStore } = require('notarealdb');

const store = new DataStore('./data');

module.exports = {
   students:store.collection('students'),
   colleges:store.collection('colleges')
};

Paso 6: crear un archivo de esquema, schema.graphql

Cree un archivo de esquema en la carpeta del proyecto actual y agregue el siguiente contenido:

type Query  {
   test: String
}

Paso 7: crear un archivo de resolución, resolvers.js

Cree un archivo de resolución en la carpeta del proyecto actual y agregue el siguiente contenido:

const Query = {
   test: () => 'Test Success, GraphQL server is up & running !!'
}
module.exports = {Query}

Paso 8: crear Server.js y configurar GraphQL

Cree un archivo de servidor y configure GraphQL de la siguiente manera:

const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const db = require('./db');

const port = process.env.PORT || 9000;
const app = express();

const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})
const resolvers = require('./resolvers')

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

app.use(cors(), bodyParser.json());

const  {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

app.listen(
   port, () => console.info(
      `Server started on port ${port}`
   )
);

Paso 9: Ejecute la aplicación y pruebe con GraphiQL

Verifique la estructura de carpetas de la aplicación de prueba del proyecto de la siguiente manera:

test-app /
   -->package.json
   -->db.js
   -->data
      students.json
      colleges.json
   -->resolvers.js
   -->schema.graphql
   -->server.js

Ejecute el comando npm start como se indica a continuación:

C:\Users\Admin\test-app>npm start

El servidor se ejecuta en el puerto 9000, por lo que podemos probar la aplicación usando la herramienta GraphiQL. Abra el navegador e ingrese la URL http: // localhost: 9000 / graphiql. Escriba la siguiente consulta en el editor:

{
   Test 
}

La respuesta del servidor se da a continuación:

{
   "data": {
      "test": "Test Success, GraphQL server is running !!"
   }
}