Scalars, filtros y queries avanzadas

Clase 4 de 23 • Curso Avanzado de Node.js con GraphQL, Apollo Server y Prisma

Favio Amarilla Miño

student•

Al ver un curso espero aprender cosas no a escuchar explicaciones de codigos y/o proyectos que ya estan todos desarrollados... Cual seria el objetivo de este curso si solo me pongo a leer codigo Para otros cursos mejor ponte a programar desde cero y explicar, no te pongas a explicar codigo que ya esta escrito :)

Andres Leonardo Arevalo

student•

Totalmente de acuerdo!

Sergio Leonardo González Fonseca

student•

La mayor cantidad de tiempo como programador, vas a estar leyendo código de otros y no escribiendolo. La explicación me pareció muy valiosa

Mauricio Combariza

student•

Me gusta mucho la metodología para enseñar que usa este profesor. Es dificil, pero genera un gran reto en cada clase

Luis Berenguer

student•

Si, mediante los retos se aprende haciendo, de verdad tienes que pensar por tu cuenta como resolverlo.

Andres Leonardo Arevalo

student•

Me perdonaran pero que sentido tiene venir a una clase a leer el 30% del total del código agregado y ver al profesor copiar y pegar, no es que no quiera tomarme el tiempo de entender pero se trata de una clase

Esteban Obilinovic

student•

Yo tampoco entiendo la verdad, de una clase a otra tiene medio proyecto listo y lo muestra por encima sin explicar bien qué y por qué hace cada cosa. :/

Daniel Elías Ángel Barreto

student•

Para los próximos cursos seria bueno que hiciera todo paso a paso se entiende más así, la mayoría de los videos de programación en platzi tienen ya archivos creados y no se si lo hacen para que el curso sea más corto, pero la verdad le baja calidad y no se aprende como es debido, por eso prefiero los cursos de udemy en cuanto a programación ya que puedes encontrarlos de ese tipo paso a paso

Steve Anthony Luzquiños Agama

student•

Por si alguien se pregunta de dónde sacó el profesor la definición del scalar (al menos yo no la sabía, ni la entendía), la tomó de esta documentación de Apollo, creo que esta otra docu de GraphQL también les resultará útil.

Steve Anthony Luzquiños Agama

student•

Por otro lado, les comparto mi propia implementación del scalar DateTime:

import { GraphQLScalarType, Kind } from 'graphql'

const DateTime = new GraphQLScalarType({
  name: 'DateTime',
  description: 'Represents a date time object',
  serialize(value: unknown): string {
    if (!(value instanceof Date))
      throw new Error('DateTime can only serialize Date objects')

    return value.toISOString()
  },
  parseValue(value: unknown): Date {
    if (typeof value !== 'string' && typeof value !== 'number')
      throw new Error('DateTime can only parse string values or timestamps')

    const date = new Date(value)

    if (isNaN(date.getTime()))
      throw new Error(
        'DateTime can only parse valid string dates or timestamps'
      )

    return date
  },
  parseLiteral(ast): Date {
    if (ast.kind !== Kind.STRING && ast.kind !== Kind.INT)
      throw new Error('DateTime can only parse string values or timestamps')

    const date = new Date(
      ast.kind === Kind.INT ? ast.value : parseInt(ast.value)
    )

    if (isNaN(date.getTime()))
      throw new Error(
        'DateTime can only parse valid string dates or timestamps'
      )

    return date
  }
})

export { DateTime }

Miguel Hernández

student•

Después de 3 días aprendiendo TypeScript corregí mi código basado en esta clase :D :D Lo explicare paso a paso:

Dividí el código en una carpeta models la cual tiene el archivo schema.graphql y una resolvers con los resolvers.
El index.ts configure el context del apollo server para pasar la "db" (luego tendra sentido)
El schema.graphql tiene el modelo de la clase:
Dentro de resolvers/index.ts cree el objeto para el resolver de apollo server
Para configurar los queries y mutations cree sus propios archivos y el objeto context tiene toda la información de la "db" que configure en la propiedad context del apollo server (ignoren el type de la línea 3 xd)
Dentro de /resolvers/base estan algunos tipos usados en los queries y mutations y el resolver para el type Avocado o algún otro type si llegara a crear otro

El unico problema que tuve fue este warning:

