Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Custom Types

6/25
Recursos

Para este proyecto vamos a seguir el estándar de estilos Standard, para instalarlo corremos el siguiente comando:

npm i standard -D

GraphQL nos permite configurar nuestros propios tipos de datos, estos deben tener la siguientes sintaxis:

type <Nombre del tipo> {
  propiedad: Tipo de dato
}

Dentro de nuestros tipos de datos podemos configurar un campo de un tipo como obligatorio con el signo “!”, quedando por ejemplo:

type Course {
  title: String!
}

Aportes 27

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

si no les muestra el highlight en los archivos .graphql pueden instalar un pluggin en vs studio code GraphQL for VSCode

https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode

Como buena practica de GraphQL en el schema al declarar los queries se evita usar verbos como get,list en vez de getCourses puede ir solo courses, en algunos casos ponen los verbos es cuando se crean un query para consumir la informacion y pasar variables.

Como se manejaría la parte de seguridad (JWT | OAuth) en graphQL?

Apenas llevo 6 clases y después de hacer API’s REST toda la vida ya me siento que vivo en el futuro. 🚀

=(… perdí 10 minutos de tiempo buscando un error y era que en ves de “readFileSync” escribí “readFileSycn”

No es recomendable escribir código GraphQL (schema) dentro de comillas ya que no hay ningún tipo de syntax highlighting, por lo que es mejor tenerlo en archivos independientes con extensión graphql.

Ahora hay que importar este esquema a index.js para poder usarlo, para esto hay que importar reaFileSync de fs y join de path:

const { readFileSync } = require('fs');
const { join } = require('path');

Documentación de fs: https://nodejs.org/api/fs.html#fs_file_system

Documentación de path: https://nodejs.org/api/path.html

Después hay que hacer uso de estas funciones para pasarle el schema desde el archivo externo a la función buildSchema.

const schema = buildSchema(readFileSync(
	join(__dirname, 'lib', 'schema.graphql'),'utf-8')
);

Para poner los resolvers en un archivo independiente solo se exporta e importa de forma normal.

// archivos resolvers.js
module.exports = {
    hello: () => {
        return 'Hello world'
    }
};

// index.js 
const resolvers = require('./lib/resolvers');

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

Crear un custom type:

# schema.graphql
type Course {
	_id: ID
	title: String
	description: String
	topic: String
}
# ahora query tiene getCourse que devuelve un arreglo con los cursos
type Query {
	getCourses: [Course]
}

En el archivo resolvers:

const courses = [
    {
        _id: 1,
        title: 'GraphQL',
        description: 'Basic GraphQL course',
        topic: 'Development'
    }
]

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

Que extension en visual studio code es recomendable para el syntax higlighting de los archivos .graphql?

Creamos la carpeta ‘lib’ y dentro de ella:

resolvers.js:

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

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

Y también schema.graphql:

type Course {
    _id: ID
    title: String
    teacher: String
    description: String
    topic: String
}

type Query {
    "Devuelve todos los cursos"
    getCourses: [Course]
}

Mejoramos index.js:

const { buildSchema } = require("graphql");
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 schema = buildSchema(readFileSync(join(__dirname, "lib", "schema.graphql"), "utf-8"));
//* 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`);
});

Yo esta clase la hice con un objeto llamado graphHTTP de express–graphql. Es muy similar pero me costo un poco configurarlo. Lo comparto por aquí


const { graphql, buildSchema } = require("graphql");
const express = require("express");
const { graphqlHTTP } = require("express-graphql");
const app = express();
const port = process.env.port || 3000;
const { readFileSync} = require("fs");
const { join } = require("path");
const resolvers = require("./lib/resolvers");
//definiendo el schema

const schema = buildSchema(
    readFileSync(join(__dirname, 'lib', 'schema.graphql'), 'utf-8')
  );


//EJECUTAR QUERY
graphql(schema,'{getCourses {_id title }}', resolvers).then(data => {
    data.data.getCourses.forEach(element => { 
        console.log("test");
        console.log(element.title);
    })
});

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

app.listen(port, () => {
    console.log(`puerto activo en ${port}`);
});

Se parece un poco a angular con los models ,los Custom Types

Madre de Dioz!!! Veo el final de esta clase y me equedo anonadado!!!

Cómo es posible que no haya usado GraphQl antes! creo que me enamoré!!! ❤️____❤️

¡Usen tildes por favor!

Me gusta, y se ve tan amigable como mongo. Quiero pensar que se complementan para meter mas power a la app

Que buena clase, me esta gustando esto!!

schema.graphql

type Course{
    _id: ID
    title: String
    teacher: String
    description: String
    topic: String
}

type Query{
    "Devuelve todos los cursos"
    getCourses: [Course]
}

resolvers.js

'use strict'

const courses = [
  {
  _id: 'anyid',
  title: 'Mi título',
  teacher: 'Mi profesor',
  description: 'Una descripción',
  topic: 'Programación'
  },
  {
  _id: 'anyid',
  title: 'Mi título 2',
  teacher: 'Mi profesor',
  description: 'Una descripción',
  topic: 'Programación'
  },
  {
  _id: 'anyid',
  title: 'Mi título 3',
  teacher: 'Mi profesor',
  description: 'Una descripción',
  topic: 'Programación'
  }
]

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

Quiero hacer esto:

type Alumno {
  "Retorna algo"
  ID: String
  NOMBRE: String
  NOTAS:  [{
    CURSO: String
    NOTA: String
  }]
}

Se que se puede separar NOTAS en otro type, pero deseo hacerlo de esa forma porque me ocuparía menos codigo, ademas al trabajar con objetos mas complejos(anidados 3 o 4 veces) seria mas fácil de entender tenerlo todo junto.

Genial, muy bien explicado.

No se pero en el curso anterior me parece mas amigable separar todo esto por archivo y sus respectivos resolvers. Es una observación domas.

Excelente!!

GraphQL for VSCode

utilizen esta extencion de visual studio code.

GraphQL parece de otro mundo. Esta super cool

// Definiendo esquema

const schema = buildSchema(
  readFileSync(join(__dirname, 'lib', 'schema.graphql'), 'utf-8')
);

Para los archivos graphql, yo estoy usando:

Para formatear: Prettier - Code Formatter Prettier
y para el highlighting: GrafQL for VSCode - Kumar Harsh

Hace tiempo revisando GraphQL genere un pequeño artículo en el cual se detallan los conceptos base, espero les sirva
https://medium.com/@jmz12/que-es-graphql-bf835e55960

En el caso que tenga dominos mas complejos con muchas colecciones de datos, tener todos los tipos en un esquema, al igual que los resolvers, se puede volver caotico, que practica se recomienda en este caso, se pueden crear esquemas por colecciones, y en el llamado como se harían?

Voy empezando el curso y ya me esta volando la cabeza de todas las cosas que se podrían hacer con esta tecnología