Alias y fragments

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

Resumen

Dentro de GraphQL podemos correr más de una petición a la vez y nombrarlas de distinta manera para poder identificarlas, esto es posible gracias a los Aliases o simplemente Alias.

La sintaxis de un Alias es bastante simple:

nombreDelAlias: tipoDeDato(argumento: tipo) {
  datos
}

Además de los Alias, podemos agrupar campos para ser reutilizados en distintas peticiones gracias a los Fragments.

Jecsham Castillo

student•

Cada vez me está encantando más GraphQL

Cesar David Ramírez Dimaté

student•

Así es, es bastante práctico. Imagínate tener que modificar la respuesta de una API a cada rato para poder hacer esto jajaja.

Cristian Mota Núñez

student•

Basicamente estos consectos convierten tu API en un gran JSON que puedes consumir a tu antojo 🤯🤯💥

Mateo Nieto Hoyos

student•

Real

Yerlinson Maturana Serna

student•

Definitivamente esto deja a Rest en pañales. :o

Cesar David Ramírez Dimaté

student•

Igual sigues respondiendo en rest jejeje. Más bien que la construcción de contratos de las APIs se quedan en pañales.

Iraida Mercedes Barreto Díaz

student•

Me encantan que con los fragments se puedan definir los campos quiero traer en la consulta :o

Ya lo implementé y funcionó :')

!aliasyfragments

Carl Friedrich Mateus Sierra

student•

Es bueno hacer varios consultas en una misma peticion es rapido el servicio?

Favio Náquira

student•

Creo que va a depender de que tan optimizados estén tus resolvers, pero sin lugar a dudas, el hecho de solamente hacer una petición y no varias es un upgrade mayor a tus aplicaciones.

Mario Menjívar

student•

Dependerá de su complejidad. Y esta dependerá de tu creatividad al resolver los requerimientos :)

Carl Friedrich Mateus Sierra

student•

He visto este curso de Graphql y me parece excelente. Pero es bueno hacerlo de esta manera o es mejor utilizar herramientas como prisma o postgraphile para llamar la informacion desde la base de datos?

Jesus Eduardo Murrieta Rosas

student•

TE recomiendo prisma, lo utilizo como microservicios en kubernetes, conectando diferentes bases de datos y respondiendo con prisma graphql para diferentes apps.

Cesar David Ramírez Dimaté

student•

Qué hacen esas dos herramientas que mencionaste?

Carlos Enrique Ramírez Flores

student•

La documentación esta muy bien!! Vamos a darle una checada! https://graphql.github.io/learn/queries/#aliases

Alex Abel Lerman

student•

Brutal

Héctor Daniel Hernández Castillo

student•

GraphQL realmente enamora a primera vista.

Carlos Hernandez

student•

Qué maravilla

Luis Alberto Colunga Pérez

student•

Tengo una duda, se pueden realizar fragments dentro de nuestro código en vez de hacerlo por consulta en el graphiql?

Nery Alberto Cano Ortigoza

student•

La idea es que puedas exportar las funciones que estamos creando a nuestro codigo, por ejemplo de react y lo utilices como funciones que te retornen los valores de la base de datos

Francisco Garcia [C6]

student•

Muy interesante

{
  AllCourses: getCourses{
    _id
    title
  }
  
  Course1: getCourse(id: "5f0c8140c6163a17722314d4"){
    ...CourseFields
    teacher
  }
  
    Course2: getCourse(id: "5f0c8152c6163a17722314d5"){
    ...CourseFields
    topic
  }
}

fragment CourseFields on Course {
 _id
  title
  description
}

Pablo Verduzco

student•

🤯

Andres Felipe Jerez Giraldo

student•

Muchachos tengo una duda, intente hacer el mismo fragment tal cual el ejemplo del profesor, pero en el course1 y course2 me devuelve nulls ambos, alguien tiene idea de por que ?

{
  Allcourses: getCourses {
    ...CourseFields
  }
  
  Course1: getCourse(id: &quot;5e668b324066c107a9aa40b5&quot;) {
    ...CourseFields
  }
  
  Course2: getCourse(id: &quot;5e66a4ded8550d2880d55047&quot;) {
    ...CourseFields
  }
}

fragment CourseFields on Course {
  _id
  title
  description
}

Y la respuesta:

{
  &quot;data&quot;: {
    &quot;Allcourses&quot;: [
      {
        &quot;_id&quot;: &quot;5e668b324066c107a9aa40b5&quot;,
        &quot;title&quot;: &quot;Mi titulo&quot;,
        &quot;description&quot;: &quot;Mi descripcion&quot;
      },
      {
        &quot;_id&quot;: &quot;5e668b324066c107a9aa40b6&quot;,
        &quot;title&quot;: &quot;Mi titulo 2&quot;,
        &quot;description&quot;: &quot;Mi descripcion 2&quot;
      },
      {
        &quot;_id&quot;: &quot;5e66a4ded8550d2880d55047&quot;,
        &quot;title&quot;: &quot;Curso de ejemplo 4&quot;,
        &quot;description&quot;: &quot;descripcion fantabulosa de mutacion&quot;
      }
    ],
    &quot;Course1&quot;: null,
    &quot;Course2&quot;: null
  }
}