Fue muy complejo pero divertido programar todo eso, aprendi muchas cosas de TypeScript como los Utility Types, keyof, etc. Y muchas otras formas de configurar el resolver. Repo de mi proyecto

Nunca pares de aprender

Omar Jalil Fierro López

student•

¿Cómo se llama la extensión para el cursor que parpadea bonito?

Miguel Hernández

student•

Hola, es en la configuración del editor.

Francisco Ponce

student•

¿Una duda es posible definir solamente en el schema un enum y no pasarle el tipo en el modelo?

Supongamos, que quisiera agregar un enum para saber de donde provienen mis aguacates de zonas preestablecidas. Digamos o de Michoacán, o de Jalisco o de Nayarit.

Marcelo J. Gracia

student•

Si defines el enum en tu schema lo puedes utilizar en el back pasando tal cual tu definición. Pero ten cuidado en la definición de enum xq prisma a veces no es compatible con Graphql, me ha dado problemas en varios enumerados. Cuando llegue al video te cuento

Emmanuel Rodríguez

student•

Hola 👋

Es correcto lo que comenta Marcelo. Y para arreglar ciertos issues por tu capa lógica (DAO o DTO), te sugiero generes un catálogo para este fin que, dependiendo tu arquitectura, la puedes definir como un controlador o delegado por tu prisma.

Los enum son cool para escenarios como etiquetas simples pero si cambian mucho o son dinámicos, te recomiendo lib para la generación de enum o darle un soporte mediante relaciones.

Cesar González Caballero

student•

Bueno, otro curso que no puedo aprender con éste profesor porque no explica su código solo pasa por encima y que adivinemos...

Alexander Coronell

student•

Exacto, no es la primera vez que me ocurre con este profesor, paso más tiempo tratando de hacer funcionar el código, todo lo presentado en la clase actual, es como haberse saltado 5 clases, nos queda un código desconectado totalmente.

José Antonio Sánchez Aguilar

student•

Para poder sacarle provecho a este curso hay que tener un conocimiento basico de typescript, apollo, prisma y graphql porque no te lleva paso a paso mientras crea el paso sino que te muestra codigo que ya existe

David Rodriguez

student•

Les comparto el código del Mutation 15:40 -> Data completa del repo del profe

{
  "data": {
    "name": "Reed Avocado",
    "price": 1.18,
    "image": "/images/reed.jpg",
      "description":
        "Developed from a chance seedling found in 1948 by James S. Reed in California, this cultivar has large, round, green fruit with a smooth texture and dark, thick, glossy skin. Smooth and delicate, the flesh has a slightly nutty flavor. The skin ripens green. A Guatemalan type, it is hardy to −1 °C (30 °F). Tree size is about 5 by 4 m (16.4 by 13.1 ft)",
      "shape": "Round",
      "hardiness": "−1 °C",
      "taste": "Exquisite, is an avocado"
  }
}

Juan Camilo Cortes

student•

Por que no me deja crear el otro branch de dev 2-queries? ya que no me sale ninguno de los archivos como el de .graphql ?

Jonathan 🦑 Alvarez

teacher•

Hola Juan Camilo! Podrías mostrar que comando estás corriendo y el error que te da? También sería útil ver tu repo en GitHub :D

Juan Camilo Cortes

student•

Hola jonalvarezz, Gracias por responde, le paso el codigo siguiente tal cual tu lo pones pero me salta el error, todo ejecutado desde el branch main, si comprendo que ya existe otra branch con el mismo nombre, o creo otra branch con nombre distinto ?

<code> ➜ platzi-graphql-fullstack git:(main) git checkout -b dev 2-queries
fatal: A branch named 'dev' already exists.

El Repo en GitHub esta en construccion ya que le quiero dar un buen README pero aqui apenas va el comiendo, lo puedes ver https://github.com/juancortesparra/Platzi-Avocado.

Irving Juárez

student•

En el reto de la clase anterior dijo que hicieramos lo menos necesario que pondriamos en el Card del aguacate, yo puse Name y Img, pero de repente sale con el atributo del Taste, apoco los aguacates tienen sabores diferentes?

Stiven Castillo Montero

student•

Muy bien explicado, me gusta está metodología porque no tengo que estar siguiendo el ritmo de profesor al escribir código ni estar pausando el vídeo. Así me queda claro todo y si tengo alguna duda o quiero experimentar algo, lo hago en el código ya hecho.

