GraphQL - Ejemplo

En este capítulo, crearemos una API simple que devuelve un mensaje de saludo, HelloWorld, y accederemos a él mediante GraphiQL.

Ejemplo

Este ejemplo se basa en el servidor NodeJS, Express y Apollo. Aprenderemos a poner todos los conceptos juntos con los siguientes pasos:

Paso 1: configuración de Express

ExpressJS es un marco de aplicación web que ayuda a crear sitios web y aplicaciones web. En este ejemplo, crearemos una API GraphQL sobre el marco Express.

El siguiente paso es crear una carpeta hello-world-servery navegue a la misma carpeta desde la terminal. Agregue package.json y dé un nombre al paquete. Dado que este paquete solo se usa internamente, podemos declararlo privado.

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

Instale las dependencias para el servidor Express como se muestra a continuación:

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

body-parser es un paquete de middleware que ayuda a Express a manejar las solicitudes HTTP Post de manera eficiente. cors es otro paquete de middleware que maneja el intercambio de recursos entre orígenes.

Crear un server.js archivo dentro de la carpeta del proyecto y escriba lo siguiente en él:

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}`)

Para verificar si el servidor Express está en funcionamiento, ejecute el siguiente código en la ventana de la terminal:

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

La siguiente salida se muestra en la consola del servidor. Esto muestra que el servidor express se está ejecutando en el puerto 9000.

server is up and running at 9000

Si abre el navegador y escribe http://localhost:9000, obtendrá la siguiente pantalla:

Para detener el servidor, presione Ctrl + C.

Paso 2: Instale GraphQL y Apollo Server

Ahora que Express está configurado, el siguiente paso es descargar las siguientes dependencias GraphQL:

graphql
graphql-tools
apollo-server-express@1

Usaremos el servidor Apollo v1.0 ya que es una versión estable. Escriba los siguientes comandos para instalar estas dependencias:

C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1

Podemos verificar si estas dependencias se instalaron correctamente marcando el package.json archivo que creamos previamente.

{
   "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"
   }
}

Paso 3: definir el esquema

Un esquema GraphQL define qué tipo de objeto se puede obtener de un servicio y qué campos tiene. El esquema se puede definir usandoGraphQL Schema Definition Language. Ahora, agregue el siguiente fragmento de código en elserver.js archivo -

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

Aquí, la consulta contiene un atributo de saludo que devuelve un valor de cadena .

Paso 4: crea un solucionador

El primer paso para crear un resolutor es agregar código para procesar la solicitud de campo de saludo. Esto se especifica en unresolver. La estructura de la función de resolución debe coincidir con el esquema. Agregue el siguiente fragmento de código en elserver.js archivo.

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

El segundo paso es vincular el esquema y el resolutor usando makeExecutableSchema. Esta función está predefinida en el módulo graphql-tools. Agregue el siguiente fragmento de código en el server.js archivo.

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

Paso 5: definir rutas para obtener datos de la aplicación ReactJS / GraphiQL

Agregue el siguiente fragmento de código en el server.js archivo -

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 función graphqlExpress ayuda a registrar la rutahttp://localhost:9000/graphql. La aplicación ReactJS puede usar este punto final para consultar datos. Del mismo modo, la función graphqliExpress ayuda a registrar la rutahttp://localhost:9000/graphiql. Esto será utilizado por el cliente del navegador GraphiQL para probar la API.

El código completo de server.js es el siguiente:

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}`))

Paso 6 - Inicie la aplicación

Ejecutar server.js usando Node.js de la siguiente manera:

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

Paso 7: prueba la API GraphQL

Abra el navegador y escriba http://localhost:9000/graphiql. En la pestaña de consulta de GraphiQL, ingrese lo siguiente:

{
   greeting
}

La respuesta del servidor se da a continuación:

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

La siguiente imagen ilustra la respuesta:

Note - Asegúrese de utilizar Apollo Server Versión 1.0.