Andres Felipe Jerez Giraldo

student•

nvm, ya encontre que era

Diego Fernando Caviedes Camaho

student•

Este el mimos spread operator

Miguel Angel Reyes Moreno

student•

Interesante que estemos viendo conceptos avanzados en el curso básico.

Alias y fragments

En GraphQL Podemos hacer varias consultas al mismo tiempo, por ejemplo:

query{
  AllCourses: getCourses{
    _id
    title
  }
  Course1: getCourse(id:"61664f8ded307fc554c718ff"){
    _id
    title
    description
  }
  Course2: getCourse(id:"61664f8ded307fc554c71901"){
    teacher
    description
  }
}

Con los fragments podemos crear queries que mandamos a llamar y así simplificamos el código de las mismas, por ejemplo:

query {
  AllCourses: getCourses{
    ...CourseFields
  }
}

fragment CourseFields on Course {
  _id
  title
  description
  people {
    _id
    name
  }
}

Jose Eduardo Romero Baltazar

student•

Esto es genial

leonardo Oteca

student•

Se pueden anidar Fragments?

Cesar David Ramírez Dimaté

student•

Si, porque se pueden crear bloques de campos similares y separarlos en fragments diferentes.

Guillermo Vara De Gante

student•

Wooow, esa parte de GraphQL esta genial!

Reinaldo Mendoza

student•

Concuerdo

juan david jaramillo zuñiga

student•

Desde un projecto Frontend con React o Angular, como se harían este tipo de consultas? http?

Reinaldo Mendoza

student•

todo pasa en el backend, luego tu decides como presentar la informacion en el front

{
  AllCourses: getCourses{
    _id
    title
  }
  
  Course1: getCourse(id: "5f0c8140c6163a17722314d4"){
    ...CourseFields
    teacher
  }
  
    Course2: getCourse(id: "5f0c8152c6163a17722314d5"){
    ...CourseFields
    topic
  }
}

fragment CourseFields on Course {
 _id
  title
  description
}

{
  Allcourses: getCourses {
    ...CourseFields
  }
  
  Course1: getCourse(id: &quot;5e668b324066c107a9aa40b5&quot;) {
    ...CourseFields
  }
  
  Course2: getCourse(id: &quot;5e66a4ded8550d2880d55047&quot;) {
    ...CourseFields
  }
}

fragment CourseFields on Course {
  _id
  title
  description
}

{
  &quot;data&quot;: {
    &quot;Allcourses&quot;: [
      {
        &quot;_id&quot;: &quot;5e668b324066c107a9aa40b5&quot;,
        &quot;title&quot;: &quot;Mi titulo&quot;,
        &quot;description&quot;: &quot;Mi descripcion&quot;
      },
      {
        &quot;_id&quot;: &quot;5e668b324066c107a9aa40b6&quot;,
        &quot;title&quot;: &quot;Mi titulo 2&quot;,
        &quot;description&quot;: &quot;Mi descripcion 2&quot;
      },
      {
        &quot;_id&quot;: &quot;5e66a4ded8550d2880d55047&quot;,
        &quot;title&quot;: &quot;Curso de ejemplo 4&quot;,
        &quot;description&quot;: &quot;descripcion fantabulosa de mutacion&quot;
      }
    ],
    &quot;Course1&quot;: null,
    &quot;Course2&quot;: null
  }
}

query{
  AllCourses: getCourses{
    _id
    title
  }
  Course1: getCourse(id:"61664f8ded307fc554c718ff"){
    _id
    title
    description
  }
  Course2: getCourse(id:"61664f8ded307fc554c71901"){
    teacher
    description
  }
}

Alias y fragments

Introducción

Introducción al curso y prerequisitos del curso

¿Qué es GraphQL?

Conceptos básicos

Schema y types

Queries y Resolvers

Sirviendo el API en la web

Custom Types

Argumentos

Configuración de base de datos

Integrando una base de datos

Mutations e Inputs

Repaso - Creando el tipo Estudiante

Nested Types

Resolver de tipos

Errores

Conceptos avanzados

Alias y fragments

Variables

Enums

Interfaces - Tipo Monitor

Directivas

Unions

Consumiendo el API

Preparando API para producción

HTTP requests

Clientes de GraphQL

Consumiendo el API desde un frontend simple

Cierre del curso