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
Ya no es gqlMiddleware ahora es const { graphqlHTTP } = require('express-graphql');
Andrés Felipe Moreno Jiménez
Gracias, tu aporte me ayudó a corregir el problema de ejecución.
José Heriberto López Ruiz
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?
Eden Gomez Gress
Carlos Pinto
Gracias! Me aclaraste una gran duda hermano. Saludos!
Irungaray Agustin
Gracias, no me acordaba como hacerlo
Luis Paredes
Este profesor es demasiado bueno lo llevo viendo desde node y me encanta como profesor.
Edwin García
No lo conocía, va a tocar ir a ver el curso de Node
José Luis Encastin Flores
¿Cuál es el curso de Node, Luis?
Angelo Zambrano
Una nota importante:
Ya no se usa:
const gqlMiddleware = require('express-graphql')
sino:
const { graphqlHTTP } = require('express-graphql')
Jose Eduardo Romero Baltazar
Muchas gracias por el aporte
Enrique Devars
Carlos Pinto
Excelente aporte, gracias buen hombre!
Mariangelica Useche
Team PlatziEstá super cool el playground!! Gracias.
Luciano Cavallo
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
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
Si les da error al intentar install express-graphql háganlo así:
npm install --legacy-peer-deps express-graphql
Diego Fernando Caviedes Camaho
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
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
César David Ramírez Dimaté
Iba a comentar lo mismo jejeje.
Javier Alejandro Villarroel Castro
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
En que momento agrega la descripción 😶
hello: String "retorna un saludo al mundo"
Jonathan Martin Ortega Jimenez
Es parte del esquema que ya tenia definido. Realmente llegamos a la clase con eso como parte del esquema.
Diego Hernández Rodríguez
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
Dónde se puede hostear un servicio de Graphql?
Erik Elyager
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
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
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
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
Camilo Rivera Quintero
La Lib fué actualizada.
const { graphqlHTTP } = require(‘express-graphql’); app.use( '/graphql', graphqlHTTP({ schema, rootValue: resolvers, graphiql: true, }), );
David Gallego
Que plugin usas para que aparezca el menú contextual para auto completar?
Arantxa Giovanna Rosas Del Valle
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.
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.
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`); });
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" }
