Saltar al contenido

¿Cómo construir un simple API GraphQL usando graphql-yoga y NodejsDec, 13thIn este tutorial, vamos a construir una sencilla API mediante el uso de todos …

marzo 13, 2020

 

En este tutorial, vamos a construir una sencilla API de todos mediante el servidor GraphQL y graphql-yoga.

Ver código

Nota: si usted no sabe acerca de lo que está Graphql a continuación se refieren a mi tutorial anterior Graphql introducción Requisitos

  • nodejs

En primer lugar, tenemos que instalar un paquete graphql-yoga usando NPM o hilo.

mkdir graphql-api

cd graphql-api

npm i -y

npm i graphql-yoga

graphql paquete de yoga nos ayuda a crear el servidor graphql con la configuración mínima.

Ahora, crear un nuevo archivo llamado app.js y añada el siguiente código.

const { GraphQLServer } = require('graphql-yoga');

//sample data

let todos = [
{
id: 1,
title: "This is my todo",
body: "sample content in id 1"
},
{
id: 2,
title: "This is my second todo",
body: "sample content in id 2"
},
{
id: 3,
title: "This is my third todo",
body: "sample content in id 3"
}
]

En el código anterior en primer lugar, que requiere el paquete graphql-yoga y se añaden todos nuestros dentro de la matriz, ya que no estamos utilizando cualquier base de datos.

continuación, tenemos que crear las definiciones de tipo utilizando un lenguaje de definición de esquemas graphql (SDL).

const typeDefs = `

type Todo {
id: ID!
title: String!
body: String!
}

type Query{
getAlltodos : [Todo!]!
}

`

Aquí hemos creado un tipo de Todo que contiene tres campos de ID, título, cuerpo significa que nuestros datos de tareas pendientes deben estar en esta forma.

Tipo En Consulta, que crea el campo getAlltodos la que regresa una matriz de todos.

Ahora tenemos que crear los dispositivos de resolución. Que nos ayuda a resolver los campos de consulta particulares en theSchema.

const resolvers = {

Query:{
getAlltodos(){
return todos
}
}

}

La función de resolución y campo de consulta debe tener el mismo nombre de lo contrario graphql le da un error.

Por último, paso para encender el servidor.

const server = new GraphQLServer({
typeDefs, resolvers, context: {
//if we pass anything here can be available in all resolvers
}
})

server.start(() => console.log('Server is running on localhost:4000☄'))

Ahora en sus app.js nodo terminal ejecutar y vaya a localhost: 4000 en su navegador.

Este graphql un parque infantil que nos ayuda a probar nuestros datos.

Si hace clic en el botón de esquema lado izquierdo verá una consulta que es la misma consulta que hemos creado anteriormente en Tipo defs.

Como ya he dicho getAlltodos consulta ayudarnos a conseguir el conjunto de todos vamos a probar ahora byrunning una consulta en la zona de juegos graphql.

Copia el siguiente consulta pegar en la parte izquierda y pulsa el botón de reproducción.

{

getAlltodos{
id
title
}

}

respuesta del servidor graphql está presente en el lado derecho.

usted ha visto a la flexibilidad de la graphql sólo tenemos los datos de lo que no es más o menos no preguntamos? salida

{

getAlltodos{
id
title
body
}

}

{
"data": {
"getAlltodos": [
{
"id": "1",
"title": "This is my todo",
"body": "sample content in id 1"
},
{
"id": "2",
"title": "This is my second todo",
"body": "sample content in id 2"
},
{
"id": "3",
"title": "This is my third todo",
"body": "sample content in id 3"
}
]
}
}

mutaciones

mutaciones en el graphql nos permite crear o actualizar o borrar los datos. complemento de

dejar que los tipos de mutación dentro de las definiciones de tipo

const typeDefs = `

type Todo{
id: ID!
title: String!
body: String!
}

type Query{
getAlltodos : [Todo!]!
}

type Mutation{

addTodo(title:String!,body:String!):Todo!,
updateTodo(id:ID!,title:String!,body:String!):Todo!
deleteTodo(id:ID!):Todo!
}

`

hemos añadido tres tipos de mutaciones que son addTodo, updateTodo, deleteTodo

  • addTodo acepta dos argumentos que son título, el cuerpo y vuelve hacia atrás TODO recién creado.
  • updateTodo nos ayuda a actualizar el TODO y vuelve de nuevo TODO actualizada.
  • deleteTodo sólo aceptan un solo argumento y devuelve una copia de TODO eliminado.

Ahora, tenemos que añadir resolutores para resolver los tipos de mutaciones anteriores. método de resolución de

const resolvers = {
Query: {
getAlltodos() {

return todos
}

},
Mutation: {
addTodo(parent, args, ctx, info) {

if (args) {
todos.push({
id: Math.random(),
title: args.title,
body: args.body
})
} else {
throw new Error('not args found')
}

return todos[todos.length - 1];

},
updateTodo(parent, args, ctx, info) {
const index = todos.findIndex(e => e.id === +args.id)

let todo = todos[index];

todo.title = args.title
todo.body = args.body

return todos[index]
},
deleteTodo(parent, args, ctx, info) {
const index = todos.findIndex(e => e.id === +args.id)

let todo = todos[index];
const filter = todos.filter(e => e.id !== +args.id)

todos = filter

return todo
}
}

}

Cada puede tener cuatro argumentos que son padres, args, el contexto, información

padres: Lo que nos ayuda a conseguir los datos de los padres si utilizamos las consultas anidadas. args

: Los argumentos son los objetos pasados ​​en el momento de ejecutar la consulta.

contexto

: Este es un objeto compartido por todos los resolutores como los datos de autenticación o cambiar el tema

: Contiene la información acerca de la consulta. La prueba de

dejar que nuestros mutaciones utilizando GraphQL juegos

addTodo

mutation{
addTodo(title:"My fourth todo",body:"This a simple todo"){
title
}
}

deleteTodo

mutation{
deleteTodo(id:1){
title
body
}
}

updateTodo

mutation{
updateTodo(id:2,title:"this is updated",body:"hey, we just updated"){
title
body
}

}

Código repository

feliz de codificación …