Introduction
Que es graphQL?
Es una tecnologia creada por Facebook, se trata de un lenguaje de consulta para integrar a nuestra aplicaciones. Esta tecnologia nos permite definir que dato pedirles a la aplicacion el cual la integramos. GraphQL es una especificacion de implementacion, el cual puede aplicarsele a varios lenguaje de programacion, no es una libreria o marco de trabajo (framework).
Configuracion basica
En esta guia todo estara basado en Nodejs y Express. Para comenzar nuestra aplicacion junto a GraphQL, debemos crear el directorio de proyecto con el nombre que desee, luego atraves de nuestro terminal ir a la raiz de nuestro proyecto. Una vez en la raiz iniciamos nuestro directorio de aplicacion con:
$ npm init
Luego de llenar nuestra informacion al proyecto y iniciarlo, vamos a añadir los paquetes necesario para nuestra aplicacion.
$ npm -i -save express express-graphql graphql
Al finalizar de añadir las librerias necesaria, creamos el archivo server.js en el cual vamos a utilizar para escribir el codigo fuente de nuestra aplicacion. Dentro de nuestro archivo server.js escribimos lo siguiente:
// server.js
import express from 'express'
// Declare an app from express
const app = express()
// Catch all request or 404
app.all('*', (req, res) => {
res.json({ok: true})
})
app.listen(3000, () => {
console.log(`Server listening on port ${PORT}`)
})
Luego ejecutamos nuestra aplicacion atraves del terminal:
$ node server.js
Luego de iniciar la aplicacion si problema podemos verificar que todo este bien atravez del navegador o terminar con cURL.
$ curl http://0.0.0.0:3000
{"ok":true}
Crear esquema y utilizar metodo buildSchema
Esquema (Schema)
Un esquema(schema) consiste en una lista de definiciones de tipos. GraphQL contiene un sistema de tipo el cual nos permite definir tipos. Un sistema de tipo es un conjunto de reglas el cual son aplicado a algún entidad. GraphQL utiliza el sintaxi de lenguaje SDL(Schema Definition Language) para definir sus tipos. Para demostrar un ejemplo, vamos a definir el tipo Post con el lenguaje SDL.
type Post {
id: ID!
description: String!
imageUrl: String!
}
Tipos (Type)
Son utilizadas para describir un conjunto de reglas.
type User {
name: String!
username: String!
}
El caracter ! indica que este campo dentro del tipo es requerido.
Relacion
En GraphQL podemos espresar relacion entre tipos.
type User {
name: String!
username: String!
}
type Document {
title: String!
content: String!
author: User!
}
Consulta (Query)
Es un tipo especial el cual su proposito es ser utilizada para consultar datos. Este puede recibir parametro y devolver cualquier tipo o lista (Array).
Schema Root Type
Cada esquema contiene una tipo raíz, este engloba todo los tipos en un simple tipo raiz. Dentro contiene:
Query- Especificado para todo los tipos para hacer consulta a entidades.Mutation- Especificado para las mutaciones, realizar cambios a entidades.Mutation- Especificado para todos los tipos de mutaciones(cambios) el cual pueden ser ejecutada por nuestro servidor GraphQL.Subscription- Especificado para todos los tipos de suscripciones.
Resolve
Cuando definimos un esquema, a este esquema debemos proveer unos métodos resolve, estos metodos mapea un consulta (Query) o mutacion (Mutation) para ejecutar algun codigo cuando se haga una llamada a ella.
buildSchema
Este métodos el cual nos provee GraphQL, nos permite desarrollar un esquema el cual podemos integrar a nuestro servidor GraphQL.
import express from 'express'
import { buildSchema } from 'graphql'
import graphqlHTTP from 'express-graphql'
const app = express()
/*
* buildSchema - To create a GraphQLschema from template string.
*/
let schema = buildSchema(`
type Query {
postTitle: String
}
`)
/*
* root - Provides a resolver function for each API endpoint.
*/
let root = {
postTitle: () => ('Mattis ullamcorper velit sed ullamcorper')
}
/*
* Graphql router
*/
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true // Set to false if you dont want graphiql enabled
}))
app.listen(3000, () => {
console.log(`Server listening on port ${PORT}`)
})
Query:
{
postTitle
}
Tipos Primitivos
En GraphQL existe los siguientes tipos primitivos ID, String, Int, Float y Boolean.
import express from 'express'
import { buildSchema } from 'graphql'
import graphqlHTTP from 'express-graphql'
const app = express()
let schema = buildSchema(`
type Query {
id: ID,
title: String,
duration: Int,
watched: Boolean
}
`)
let root = {
id: () => '1',
title: () => 'Mattis ullamcorper velit sed ullamcorper',
duration: () => 180,
watched: () => false
}
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true
}))
app.listen(3000, () => {
console.log(`Server listening on port ${PORT}`)
})
Query:
query {
id
title
duration
watched
}
Tipo Objeto
import express from 'express'
import { buildSchema } from 'graphql'
import graphqlHTTP from 'express-graphql'
const app = express()
let schema = buildSchema(`
type Video {
id: ID,
title: String,
duration: Int,
watched: Boolean
}
type Query {
video: Video
}
`)
let video = {
id: '1',
title: 'Mattis ullamcorper velit sed ullamcorper',
duration: 180,
watched: false
}
let root = {
video: () => video
}
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true
}))
app.listen(3000, () => {
console.log(`Server listening on port ${PORT}`)
})
Query:
{
video {
id
title
duration
watched
}
}
Tipo Lista
import express from 'express'
import { buildSchema } from 'graphql'
import graphqlHTTP from 'express-graphql'
const app = express()
let schema = buildSchema(`
type Video {
id: ID,
title: String,
duration: Int,
watched: Boolean
}
type Query {
video: Video
videos: [Video]
}
`)
let video = {
id: '1',
title: 'Mattis ullamcorper velit sed ullamcorper',
duration: 180,
watched: false
}
let videos = [{
id: '1',
title: 'Mattis ullamcorper velit sed ullamcorper',
duration: 180,
watched: false
},{
id: '2',
title: 'Habitasse platea dictumst vestibulum',
duration: 240,
watched: true
},{
id: '3',
title: 'Urna et pharetra pharetra massa massa',
duration: 160,
watched: false
},{
id: '4',
title: 'Eu facilisis sed odio morbi',
duration: 260,
watched: true
},{
id: '5',
title: 'Egestas egestas fringilla phasellus',
duration: 190,
watched: false
},{
id: '6',
title: 'Pharetra massa massa ultricies',
duration: 160,
watched: false
}]
let root = {
video: () => video,
videos: () => videos
}
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true
}))
app.listen(3000, () => {
console.log(`Server listening on port ${PORT}`)
})
Query:
{
videos {
id
title
duration
watched
}
}