Un tutorial sencillo sobre cómo crear un servidor GraphQL basado en Node.js y Express
Comience creando un nuevo proyecto Node.js, si aún no tiene uno configurado:
npm init --y
Este comando crea el package.json
archivo con el que necesitamos trabajar npm
.
Instale los paquetes npm express
y:graphql
express-graphql
npm install express graphql express-graphql
Crea un app.js
archivo y comenzamos con la inicialización del servidor Express:
const express = require('express')const app = express()app.listen(3000, () = { console.log('App listening on port 3000')})
Ahora añadimos express-graphql
. Este es un middleware y lo aplicamos sólo a una ruta, la /graphql
ruta:
const express = require('express')const graphqlHTTP = require('express-graphql')const app = express()app.use('/graphql', graphqlHTTP())app.listen(3000, () = { console.log('App listening on port 3000')})
Debemos pasar un objeto que contenga la schema
propiedad, que debe contener una definición de esquema .
¡Primero debemos definir un esquema!
Crea un schema.js
archivo y allí primero requerimos graphql
, luego, usando la sintaxis de desestructuración de objetosGraphQLSchema
, obtenemos los objetos GraphQLObjectType
y GraphQLString
que pronto necesitaremos usar:
const graphql = require('graphql')const { GraphQLSchema, GraphQLObjectType, GraphQLString } = graphql
Luego definimos el valor del esquema inicializando una nueva GraphQLSchema
instancia, pasando un objeto que contiene una query
propiedad. Esta propiedad es una instancia de un GraphQLObjectType
objeto:
const schema = new GraphQLSchema({ query: new GraphQLObjectType({ //... }),})module.exports = schema
Dentro de este nuevo objeto debemos especificar un parámetro name
, y un fields
parámetro. Esta última propiedad es un objeto que contiene un conjunto de propiedades, una para cada campo de nuestro esquema. En este ejemplo configuramos un hello
campo:
const schema = new GraphQLSchema({ query: new GraphQLObjectType({ name: 'RootQueryType', fields: { hello: { type: GraphQLString, resolve() { return 'world' }, }, }, }),})
El resolve()
método devuelve la cadena world
, lo que significa que cuando solicitamos el hello
campo, obtendremos esa cadena de vuelta.
Aquí está el schema.js
contenido completo del archivo:
const graphql = require('graphql')const { GraphQLSchema, GraphQLObjectType, GraphQLString } = graphqlconst schema = new GraphQLSchema({ query: new GraphQLObjectType({ name: 'RootQueryType', fields: { hello: { type: GraphQLString, resolve() { return 'world' }, }, }, }),})module.exports = schema
Ahora volvemos a nuestro app.js
archivo.
Esto es lo que teníamos:
const express = require('express')const graphqlHTTP = require('express-graphql')const app = express()app.use('/graphql', graphqlHTTP())app.listen(3000, () = { console.log('App listening on port 3000')})
Ahora necesitamos el schema.js
archivo:
const schema = require('./schema.js')
y agregamos eso en un objeto que pasamos al graphqlHTTP()
constructor:
app.use( '/graphql', graphqlHTTP({ schema: schema, }))
¡De acuerdo!
Ahora podemos probar esto y ver si funciona. Podemos usar GraphiQL , una excelente herramienta para probar nuestra API GraphQL.
Ya está instalado y para habilitarlo, necesitamos pasar otra propiedad al graphqlHTTP
constructor:
app.use( '/graphql', graphqlHTTP({ schema: schema, graphiql: true, }))
Ahora, después de ejecutar node app.js
, al acceder a la https://localhost:3000/graphql
URL con el navegador, verá GraphiQL en acción:
Y puedes probar la primera llamada a la API, pasando esta consulta:
{ hello}
Este es el resultado:
Construyamos ahora un esquema más complejo.
Uno que tiene tipos anidados.
Un ejemplo que tengo en mente es una publicación de blog.
Una entrada de blog tiene un título, una descripción y también un autor. El autor tiene un nombre.
Vamos a resolver esto.
Primero agregamos el conjunto de publicaciones y autores:
const posts = [ { title: 'First post', description: 'Content of the first post', author: 'Flavio', }, { title: 'Second post', description: 'Content of the second post', author: 'Roger', },]const authors = { Flavio: { name: 'Flavio', age: 36, }, Roger: { name: 'Roger', age: 7, },}
De aquí es de donde obtendremos los datos. Fotos Porno y actrices porno
A continuación, definimos 3 GraphQLObjectType
instancias:
authorType
, que definen los datos del autorpostType
, que definen los datos de la publicaciónqueryType
, el principal
Empecemos por el autor. Un autor tiene un nombre y una edad.
Usamos el GraphQLInt
tipo que debemos agregar al require:
const { GraphQLSchema, GraphQLObjectType, GraphQLString, GraphQLInt } = graphql//...const authorType = new GraphQLObjectType({ name: 'Author', fields: { name: { type: GraphQLString, }, age: { type: GraphQLInt, }, },})
El siguiente es postType
. Una publicación tiene un título, una descripción (ambas cadenas) y un autor. Un autor es del tipo authorType
, que acabamos de definir, y tiene un solucionador.
Obtenemos el nombre del autor del source
parámetro, que es el parámetro que se pasa al objeto de publicación, y buscamos los datos del autor en función de eso. Los devolveremos.
const postType = new GraphQLObjectType({ name: 'Post', fields: { title: { type: GraphQLString, }, description: { type: GraphQLString, }, author: { type: authorType, resolve: (source, params) = { return authors[source.author] }, }, },})
Tenga en cuenta que una función de resolución puede ser asincrónica, por lo que puede usar async/await para buscar recursos en una base de datos o en la red.
A continuación, se encuentra queryType, el tipo de raíz que agregaremos al esquema. Allí, definimos dos campos:
post
Una única entrada de blog, identificada por un ID.posts
La lista de publicaciones
Ambos tienen una función de resolución para buscar los datos en la posts
matriz:
const queryType = new GraphQLObjectType({ name: 'Query', fields: { post: { type: postType, args: { id: { type: GraphQLInt }, }, resolve: (source, { id }) = { return posts[id] }, }, posts: { type: new GraphQLList(postType), resolve: () = { return posts }, }, },})
Observe el nuevo GraphQLList
tipo que usamos para encapsular postType
y dar a entender que es una lista de postType
objetos. Debemos exigirlo en la parte superior:
const { GraphQLSchema, GraphQLObjectType, GraphQLString, GraphQLList, GraphQLInt,} = graphql
Eso es todo. Necesitamos agregarlo a nuestro schema
y listo:
const schema = new GraphQLSchema({ query: queryType,})
Aquí está el código completo:
const graphql = require('graphql')const { GraphQLSchema, GraphQLObjectType, GraphQLString, GraphQLList, GraphQLInt,} = graphqlconst posts = [ { title: 'First post', description: 'Content of the first post', author: 'Flavio', }, { title: 'Second post', description: 'Content of the second post', author: 'Roger', },]const authors = { Flavio: { name: 'Flavio', age: 36, }, Roger: { name: 'Roger', age: 7, },}const authorType = new GraphQLObjectType({ name: 'Author', fields: { name: { type: GraphQLString, }, age: { type: GraphQLInt, }, },})const postType = new GraphQLObjectType({ name: 'Post', fields: { title: { type: GraphQLString, }, description: { type: GraphQLString, }, author: { type: authorType, resolve: (source, params) = { return authors[source.author] }, }, },})const queryType = new GraphQLObjectType({ name: 'Query', fields: { post: { type: postType, args: { id: { type: GraphQLInt }, }, resolve: (source, { id }) = { return posts[id] }, }, posts: { type: new GraphQLList(postType), resolve: () = { return posts }, }, },})const schema = new GraphQLSchema({ query: queryType,})module.exports = schema
Vea el código completo en Glitch.
Tal vez te puede interesar:
- Cómo leer un archivo CSV con Node.js
- Cómo obtener los nombres de todos los archivos en una carpeta en Node
- Cómo renombrar archivos de forma masiva en Node.js
- Cómo comprobar la versión actual de Node.js en tiempo de ejecución
Cómo crear un servidor GraphQL con Node.js y Express
Comience creando un nuevo proyecto Node.js, si aún no tiene uno configurado: Un tutorial sencillo sobre cómo crear un servidor GraphQL basado en Node.js y Ex
programar
es
https://aprendeprogramando.es/static/images/programar-como-crear-un-servidor-graphql-con-node-2083-0.jpg
2024-10-15
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente