Argumentos

Clase 7 de 25 • Curso Práctico de GraphQL con JavaScript

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.

Daniela Londono

student•

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

Cristian Camilo Cucunubá

student•

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

David Behar

student•

Algo así me funcionó

const resolvers = {
  Query: {
    getCourses: () =&gt; courses,
    getCourse: (root, args) =&gt; courses.find((course) =&gt; course._id === args.id)
  }
}

Joel Aravena Villegas

student•

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

Gabriel De Andrade

student•

Hola! Escribenos a team@platzi.com :D

Víctor Fernández

student•

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

Mr Billy Ortega

student•

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

Juan Guillermo Poblete Bazaes

student•

Quitamos el paquete deprecado

npm uninstall graphql-tools

Agregamos el que Victor Menciona

npm i  @graphql-tools/schema

hice algunos cambios menores en el resolver

const resolvers = {
    Query: {
        getCourses: () => mockCourses,
        getCourse: (_, { id }) => mockCourses.find(course => course._id === id),
    },
}
module.exports = resolvers

Por acá dejo la documentación : https://www.graphql-tools.com/docs/generate-schema

Sara Manuela Rios Olaya

student•

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

student•

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

Johan Mora

student•

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

student•

Ahora el paquete makeExecutableSchema se trabaja así:

npm i @graphql-tools/schema

Se importa de la siguiente manera.

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

Miguel Angel Reyes Moreno

student•

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

Miguel Angel Muñoz Pozos

student•

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

student•

Para que se más fácil trabajar con GraphQl conforme el proyecto crezca es recomendable instalar graphql-tools con npm.

Para usar graphql tools hay que realizar los siguientes cambios:

// index.js
const { makeExecutableSchema } = require('graphql-tools');
const typeDefs = readFileSync(
    join(__dirname, 'lib', 'schema.graphql'),
    'utf-8'
);
const schema = makeExecutableSchema({typeDefs, resolvers});

También hay que configurar los resolvers:

module.exports = {
    Query : {
        getCourses: () => {
            return courses
        }
    }
};

Query con parámetros

Schema:

"Returns one course"
# ! means it's an obligatory parameter
getCourse(id: ID!): [Course]

Resolver:

getCourse: (root, args) => {
	return courses.find(course => course._id === args.id)
}

Rodolfo Murguia

student•

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

student•

Cuando definimos el schema con la propiedad _id, ¿no debería definirse de la misma manera en Query? Es decir, que quede así:

type Query {
  "Devuelve un curso"
  getCourse(_id: ID!): Course
}

En vez de así:

type Query {
  "Devuelve todos los cursos"
  getCourses: [Course]
  "Devuelve un curso"
  getCourse(id: ID!): Course
}

Fernanda Aragon

student•

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

student•

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

student•

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

student•

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

student•

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

student•

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

student•

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

student•

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

student•

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

student•

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

student•

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

Héctor Eduardo López Carballo

student•

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 Blandón

student•

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

student•

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

student•

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"