Sirviendo el API en la web

5/25
Recursos
Transcripción

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

Aportes 27

Preguntas 15

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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

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

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

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

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

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

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!!!

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’);>>

En que momento agrega la descripción 😶

hello: String
"retorna un saludo al mundo" 

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 [email protected]"^15.3.0"

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

La Lib fué actualizada.

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

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

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

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

Otra dependencia que ayuda mucho a visualizar las peticiones http es la librería morgan. simplemente la instalan como npm i -D morgan (como dependencia de desarrollo).

Luego en el archivo index.js lo van a requerir como
const morgan = require(“morgan”);
Y la usan con su aplicación de est manera luego.

app.use(morgan(“dev”));

Y listo, les va a estar mostrando por consola cada petición que se haga, el tipo, la ruta a la que se hizo, el resultdo de la misma y el tiempo de ejecución.

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

Para presentar la API en la web hay que instalar express y un middleware entra express y graphql llamado express-graphql.

Lo siguiente es exportar express en index.js y crear la app, y también exportar la función graphqlHTTP desde express-graphql.

const { graphqlHTTP } = require('express-graphql');
const express = require('express');
const app = express();

A la función graphqlHTTP le pasamos como parámetro un objeto con el schema, el rootValue que son los resolvers y la propiedad graphiql con un valor true para que habilite el entorno gráfico de graphql. Por último ejecutamos la aplicación de express en el puerto 3000.

app.use('/api',graphqlHTTP({
    schema: schema,
    rootValue: resolver,
    graphiql: true,
}))
app.listen(port, () => console.log("Listening on port " + port))

GraphiQL:
Desde el entorno de graphiql se pueden ejecutar queries, ver el historial de queries ejecutadas y en la sección de Docs aparecerá la documentación autogenerada de la API. Con todos los rootValues (resolvers) de la misma.

Si hubiera tomado este curso unas semanas antes estaria reperdido, que bueno que de entrada recomendaba otros cursos previos a este

Middleware es lo que generalmente usamos como driver(traductor) entre dos tecnologias

tiene cierto parecido con redux

por que me marca que gqlMiddleware no es un a función??

les dejo mi github
https://github.com/ruben-xe

Listo, me esta costando un poco de trabajo la instalación de complementos y middleware, ya que hasta hace poco instale Linux en mi maquina, pero hay vamos.

graphql utiliza comonJs o puede utilizar ECMA / js moderno … ?

Tengo que reiniciar Visual Code cada vez que corro el server… saben que problema sera?

Para que me funcionara el codigo hice el siguiente cambio:

const gqlMiddleware  = require('express-graphql').graphqlHTTP;