Miguel Hernández

student•

Mi repo. Le agregare un tag de un antes y después de esta clase a ver que tal queda luego :D https://github.com/MiguelHG2351/platzi-node-prisma-graphql

Andres Alvarez Becerra

student•

Hola. Una pregunta, Por que ++DateTime++ no se definió con ++apollo-server++ y si con ++graphql++?

Jonathan 🦑 Alvarez

teacher•

Muy buena pregunta, queríamos mostrar como hacerlo sin librería :)

José Luis Encastin Flores

student•

¿Qué función tiene el "Avocado" que se encuentra en el objeto default del documento "resolvers.ts"? Por lo que entiendo retorna el valor de un solo avocado al hacer el query en graphql, pero para eso está justamente el Query de "avo", no?

Alexander Valencia

student•

Tenia que hacer algun curso antes de entrar a este?

realmente me pierdo, en la clase anterior apenas si se instalo el apollo y ya en esta se supone que ya deberia saber que son las mutaciones, schema, scalar.......

Joalin Pineda

student•

Hola Para el curso se recomienda tener conocimientos previos de JavaScript Node.js TypeScript Fundamentos de GraphQL Podrías hacer el Curso Básico de GraphQL antes de tomar este. :smiley:

Alfonso Hernández Montoya

student•

tengo un response que tipo Scalar:string pero me arroha una cadena con \n\n ¿como puedo transformar o procesarlo para mostrarlo en un html ?

Saludos

Alexander Coronell

student•

Realmente terrible este capíitulo del curso. los códigos de estos modulos no se encuentran en el repositorio. Ya que iba a "explicar" el código, al menos debió enseñarlo en pantalla.

import { GraphQLScalarType, Kind } from 'graphql'

const DateTime = new GraphQLScalarType({
  name: 'DateTime',
  description: 'Represents a date time object',
  serialize(value: unknown): string {
    if (!(value instanceof Date))
      throw new Error('DateTime can only serialize Date objects')

    return value.toISOString()
  },
  parseValue(value: unknown): Date {
    if (typeof value !== 'string' && typeof value !== 'number')
      throw new Error('DateTime can only parse string values or timestamps')

    const date = new Date(value)

    if (isNaN(date.getTime()))
      throw new Error(
        'DateTime can only parse valid string dates or timestamps'
      )

    return date
  },
  parseLiteral(ast): Date {
    if (ast.kind !== Kind.STRING && ast.kind !== Kind.INT)
      throw new Error('DateTime can only parse string values or timestamps')

    const date = new Date(
      ast.kind === Kind.INT ? ast.value : parseInt(ast.value)
    )

    if (isNaN(date.getTime()))
      throw new Error(
        'DateTime can only parse valid string dates or timestamps'
      )

    return date
  }
})

export { DateTime }

{
  "data": {
    "name": "Reed Avocado",
    "price": 1.18,
    "image": "/images/reed.jpg",
      "description":
        "Developed from a chance seedling found in 1948 by James S. Reed in California, this cultivar has large, round, green fruit with a smooth texture and dark, thick, glossy skin. Smooth and delicate, the flesh has a slightly nutty flavor. The skin ripens green. A Guatemalan type, it is hardy to −1 °C (30 °F). Tree size is about 5 by 4 m (16.4 by 13.1 ft)",
      "shape": "Round",
      "hardiness": "−1 °C",
      "taste": "Exquisite, is an avocado"
  }
}

Scalars, filtros y queries avanzadas

Introducción

¿Por qué GraphQL?

Arquitectura backend con Node.js y GraphQL

Construyendo una query simple con Apollo Server

Scalars, filtros y queries avanzadas

Base de datos y ORM

ORMs, Prisma y automatización

Modelando la base datos y schema

Resolvers para mutaciones y filtros

Filtros en Prisma

Paginación y filtros avanzados

Archivos estáticos

Archivos estáticos con Express.js y Apollo Server

Producción

Protección de recursos en GraphQL

Testing

Pruebas End to End: Estrategias y Herramientas Efectivas

Preparando la app para producción

Preparando el servidor para Heroku

Introspección

Bases de datos en producción

Deploying

Próximos pasos

Reto: guestbook

Desventajas de GraphQL

Frameworks de GraphQL

Conectemos el frontend