Sirviendo el API en la web

Clase 5 de 25 • Curso Práctico de GraphQL con JavaScript

Resumen

Ya viste que nuestra API funciona a través de la línea de comandos, pero necesitamos que está funcione dentro de la web, para ello necesitas de las dependencias de express y un middleware de GraphQL, vamos a instalarlo con el siguiente comando:

npm i express express-graphql

Para evitar el proceso de detener nuestro servidor cada que ejecutamos un nuevo cambio vamos a utilizar la dependencia de desarrollo Nodemon:

npm i nodemon -D

Miguel de la Rosa

student•

Ya no es gqlMiddleware ahora es const { graphqlHTTP } = require('express-graphql');

Andrés Felipe Moreno Jiménez

student•

Gracias, tu aporte me ayudó a corregir el problema de ejecución.

José Heriberto López Ruiz

student•

Muchísimas gracias, estaba trabado en ese paso. ¿Dónde pudiste ver la resolución de esa parte? ¿Viene en la documentación, a caso?

Karl Heitmann

student•

Una sugerencia, porfavor escriba el código un poco más arriba de la pantalla. Porque los controles del video obstruyen la vista de lo que está usted escribiendo.

Lo mismo sucede con el panel del terminal, que cuando lo levanta este tapa lo último que escribió.

Saludos

Eden Gomez Gress

student•

Buen dia companeros, les comento para los que no sepan como declarar el puerto como variable de entorno:

1,- Crear un archivo a nivel de la carpeta raiz con el nombre de ".env"

.env

PORT=9900

2.- Instalar la libreria de "dotenv" con npm

npm i dotenv

3.- Importar la libreria dentro de "index.js"

'use strict'
require('dotenv').config()

const { graphql, buildSchema } = require('graphql')
const express = require('express')
const gqlMiddleware = require('express-graphql')


const app = express()
const PORT = process.env.PORT || 3000

// Definiendo schema
const schema = buildSchema(`
type Query {
  "Retorna saludo al mundo"
  hello: String
  "Retorna un saludoa todos"
  greetings: String
}
`)

// Configurar los resolvers
const resolvers = {
  hello: () => {
    return 'Hello world'
  },
  greetings: () => {
    return 'How are you?'
  }
}

app.use('/', gqlMiddleware({
  schema: schema,
  rootValue: resolvers,
  graphiql: true
}))

app.listen(PORT, () => {
  console.log(`Server listen on port http://localhost:${process.env.PORT}/api`)
})


// // Ejecutar el primer Hello
// graphql(schema, '{ greetings }', resolve).then((data) => {
//   console.log(data)
// })

Talves la majoria ya lo sabia, pero para los novatos como yo espero les sirva.

Carlos Pinto

student•

Gracias! Me aclaraste una gran duda hermano. Saludos!

Irungaray Agustin

student•

Gracias, no me acordaba como hacerlo

Luis Paredes

student•

Este profesor es demasiado bueno lo llevo viendo desde node y me encanta como profesor.

Edwin García

student•

No lo conocía, va a tocar ir a ver el curso de Node

Enzo Tamaquiza Murillo

student•

muy bueno tambien en el curso de electron js

Adrián de los Reyes

student•

La nueva version de GraphQL no soporta express-graphql, para esto tenemos que instalar la version anterior de graphql y ahi si instalarlo con los comandos que muestra en el curso.

npm install --save graphql@"^15.3.0"

Angelo Zambrano

student•

Una nota importante: Ya no se usa: const gqlMiddleware = require('express-graphql')

sino: const { graphqlHTTP } = require('express-graphql')

Jose Eduardo Romero Baltazar

student•

Muchas gracias por el aporte

Enrique Devars

teacher•

Si en vez de usar Graphiql quieren usar Playground les dejo mi archivo index.js para configurarlo.

const express = require("express");
const { buildSchema } = require("graphql");
const { graphqlHTTP } = require("express-graphql");
const expressPlayground = require("graphql-playground-middleware-express")
  .default;

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

// Defining schema
const schema = buildSchema(`
    type Query {
        hello: String
        goodbye: String
    }
`);

// Setting resolvers
const resolvers = {
  hello: function () {
    return "Hello world!";
  },
  goodbye: function () {
    return "Goodbye cruel world!";
  },
};

// Config of express-graphql
app.use(
  "/api",
  graphqlHTTP({
    schema,
    graphiql: false,
    rootValue: resolvers,
  })
);

// Settings of graphql playground
app.get("/playground", expressPlayground({ endpoint: "/api" }));

app.listen(port, () => {
  console.log(`Listening in http://localhost:${port}/playground`);
});

Carlos Pinto

student•

Excelente aporte, gracias buen hombre!

Mariangelica Useche

Team Platzi•

Está super cool el playground!! Gracias.

Luciano Cavallo

student•

