Cursos Empresas Blog Live Conf Eventos Precios

0:008:11

Recursos

Resumen

Vamos a instalar una nueva dependencia para facilitar el trabajo con GraphQL, vamos a correr el siguiente comando:

npm i graphql-tools

Podemos pasar argumentos con distintos tipos de información dentro de las peticiones que hagamos en GraphQL, su sintaxis quedaría de la siguiente manera:

nombreQuery(campo: tipo): tipo

Dentro del resolver los argumentos de la petición pasarían como segundo parámetro, el primero es root y el segundo es args.

Argumentos

Curso Práctico de GraphQL con JavaScript

Clase 7 de 25

Clase 7 / 25

Miguel Angel Reyes Moreno

Hace 5 años

Argumentos

Instalamos npm i graphql-tools

index.js:

const { makeExecutableSchema } = require("graphql-tools");
const express = require("express");
const { graphqlHTTP } = require("express-graphql");
require('dotenv').config();
const { readFileSync } = require("fs");
const { join } = require("path");
const resolvers = require("./lib/resolvers");

const app = express();
const port = process.env.PORT || 3000;

//*Definiendo el esquema
const typeDefs = readFileSync(join(__dirname, "lib", "schema.graphql"), "utf-8");
const schema = makeExecutableSchema({ typeDefs, resolvers });
//* Nos traemos el schema desde donde se encuentra

//* Configurar los resolvers para que la query sí regrese información

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

app.listen(port, () => {
    console.log(`Server running on port ${port}/api`);
});

resolvers.js:

const courses = [
    {
        _id: '1',
        title: 'My title',
        teacher: 'My teacher',
        description: 'My description',
        topic: 'Programming',
    },
    {
        _id: '2',
        title: 'My title 2',
        teacher: 'My teacher 2',
        description: 'My description 2',
        topic: 'Programming 2',
    },
    {
        _id: '3',
        title: 'My title 3',
        teacher: 'My teacher 3',
        description: 'My description 3',
        topic: 'Programming 3',
    },
]

module.exports = {
    Query: {
        getCourses: () => { return courses },
        getCourse: (root, args) => {
            const course = courses.find(course => course._id === args.id)
            return course
        }
    },
}

Y podemos hacer un query como el siguiente:

{
    getCourse(id: "2"){
        title
        description
    }
}

Comentarios (30)30 comentarios

Daniela Londono

Hace 7 años

Tal vez si usas find en vez de filter podemos evitar el course.pop() :)

Cristian Camilo Cucunubá

const course = courses.find((course) => course._id === args.id)

David Behar

Joel Aravena Villegas

como se puede pedir un curso de GraphQL avanzado en @platzi?

Gabriel De Andrade

Hola! Escribenos a team@platzi.com :D

Víctor Fernández

graphql-tools esta deprecado, ahora deberiamos usar @graphql-tools/schema y seguira funcionando con el ejemplo de la clase :D

Mr Billy Ortega

Tienes el código actualizado? me aparece lo mismo pero no identifico la sintaxis

Juan Guillermo Poblete Bazaes

Santiago Rios Olaya

Para versiones recientes se debe hacer:

yarn add @graphql-tools/schema

o si usan npm

npm i @graphql-tools/schema

despues deben importarlo de la siguiente manera y continuar con la leccion

const { makeExecutableSchema } = require('@graphql-tools/schema')

Oscar Torres

Hola a veces se me queda escuchando en el puerto y no me deja hacer cambios, alguien sabe a que se debe?

Johan Mora

Hace 4 años

Este curso al parecer tiene problemas con las dependencias, a la fecha en la que escribo este post, ningún comentario pasado me avisa funcionado, lo que tuve que hacer fue lo siguiente:

instalar @graphql-tools/schema(eme otros comentarios menciona como hacerlo)
en el resolver getCourse, eliminar el parametro root y no almacemar los resolvers en el objeto query, mas o menos asi:

module.exports = {
    getCourses: () => {
      return courses
    },
    getCourse:(args)=>{
      const course = courses.filter(x => x._id===args.id)
      console.log("we are in")
      console.log(course)
      return course.pop();
    }
  }

Kenny Estiven Raúl Contreras Aguilar

Ahora el paquete makeExecutableSchema se trabaja así:

Se importa de la siguiente manera.

const { makeExecutableSchema } = require("@graphql-tools/schema");

Miguel Angel Muñoz Pozos

Hola si te sale este error

This package has been deprecated and now it only exports makeExecutableSchema.
And it will no longer receive updates.
We recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.
Check out https://www.graphql-tools.com to learn what package you should use instead!
Server is listening at https://localhost:3000/api

lo que debes hacer es cambiar los imports

import { makeExecutableSchema } from 'graphql-tools'

por

import { makeExecutableSchema } from '@graphql-tools/schema'