Para los que intenten instalar express-graphql con la ultima version de graphql (v16.3.0 actualmente), hay un tema con las dependencias, encontre un issue de express-graphql, que trata este asunto, y parece que los que mantienen el repositorio no estaria resolviendo este conflicto. Lo que hice fue bajar la version de graphql, a la indicada por express-graphql, ya que otra alternativa seria usar graphql-helix, pero opto por mantenerme en linea con el curso. Si alguien tiene informacion nueva de este asunto u otra solucion, agradezco aportes. Saludos!!!

Jesus David Urquijo Corredor

student•

Yo si me voy de cabeza con Graphql-helix, prefiero enrollarme más antes que aprender algo que va en desuso

Emmanuel Octavio Martinez C

student•

Si les da error al intentar install express-graphql háganlo así:

npm install --legacy-peer-deps express-graphql

Diego Fernando Caviedes Camaho

student•

Esta super bueno el curso pero muy desactualizado

//'use strict'

const { graphql, buildSchema } = require('graphql')
const express = require('express') 
const { graphqlHTTP } = require('express-graphql')//Middleware de graphql

Jorge Bou-saad

student•

Realmente el endpoint adecuado debería ser /graphql para abrir el editor de graphql. Esto es así en entornos de desarrollos como gatsby que requieren el uso de graphql.

En mi caso es así:

http://localhost:<puerto>/graphql

Cesar David Ramírez Dimaté

student•

Iba a comentar lo mismo jejeje.

Javier Alejandro Villarroel Castro

student•

Para los que les salgan <<TypeError: gqlMiddleware is not a function>>

sustituir esto <<const gqlMiddleware = require('express-graphql')>> por esto <<const { graphqlHTTP } = require('express-graphql');>>

Miguel Ángel Suárez

student•

En que momento agrega la descripción 😶

hello: String
"retorna un saludo al mundo"

Jonathan Martin Ortega Jimenez

student•

Es parte del esquema que ya tenia definido. Realmente llegamos a la clase con eso como parte del esquema.

Diego Hernández Rodríguez

student•

No muestra donde se agrega, se puede observar como en el video no aparece y después cuando ejecuta el servidor con nodemon ya lo tiene.

José Antonio Torres

student•

Dónde se puede hostear un servicio de Graphql?

Erik Elyager

student•

GraphQL es sólo un lenguaje de comunicación entre el servidor y el cliente, corre sobre tu aplicación sin importar el hosting.

Aunque sí existen soluciones especializadas como NodeChef.

Jorge Arteaga

student•

Para los que estamos en el 2022.

Antes de instalar express-graphql... instalen nuevamente graphql, pero en una version anterior.

npm i graphql@^15.3.0

Jesus David Urquijo Corredor

student•

Este curso está bastante desactualizado. Con el problema de graphql middleware leí un aporte que indica que una alternativa es graphql-helix

En este vídeo hay una configuración de un middleware: https://www.youtube.com/watch?v=QR7AymMboZc

Matías Daniel Aybar

student•

Para no tener errores de versiones de este estilo:

npm install --save express-graphql 
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: rest-api@1.0.0
npm ERR! Found: graphql@16.2.0
npm ERR! node_modules/graphql
npm ERR!   graphql@"^16.2.0" from the root project

es necesario instalar primero express y express-graphql, y luego graphql.

npm init -y 
npm install express express-graphql
npm install graphql

PD: este curso quedó viejisimo, voy 5 videos y en todos indica hacer cosas que ya se hacen de otra forma. Lamentable contenido de Platzi. Gracias a la comunidad se lo puede seguir.

Miguel Angel Reyes Moreno

student•

Instalamos npm i express express-graphql nodemon dotenv

index.js:

const { graphql, buildSchema } = require("graphql");
const express = require("express");
const { graphqlHTTP } = require("express-graphql");
require('dotenv').config();

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

//*Definiendo el esquema
const schema = buildSchema(`
    type Query {
        hello: String
        pokemon: String
    }
`)
//*Lo arriba es: Tipo -> Query. Nombre de query -> Hello. Dato que retorna -> String

//* Configurar los resolvers para que la query sí regrese información
const resolvers = {
    hello: () => { return "Hello World!" },
    pokemon: () => { return "Pikachu" }
}

app.use('/api', graphqlHTTP({
    schema,
    rootValue: resolvers,
    graphiql: true
}));

app.listen(port, () => {
    console.log(`Server running on port ${port}/api`);
});

package.json:

"scripts": {
    "dev": "nodemon -e js, graphql index",
    "test": "echo \"Error: no test specified\" && exit 1"
}

Camilo Rivera Quintero

student•

La Lib fué actualizada.

const { graphqlHTTP } = require(‘express-graphql’);

 app.use(
  '/graphql',
  graphqlHTTP({
    schema,
    rootValue: resolvers,
    graphiql: true,
  }),
);

David Gallego

student•

Que plugin usas para que aparezca el menú contextual para auto completar?

Arantxa Giovanna Rosas Del Valle

student•

yo uso este para vscode:

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

También puedes crear los tuyos propios presionando cmd+P y buscas >Preferences: Configure user snippets.