David Campos

Rodolfo Murguia

A mi me costo un poco de trabajo debuggear con la estructura que indico el profesor y para hacerlo a prueba de Jr lo hice asi el resolver:

const Query = {
  getCourses: () => {
      return courses
  },
  getCourse: (root, args) =>{
    const course = courses.filter(course => courses._id == args.id) 
    console.log(course.pop())
    return course.pop()
  }
}

module.exports = Query

Hector Zurga Ramos

Esteban Aragon

Hola Jose, de las dos maneras funcionará, ya que no depende de cómo se declaro el id en el schema, sólo es recibir el id en getCourse(id: ID!), es decir, al llamar ese query desde un cliente debes pasar el id.

Jonathan Martin Ortega Jimenez

Por temas de consistencia si deberia, pues parte del hecho de usar Graphql es que sea auto documentativo el esquema, por eso deberia tener el mismo nombre pero si te fijas en el resolver se le asigna el id a _id al momento de buscarlo

Julian David Alzate Cuervo

En este momento me encuentro estancado en esta clase en particular, alguien al día de hoy pudo hacer que el servidor funcionara sin problemas que pueda darme una guía para poder seguir el curso?

Reinaldo Mendoza

Alguien mas obtuvo esta recomendación?(el código igual funciona)

This package has been deprecated and now it only exports makeExecutableSchema.
And it will no longer receive updates.
We recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.

Simón Arenas

Se me hace muy curioso que si en la consulta le pasamos un ID de tipo número, regresa un error, al menos que sea string.

A que se debe esto? En la mayoría de DB's el ID es tipo número.

Nestor Velez Vargas

Hola, efectivamente en bases de datos relacionales debido a la forma como realizan a indexación suelen usarse claves primarias de tipo entero en base 10, sin embargo, con el auge de bases de datos no relacionales como Mongo indexan en hexadecimal 0,1.2...7,8,9,a,b,c,d,e,f
A la final hexadecimal es número, pero como tiene caracteres de la a hasta la f por eso debe enviarse como String

David Fuentes

Hola a todos, cual es la extension para VSCode que se utiliza para que muestre la ayuda de los metodos? Como que hace, los parametros, etc. Gracias.

Erik Elyager

Ve a tu archivo settings.json presionando CTRL/⌘ + ⇧ + P y escribes >open settings json. Ahí asegúrate de tener la siguiente linea en true.

    "editor.parameterHints.enabled": true,

Así siempre te va a dar "hints" de los parámetros en los métodos con solo abrir los parentesis.

Si no quieres que sea automático puedes dejar esa opción en false y presionar CTRL/⌘ + ⇧ + Space siempre que necesites ayuda.

Diego Esquivel Romero

Hola a todos, desde la clase de Custom Types me esta dando este error. Alguna idea de por que. Dice algo de la UTF-8 y la version pero no lo tengo claro.

<code>
{
  "errors": [
    {
      "message": "Syntax Error: Unexpected <EOF>",
      "locations": [
        {
          "line": 32,
          "column": 1
        }
      ]
    }
  ]
}
</code>

Muchas gracias

Abraham José Alvarenga

Si a alguien le da este error solo borren todos los comentarios que aparecen cuando ejecutan su aplicacion y coloquen: { hello } o la query que se desea ejecutar

Daniel Gurisatti Carrillo

Hace 6 años

El profesor como hace para que el zsh se le vea tan bien en el vsCode? xD

Héctor Eduardo López Carballo

Hola!

Me parece que es por la configuración que le hizo a zsh, qué es la terminal en sí, no está completamente relacionada con vscode. Puedes echarle un vistazo a este artículo Terminal en Big Sur, más bonita que nunca para que aprendas a personalizar tu terminal. No necesitas tener mac forzosamente.

Cristian Blandon

De acuerdo con el comentario anterior... Yo tengo mi ZSH totalmente customizada (con el artículo que @hec_lopz te compartió fue que la personalicé), y en el vscode la visualizo exactamente igual sin haber hecho nada ahí.

Ybrahin Martinez

Entiendo que graph-tools es un wrapper sin embargo tengo dos preguntas:

Sé que makeExecutableSchema hace lo mismo que buildSchema pero mas especializado, pero ¿qué es lo que hace especializado? ¿No se podría hacer lo mismo pero con buildSchema?

jose daniel corredor zambrano

me funciono al momento de traer los argumentos en el resolver de la siguiente manera:

getCourse: (_, args) => {
            const course = courses.filter(course => course._id === args.id)
            return course.pop();
        }

Utilizando esta version de graphq-tools/schema:

"@graphql-tools/schema": "^9.0.12"

Recursos

Resumen

Argumentos

Progreso del curso

Introducción

Conceptos básicos

Conceptos avanzados

Consumiendo el API