Introducción a GraphQL con Prisma (v1)

1. Introducción y lo que cubre: Bienvenido a este curso. Me emociona enseñarte una de las tecnologías de desarrollo web más demandadas en este momento, que es GraphQL. GraphQL es una forma moderna de construir API para crear el back end de nuestros proyectos. Básicamente proporciona una sintaxis simple de usar para obtener los datos exactos que queremos a nuestro front-end. Tenemos digamos, un sitio web o un dispositivo móvil o cualquier otro servicio. Este curso introductorio, cubre todos los fundamentos para empezar, como configurar nuestros servidores GraphQL, trabajar con consultas, mutaciones y suscripciones, cómo funcionan los tipos y las relaciones entre ellos. Resolver escritos, y cómo configurar una base de datos real y también utilizando de forma interactiva PRISMA, junto con mucho más que encontrarás a medida que pasemos el curso. Al final de este curso, sabrás qué es todo esto y cómo podemos aplicarlos a todos los proyectos. No sólo estaremos cubriendo teoría aburrida en este curso. De hecho, casi todos los ejemplos que cubriremos, lo convertiremos en un proyecto de curso. Este será un proyecto basado en revisión de películas donde los usuarios podrán crear una reseña, basada en las películas de la base de datos. Aprenderás a interactuar con el servidor y también con la base de datos, publicar datos como nuevos usuarios, películas, y reseñas, junto con cómo recuperar los datos exactos que queremos, como listar reseñas para usuarios particulares. Cómo podemos vincular los datos relacionales, como las críticas a las películas, y también al usuario que lo creó. Este curso está destinado a principiantes a GraphQL y también PRISMA y también incluso recién llegados a trabajar en el lado del servidor. No obstante, recomendaría al menos alguna experiencia básica de JavaScript o un lenguaje similar. Esto realmente te ayudará a pasar por este curso. Además tener una comprensión básica del papel de un servidor y una base de datos también te ayudará a sacar el máximo partido a medida que avanzas por el curso, lo que esperamos estés listo para llevar tus habilidades al siguiente nivel aprendiendo GraphQL y PRISMA. 2. ¿Qué es GraphQL?: Antes de llegar a construir un verdadero servidor GraphQL. Quiero tomarme un momento para repasar exactamente qué es GraphQL y por qué se está volviendo tan popular. GraphQL fue creado originalmente en Facebook y ahora es un proyecto de código abierto. No es un lenguaje de programación, un marco ni nada por el estilo. Es un estándar para construir A-P-Is moderno o generalmente enviar datos desde un servidor al cliente. En el mundo del desarrollo web, puede permitir que se envíen datos entre un cliente y un servidor. Estando un cliente en el lado izquierdo de este tobogán. Que puede ser cualquier cosa desde el navegador de una computadora, smartphone, o cualquier otra cosa que necesite obtener datos. Esta comunicación es a través de solicitudes H-T-T-P y el servidor sobre a la derecha. cual envía los datos solicitados de vuelta a estos clientes. Esto generalmente consiste en un servidor Web para atender las solicitudes de los clientes y también una base de datos de la que el servidor puede obtener datos si es necesario antes de devolver esto al cliente. Una forma popular de permitir que el cliente y el servidor se comuniquen es mediante el uso de lo que se denomina REST A-P-I. Un A-P-I es un conjunto de reglas para permitir la comunicación entre diferentes piezas de software. En nuestro caso, el cliente y el servidor. Las pequeñas empresas más grandes suelen poner los datos a disposición del público a través de un A-P-I. Por ejemplo; Spotify tiene un A-P-I para que podamos acceder a ellos catálogo de música. Significa que cualquiera podría construir su propio reproductor de música personal y luego usar los datos de Spotify para obtener canciones, playlist, información de artistas y mucho más. Google también tiene un montón de A-P-I también. Por ejemplo; permitir que las aplicaciones accedan a los datos de Google Maps o puedes crear tus propios sitios web de reproductores de vídeo y luego usar videos de YouTube entre bastidores. A-P-tradicional se conoce a menudo como REST A-P-Is. No obstante, sí tienen algunas limitaciones con estos A-P-Is. Generalmente tienen múltiples Endpoints para obtener datos. Por ejemplo; se trata de puntos finales base de Spotify en la parte superior, que es un U-R-L. Entonces debajo de esto, extendemos este U-R-L para obtener más datos como un álbum del album/id Entonces en la parte inferior también podemos sumar pistas de slash hacia adelante a este U-R-L para conseguir todos los temas para este disco en particular. A partir de nuestro proyecto que se estará construyendo en este curso. Digamos que queríamos conseguir críticas de películas para un usuario. Usando un REST A-P-I, es posible que necesitemos realizar múltiples solicitudes a diferentes puntos finales para obtener todos los datos que necesitamos como el endpoint de los usuarios, el endpoint de las revisiones, y también el endpoint de la película. Dependiendo de cómo se estructurara el A-P-I. Esto puede resultar en recuperar mucho más información de la que necesitábamos. Si sólo necesitábamos el título de la película. Es posible que aún necesitemos recuperar todos los demás datos de la película también como el ID, la descripción, la información del cliente, y así sucesivamente. A la par de realizar múltiples solicitudes, que pueden llevar mucho tiempo. Si bien no hay nada fundamentalmente malo con este enfoque, GraphQL nos proporciona una mejor alternativa. GraphQL solo tiene un endpoint, mínimo preocupado una consulta para nuestros datos y tiene la flexibilidad de solo devolvernos los datos exactos que necesitamos. Por ejemplo; Es posible que un dispositivo móvil no necesite recuperar los mismos datos que un sitio web de escritorio debido al tamaño de pantalla reducido. un dispositivo pequeño solo desee las revisiones información básica como el nombre del autor y el título de la película. En tanto que la aplicación de escritorio también puede querer más información, como la clasificación de películas y la descripción. Esto se puede lograr fácilmente usando GraphQL mientras que REST A-P-Is puede tener problemas para ofrecer la misma flexibilidad debido al uso de estos extremos rígidos. Conseguiré mucha práctica al describir los datos que queremos recuperar durante este curso. Esto hace que GraphQL sea una forma realmente flexible, rápida y eficiente de conseguir datos en nuestros proyectos. 3. Qué vamos a construir: medida que avancemos por este curso, estaremos creando un proyecto basado en crítica de películas. Toda la idea es que podemos crear usuarios, podemos crear películas, y luego cada usuario puede crear una reseña basada en la película en particular. Ya que estamos usando GraphQL que es un lenguaje de consulta para crear el back-end de sitios web, no vamos a tener una interfaz de usuario con la que lidiar para este proyecto sino que en su lugar vamos a usar lo que puedes ver aquí, y esto se llama el patio de recreo GraphQL, que nos permite interactuar con todos nuestros datos ya sea que estén almacenados en nuestro proyecto o almacenados en una base de datos que vamos a estar agregando. Si todo esto parece un poco confuso y desfamiliar, aunque ¿qué dijiste? Sí, ya que obtenemos mucha práctica usando un patio de recreo GraphQL a medida que avanzamos. A medida que avanzamos, vamos a estar creando todo el código que necesitamos para nuestro servidor y almacenar datos en nuestra base de datos. Vamos a estar haciendo cosas como realizar consultas donde obtenemos datos como películas. Aquí te mostramos un listado de todas las películas de nuestra base de datos. Vamos a estar haciendo lo mismo para los usuarios. Escribiremos todo el código para que podamos agarrar a los usuarios, y cualquier dato asociado, como el usuario está vinculado a las reseñas y también las reseñas vinculadas a un usuario y también a una película también. Esto nos dará mucho para ir a practicar el arte, arte en las relaciones entre nuestros diferentes tipos. También podemos hacer cosas como agarrar reseñas por usuario y GraphQL es realmente flexible, permitiéndonos retroceder solo los datos exactos que queremos. Todos estos datos vuelven de nuestra base de datos, estructurada como un objeto. Es fácil enviar a cualquier front-end ya sea un sitio web o un dispositivo móvil. Todos estos datos se almacenarán dentro de una base de datos real donde establecemos el prismático interactuar con nuestra base de datos. Esto nos da una representación visual mucho mejor. Podemos ver a nuestros usuarios, nuestras películas y cualquier crítica que se esté agregando. También podemos ver cualquier relación. Si miramos la película, podemos ver las críticas y cuántas por cada una. Lo mismo para los usuarios. Podemos ver cuántas reseñas se han publicado para cada una, las connies, y luego también nos pueden llevar a esa revisión. De vuelta en el patio de recreo, además de leer datos de la base de datos, también miraremos cómo podemos suscribirnos a los usuarios, también veremos cómo podemos createMovies, y también veremos cómo podemos crear reseñas que están vinculadas a la película y al usuario. Otra gran característica de cuando se usa GraphQL es que también podemos usar lo que se llama una suscripción. Y esto nos permitirá suscribirnos a los datos. Cada vez que los datos cambian en el servidor, automáticamente los empuja a nuestro front-end para que se nos notifique cualquier cambio. Esto es ideal para algo como una revisión. Cada vez que se crea una nueva revisión, vamos a crear una reseña justo aquí. Entonces vemos estos datos empujados a nuestro front end. Podemos mantenernos al tanto de las cosas a medida que cambian. De nuevo, no te preocupes demasiado por lo que ves aquí. Esto sólo nos permitirá interactuar con los datos que vamos a estar creando durante este curso. No vamos a perder tiempo en absoluto llegar a lidiar con nuestro nuevo proyecto. Empezaré esto en el siguiente video. 4. Configuración de nuestro proyecto y GraphQL-Yoga: Durante este curso, estaremos creando un servidor base de revisión de películas GraphQL, que ya hemos mirado. Para empezar necesitamos crear una carpeta para proyectos y quiero colocar la mía en el escritorio para un fácil acceso. Voy a llamar a esta película guión revisión. Después ábrelo en Visual Studio Code, que estoy usando como mi editor de texto para el curso. Abramos esto y luego arrastramos sobre la carpeta del proyecto al código VS. Por supuesto puedes usar cualquier editor de texto que prefieras. Antes de hacer cualquier otra cosa, necesitarás asegurarte de tener instalado Node en tu computadora. Para ello, abre el navegador y luego tenemos que ir a Nodejs.org. Haga clic en la descarga para obtener la última versión. Una vez instalado esto, luego ejecutamos la instalación al igual que con cualquiera de una descarga. Voy a dar click en esto. Continuar por. Debe estar de acuerdo con la licencia, y luego instalar esto en mi disco duro. Solo debe tomar unos momentos para instalarlo también. Una vez hecho esto, despeja esto el camino y entonces podremos volver a Visual Studio Code. Voy a abrir una terminal, voy a terminal y luego nueva terminal. Abajo en la parte inferior ves la terminal ya se ha abierto y podemos ejecutar algunos comandos. El primero que se quiere hacer es volver a comprobar el nodo y el NPM se ha instalado con éxito. Hacemos esto comprobando Node-V y esto nos dará la versión de nodo del buck, que han instalado. Si ves un error en lugar de un número de versión, ha habido un problema al instalar el Nodo y necesitas volver atrás y hacer esto primero. También podríamos volver a verificar con Node Package Manager con NPM B. También deberían darnos la versión de NPM tendrá instalada y viene empaquetada con la descarga del nodo. Genial. Dentro de la terminal podemos ejecutar NPM en ella. Hit Enter y esto inicializará nuestros proyectos. Simplemente voy a ingresar opciones completas, manteniendo la mayoría de los locales como predeterminados. El nombre del paquete, entro, la descripción de la versión. El que cambia a make es en lugar de tener los puntos de entrada como el index.js, quiero cambios a fuente, así src/idex.js, entra y luego entra a través del resto de las opciones. Si abrimos la barra lateral, podemos ver dentro de nuestra carpeta ahora tenemos un archivo package.json. Esto contiene toda la información sobre nuestro proyecto el cual se ingresa. Este es un archivo Nodo bastante estándar y nada específico de GraphQL en este punto. A continuación estaremos creando nuestro archivo index.js, que se agrega como puntos de entrada. Vuelve a la barra lateral en nuestro editor abierto y crea nueva carpeta en la raíz de nuestro proyecto, que es la fuente, así src. Dentro de aquí podemos crear nuestra página de índice, que es index.js. Dado que GraphQL es una especificación más que un lenguaje de programación real, una biblioteca o cualquier otra cosa, necesitamos esperar para usar realmente GraphQL en proyectos del mundo real. GraphQL como especificación no es específico de ningún lenguaje de programación. Por lo tanto, necesitamos usar un paquete o una implementación para nodo, que estará utilizando para este curso. El que estoy usando se llama GraphQL Yoga. Por supuesto hay otras alternativas pero esta es una que voy a usar para este curso, ya que tiene muchas características y es fácil ponerse en marcha con. Ve al navegador y abre chrome. Entonces en una nueva pestaña, voy a buscar GraphQL yoga. Podemos ver que es un enlace de GitHub aquí para GraphQL yoga, que nos lleva a la documentación. Otras implementaciones también están disponibles para, por lo que podemos usar GraphQL, en otros lenguajes o entornos como Python. GraphQL yoga es un servidor GraphQL fácil de usar y configurar, que nos permitirá aprovechar todas las características de GraphQL que necesitarán como consultas, mutaciones, y suscripciones por nombrar algunas. Entérate en nuestro proyecto hasta la terminal podemos usar NPM para instalar este paquete. NPM, que es para instalar graphql-yoga. Una vez instalado esto podemos utilizar nuestro archivo index.js. Ya empezamos a crear. Hacer nuestro servidor GraphQL. Empezaremos en este archivo index.js requiriendo el servidor GraphQL. Entonces const GraphQL Server, tengo cuidado de la carcasa aquí, esto es igual a requerir, voy a requerir nuestro paquete de yoga GraphQL, graphql-yoga. A continuación necesitamos crear una nueva instancia de este servidor GraphQL. Voy a llamar a esto un nombre constante de servidor y establecer esto igual a una nueva instancia de GraphQL Server. Este servidor GraphQL toma un objeto y luego aquí pasaría en dos propiedades. Estas propiedades se denominan TypeDefs y resolvers. El primero TypeDefs, y luego resuelve. Podemos entonces este servidor que creamos y luego llamar al método de inicio. El método de inicio toma entonces una devolución de llamada, que es una función que ejecutará un esto antes de que se inicie la encuesta. registro de consola simple estará bien por ahora. Vamos a convertir esto en una función, que devuelve un registro de consola. Este registro de consola sólo va a enviar un mensaje de servidor se está ejecutando en localhost, pausa 4000, y ahí vamos. Este es nuestro gráfico básico SQL Server ahora en su lugar. A continuación incluiremos algunos datos de muestra para trabajar, antes de regresar, un vistazo más de cerca a los TypeDefs y resolvers que pasas a nuestro servidor. 5. Incluir datos de muestra para trabajar con los que: Con este curso se incluye una descarga que incluye algunos datos de muestra, ten esta descarga sentada aquí como un archivo de texto en el escritorio. Cuando empezamos por primera vez con el gráfico QL, es posible que necesitemos algunos datos temporales para empezar. Hasta que consigamos nuestra configuración de base de datos más adelante usando PRISMA. Así que sigue adelante y descarga el archivo de datos de muestra, o si lo prefieres, puedes escribirlo en su lugar. Necesitamos crear nuevo archivo en nuestro proyecto para copiar sobre esta muestra de datos. Entonces voy a abrir la barra lateral, y dentro de la carpeta fuente, voy a crear un nuevo archivo llamado sampledata.js. Abre el archivo de texto de datos de muestra, selecciona todo, copia o menos, y luego pega esto en nuestros datos de muestra. Esto es solo algo de información para empezar con el gráfico QL, tenemos una matriz de usuarios, tenemos una matriz de películas, y también tenemos una matriz de críticas, módulo exporta todas estas podemos utilizarlas en nuestro proyecto. Podemos entonces requerir los datos de muestra en nuestro archivo index.js, robin usa películas y críticas array, quiero hacer esto en la parte superior y establecerlos como una constante. Podemos importar todas las películas de la misma línea. Entonces usos, películas y críticas, y entonces podemos requerir nuestro archivo de datos de muestra dentro de aquí ya que este no es un módulo de nodo, ¿ necesitarías agregar la ruta completa del archivo? En nuestro caso, está en la misma ubicación, así que barra de puntos y luego muestra datos. No hace falta la extensión js. Ahora necesitamos una forma de poner estos datos personalizados a disposición del resto de nuestro servidor, y el graph QL yoga proporciona el objeto de contexto que nos permita hacer esto. A lado de nuestro servidor. Voy a agregar estas dos nuevas líneas hacen más legibles, tenemos los TypeDefs, los resolvers, y luego siguiente después de aquí voy a agregar una coma y también pasar en el contexto. Nosotros configuramos esto como un objeto para que podamos pasar en múltiples artículos. Vamos a agregar en las películas del usuario y también reseñas, y estos tres son los mismos nombres que lo pasas arriba aquí como nuestras constantes. Entonces el emparejamiento dentro del contexto, si esto no tiene sentido en este momento, no te preocupes, esto quedará más claro qué hace esto en los próximos videos. Entonces por ahora, solo considera esto como una pieza de trabajo de configuración, y comenzaremos a trabajar con estos datos en el siguiente video. 6. Primera mirada: Hasta ahora hemos creado nuestro GraphQL Server, pasando por los TypeDefs y también los resolvers. Todavía no hemos mirado cuáles son estas, pero ambas son piezas muy importantes en el rompecabezas GraphQL. Esto es lo que estaremos viendo en este video. Empezando por los TypeDefs, que es abreviatura de definiciones de tipo. Este es nuestro esquema GraphQL, que básicamente nos permite estructurar nuestros datos utilizando tipos como una cadena de texto, o un valor booleano de verdadero y falso. Dado que GraphQL se puede utilizar en cualquier lenguaje de programación, escribimos servicios GraphQL usando una sintaxis especial llamada lenguaje de esquema GraphQL, que es bastante fácil de llevar adelante. Tendremos mucha práctica durante este curso. Tenemos entonces los resolvers, que es donde pedimos a nuestras funciones, que en realidad realizarán la operación que queremos en base a nuestro esquema. Cada campo de nuestro esquema está espejado por una función con el mismo nombre en los resolvers. Veamos algunos ejemplos de cómo funciona esto en acción. Un archivo ahora mismo index.qs justo encima de nuestro servidor. Voy a empezar por crear nuestros TypeDefs. Entonces const TypeDefs, y esto va a ser igual a una cadena que usamos con las garrapatas traseras. Entonces abre esto. Una vez sumar estos a una nueva línea justo debajo de esta configuración de un const de resolvers. Servicio esto igual a un objeto vacío por ahora. Empecemos por mirar los TypeDefs, o las definiciones de tipo. Al usar GraphQL, hablaremos mucho de tipos. Son estos tipos los que describen nuestros datos. Para empezar, tenemos tres tipos de raíz, Consulta, Mutación, y Suscripción. Estos grupos de tipos abarcaron las operaciones que queremos realizar. Añadamos estos ahora. Entonces el primer tipo, que va a ser Query, Q mayúscula, y establecer esto en un objeto. El segundo tipo raíz va a ser para Mutaciones, por lo que tipo Mutación, mayúscula M. El tercero va a ser Suscripción, tipo Suscripción. Nuevamente, establece esto en un objeto. utiliza una consulta para consultar a nuestro servidor y recuperar los datos que queremos. Una mutación enviará nuevos datos al servidor. Por último, tenemos una suscripción que nos da la funcionalidad en tiempo real, permitiendo que los servidores envíen datos al cliente una vez que éste cambie. Sin embargo, nos estaremos centrando en consultas para esta vez. Por lo que solo podemos eliminar la Mutación y Suscripción por ahora, y volveremos a estos ya que los necesitamos durante el curso. La consulta se crea dándole primero un nombre, seguido de un tipo, que esperamos recuperar. Un ejemplo básico se vería algo así. Tendría un Query name of movie, y esperamos recuperar una cadena. Podemos añadir signo de exclamación en el extremo, que es opcional. Esto es para declarar que siempre queremos una pantalla de vuelta y nunca puede ser el valor de null. Puede estar vacío si no se encuentran datos, pero el valor devuelto no puede contener un valor nulo. La segunda parte es configurar un solucionador para esta película Query. Recuerda dijimos que cada Consulta debe tener un solucionador con un nombre coincidente. Este resolviendo es el responsable de realizar realmente la operación que queremos, en nuestro caso, conseguir un nombre de una película. Al igual que los TypeDefs, los resolvers toman un objeto Query, Mutation, y Suscripción coincidente para agruparlos, pero ahora aunque solo necesitamos la consulta. Por lo que dentro del objeto resolvers, podemos configurar nuestras Consultas con mayúscula Q. Dentro de aquí, podemos enumerar todas nuestras Consultas y solo tendremos una por ahora. Por lo que podemos resolver el método de resolución de consultas con un nombre coincidente de película. El cine va a ser una función que simplemente va a devolver una cadena. Por lo que devolver valor, podemos agregar cualquier nombre que queramos. Entonces la película de Lego está bien. Esto va a devolver una cadena, ya que esto es lo que necesitamos para nuestra Consulta justo arriba. Si ahora estás un poco confundido, esto es perfectamente normal. Yo también lo estaba, al aprender todo esto por primera vez, ya que es un poco diferente a lo que hemos usado antes. Mucho de lo que hacemos para el resto del curso seguirá exactamente este mismo patrón, por lo que conseguirás mucha práctica. Ahora podemos poner en marcha el servidor en la terminal y comprobar si esto funciona. Abajo hasta la parte inferior, dentro de la terminal, puede escribir en nodo, y luego fuente, o /index.js. Recuerda, este es el punto de entrada que fijamos antes. Golpea “Enter”. Ahora vemos que el mensaje del servidor se está ejecutando en localhost 4000, que es el mensaje que recibimos de nuestro registro de consola. Abramos Chrome, teclea localhost 4000. Esto nos abrirá el patio de recreo Graph QL. Recuerde, GraphQL es un servidor o back-end para nuestros sitios web y aplicaciones. Este patio de recreo GraphQL nos permitirá interactuar con nuestros datos de servicio a la hora de desarrollar. Vamos a darle a esto un ir a la izquierda. Dado que se trata de una Consulta que configuramos, podemos escribir en Query seguido de las llaves. Sólo tenemos una Consulta hasta el momento, que es películas. Por lo que ahora podemos incluir esto. Se puede ver que el patio de recreo tiene un realmente bueno también se completa, y se tratará de sugerir los nombres de nuestras Consultas y los campos a medida que avanzamos. Ahora si seguimos adelante y presionamos el botón de reproducción en el medio del lado derecho, podemos ver que los datos de la película han sido devueltos. Tenemos el nombre de Query de la película que ponemos, y también la cadena de texto, que dijimos en el resolver. Ahora voy a agregar otra Consulta para conseguir algo más de práctica. Esta Consulta será un usuario que devolverá un tipo de cadena una vez más, y el resolviendo devolverá cualquier nombre de usuario que elijas. Por lo que comenzando con los TypeDefs de arriba, se inicia la película. Podemos agregar en nuestro colon de usuario. Esto va a devolver una cadena, de nuevo, usando el signo de exclamación, lo que significa que no queremos que se devuelva un valor de null del servidor. Después de esto, configuramos nuestro solucionador a continuación. Justo después de la película, podemos agregar una coma, configurar nuestro método de usuario, y luego devolver un valor de cadena. Yo iba a añadir mi nombre aquí dentro, nos da una caja fuerte a Chrome. Ahora si recargamos, y en lugar de película necesitamos usuario. Se puede ver si escribimos en EU, que el auto completo no está funcionando. Esto se debe a que cuando realizamos algún cambio en este momento, necesitamos reiniciar nuestro servidor. Por lo que de vuelta en su terminal, abajo en la parte inferior, el control y C cerrará el servidor. Entonces de nuevo podemos ejecutar nodo, fuente, o /index.js. Esto volverá a reiniciar nuestro servidor. Recarga los patios infantiles. Ahora podemos ver el tipo de usuario también está completo en una obra de teatro y obtenemos el nombre de usuario devuelto. Esta es una primera mirada básica al uso de Consultas en GraphQL. A continuación, veremos usar algunos tipos diferentes sobre la nueva cadena, y también cómo podemos pasar argumentos a nuestras Consultas. 7. Tipos escalar y pasar en los Argumentos: En este video, vamos a estar haciendo dos cosas principales. Número uno, descubrimos cómo analizar argumentos en nuestras consultas. Esto nos permitirá hacer mucho más, incluido el acceso a los datos de muestra que creamos anteriormente. Número dos, hasta el momento sólo hemos mirado el tipo de cadena. Quiero mostrarte qué otros tipos también están disponibles. Por defecto, GraphQL tiene cinco tipos escalares, los cuales están disponibles para describir nuestros datos. ¿ Cuáles son estos en el comentario en la parte superior? El primero, que ya miramos es string. También tenemos un entero, un flotador, un booleano, y finalmente un ID. Estos tipos son tipos bastante estándar en muchos lenguajes de programación, y nada específico de GraphQL. Un entero es un número sin un punto decimal. Un número flotante o un número de punto flotante es un número que tiene un lugar decimal. Una cadena, que ya hemos mirado, es una cadena o una secuencia de caracteres, como una letra, una palabra, o una frase de textos. Un booleano es un simple valor verdadero o falso. Por último, un ID, que es un identificador único, a menudo utilizado como clave única para cada elemento de nuestra base de datos. Haremos uso de algunas de estas en tan solo un momento. Otra cosa que estaremos usando a menudo es pasar argumentos a nuestras consultas. Los argumentos funcionan de la misma manera que pasar argumentos a una función regular. Proporcionan alguna información adicional que podemos utilizar. Agregamos argumentos entre paréntesis justo después del nombre de la consulta, así. Nuestra película es nuestro nombre de consulta. Ahora podemos pasar un título para esta película. Nuevamente, esto también tiene un tipo, que puedes establecer para que sea una cadena. Esto también tiene el signo de exclamación, lo que significa que se requiere la cadena y se devuelve el recuento del valor de null. Esto significa que cuando llamamos a la consulta de película desde los parques infantiles GraphQL, también podremos pasar en el título nulo dos. Bueno lo que pasa tenemos este título cuando pasamos. Pues bien, este es el trabajo del resolviendo atenderlo de cualquier manera que queramos. Para comenzar en los resolvers con nuestra película, incluimos cuatro parámetros en nuestro método de resolución. Estos son padres, args, contexto, y también info. Entraremos en estos con más detalle a lo largo del curso pero por ahora, estaremos usando args, que es abreviatura de argumentos. Es así como podemos acceder a estos argumentos, como el título de la película, que usted pasa. En lugar de devolver una cadena llana, voy a usar los backticks para devolver un literal de plantilla, que es simplemente JavaScript simple, y digamos, mi película favorita es, seguida de un espacio, y luego necesito símbolo de dólar para inyectar nuestros datos dinámicos. El dato que queremos inyectar en la cadena vive en la propiedad args. A esto se le llama título, que coincide con el título que pasó como argumento. Si antes no has usado literales de plantilla, implica usar los backticks en lugar de las cotizaciones. Entonces podemos mezclar en texto plano con una variable usando estas llaves. Pasado al patio de recreo GraphQL, ahora podemos probar esto. Tengo el patio abierto en Chrome. Es posible que deba reiniciar el servidor. Ciérralo con Control C. Luego ejecuta de nuevo nuestro servidor con nodo, fuente, index.js. Cuando esto se está ejecutando y podemos refrescar los parques infantiles GraphQL, y podemos probar esto. Tenemos al usuario todavía en desde antes. Ahora tenemos que cambiar esto para que sea una película. Ahora podemos pasar nuestros argumentos dentro de los corchetes. Abrir y cerrar los corchetes. Entonces podemos pasar en nuestro título, que de nuevo es una cuerda. Podemos añadir cualquier nombre de película dentro de aquí. Queremos agregar un nombre de película ahí. Después pulsa el botón “Play”. Ahora veremos nuestra cadena completada de mi película favorita es Wreck-It Ralph. Pero, ¿y si el usuario no ingresó un título? Quitemos nuestra cuerda y luego golpeemos “Play” una vez más. Ahora sólo vemos el texto ingresado de mi película favorita es. Bueno, esto ahora se ve un poco tonto, pero el resolver está disponible para manejarlo de cualquier manera que queramos usando JavaScript. Podemos agregar una declaración JavaScript if dentro de nuestro resolver para comprobar primero si se ha pasado un título. Dentro de nuestra película, podríamos decir si args.title. Si estos datos existen, entonces podemos cortar nuestra declaración de retorno, pegar esto dentro de la sentencia if. Esto se correrá si tenemos un título pasado. De no ser así, podemos decir volver 'Por favor, entra tu película favorita... ' Ahora guarde esto. Control C para reiniciar el servidor. Pasado al patio de recreo, recarga y ahora toca “Play”. Ahora vemos el texto de copia de seguridad de “Por favor, entra tu película favorita”. También podemos agregar múltiples argumentos a la consulta, que es un enfoque útil a la hora de consultar datos, como un usuario dentro de nuestro typedesk. Si bajamos a nuestro usuario justo aquí, abre y cierra los corchetes justo después. Podemos pasar un ID de usuario y esta es nuestra primera oportunidad de mirar un tipo de ID de escala diferente. Nuevamente, podemos usar el signo de exclamación porque se trata de un campo obligatorio el cual va a devolver un valor. Podemos añadir, separados por una coma, un segundo argumento de nombre. Esto va a ser una cuerda. Podemos agregar un correo electrónico. Esto también será una cuerda. Entonces hacia abajo en nuestro método de resolución, podemos pasar los mismos cuatro parámetros a nuestra función. Se trata de parent, args, CTX, que es abreviatura de contexto, y nuestra info. Nuevamente, no necesitamos que los cuatro argumentos sean el momento. Bueno el boceto está en el hábito de escribirlos para que se familiaricen más. Dado que estamos pasando un ID de usuario, nombre y correo electrónico, tendría sentido crear un objeto de usuario una manera similar a los usuarios en nuestros datos de muestra. ¿ Lo verías justo en la parte superior aquí? Entonces esta es la misma estructura que vamos a crear dentro del resolver. En primer lugar, vamos a crear el objeto de usuario basado en los args. Podemos hacerlo configurando una constante con un nombre del usuario y configurando este para que sea nuestro objeto. Podemos establecer el ID igual que en los datos de muestra luego el nombre y el correo electrónico. El DNI va a ser de Args.id. El nombre va a ser args.name. Por último el correo electrónico va a ser args.email. Este ID, nombre, y correo electrónico también está coincidiendo con los args que están pasando un poco justo aquí. Volver abajo, ahora en lugar de devolver nuestra cadena, vamos a devolver este objeto de usuario. Nos da un guardado, Control C para cerrar servidor y luego reiniciar nuestro servidor. Volver a los patios infantiles. Podemos recargar esto para obtener nuestra información. Cambia esto para ser usuario. Dentro de nuestro usuario agregamos un ID. Podemos agregar en cualquier ID que queramos aquí, solo voy a ir por “123456". El nombre, el correo electrónico. Tan solo inventa cualquier correo electrónico dentro de aquí. Ahora podemos darle a “Play”. Cuando tocamos “Play” ahora en el patio de recreo vemos un error en lugar de los datos que esperamos recuperar. El mensaje de error es, “Cadena no puede representar un valor” seguido de nuestros objetos. Es posible que ya hayas notado cuál es el problema aquí. Si no, podemos echar un vistazo si volvemos a nuestra consulta. Estará en nuestra consulta para el usuario, que es esta línea aquí. Justo al final, estamos regresando una cuerda. Pero nuestro usuario está estructurado como un objeto dentro de nuestro solucionador. En los tipos escalares miramos antes. Mira la parte superior, podemos ver que el objeto no es uno de los tipos escalares proporcionados por GraphQL. Esto está bien aunque ya que GraphQL nos permite crear un tipo personalizado llamado tipo de objeto. Esto es exactamente lo que estaremos cubriendo a continuación. 8. Tipos de objetos personalizados: Miramos el problema en el último video, que con bastante frecuencia los datos que queremos de vuelta no son tan simples como una cadena. Aquí es donde entran en juego los tipos de objetos. Conforme suenan un tipo de objeto se estructura como un objeto y podemos declarar exactamente qué campos obtenemos del servidor dentro de nuestras tareas de tipo, que tenemos aquí. Fuera de este tipo de consulta raíz, podemos configurar un nuevo tipo de objeto de cliente de usuario. Agrega el usuario tipo y luego abre y cierra las llaves, asegurándote de que esto aún esté dentro de los bacticos. Este tipo de usuario puede contener cualquier estructura que queramos. En nuestro caso, queríamos replicar la estructura de usuarios que utilizabas antes agregando los campos ID, nombre y correo electrónico. En primer lugar, utilizamos el ID, que es un tipo de identificación. Pasamos en un nombre, que va a ser una cuerda. Entonces vamos a pasar en el correo electrónico, que de nuevo es un tipo de cadena. Ahora en nuestra consulta justo arriba, lugar de devolver una cadena para el usuario, ahora podemos devolver nuestros objetos de usuario. Nuevamente, podemos agregar el signo de exclamación diciendo que no queremos devolver ningún valor nulo. Dale a esto un Guardar, baja el servidor y luego reinicia. Si no tenemos errores. Ahora podemos volver a los patios de juego de graphql. Si aún tiene abierta la consulta de usuario, podemos refrescar y luego presionar play usando la misma consulta. Esta vez no obtenemos el error que teníamos antes. En su lugar, el mensaje de error es tipo usuario debe tener una selección de subcampos. Esto sólo significa que necesitamos decirle al servidor qué campos queremos recuperar de su consulta. Justo después de que consultemos al usuario, también podemos agregar algunas llaves. Abrir y cerrar estos nunca podrán declarar cuál de nuestros tres campos queremos volver. Voy a agregar al ID, voy a agregar el nombre del usuario y también el correo electrónico también. Después podemos volver a enviar esta consulta desactivando pulsando play o command o control enter. Esto ahora devolverá nuestros datos de usuario como un objeto con el ID, nombre, y correo electrónico, que especificamos dentro de aquí. Podemos devolver cualquier cantidad de estos campos. No tenemos que regresar todo gratis. Este es uno de los beneficios de usar graphql. Podemos recuperar sólo los datos exactos que queramos. Tenemos API tradicionales, podríamos recuperar todos los datos aunque no sea necesario. Ahora voy a hacer un tipo más objetivo para nuestra película. Te animaría a dar a esto un ir primero antes de seguir, primero crearemos un tipo de objeto llamado película igual que lo hicimos para el usuario que acaba de escuchar. Con los campos dentro de ID y tittle. A continuación, modifique nuestra consulta justo arriba para devolver este nuevo tipo en lugar de una cadena. Empecemos sólo en el usuario. Esta va a ser un tipo de película. Como se mencionó antes esto va a tener el ID como el campo, con el ID como el valor que devuelves y luego también un campo de título, que devolverá una cadena. Entonces el resolver de movimiento justo arriba, en lugar de devolver una cadena, queremos devolver el objeto que acabamos de crear, que se está moviendo. Añada también en nuestros segundos argumentos de ID, que va a devolver el tipo de ID y separarlos con una coma. Bajando al solucionador de películas, también podemos crear un objeto con este ID y título. Quitemos la declaración de antes. Entonces podemos crear nuestras constantes llamadas servicio de cine. Este opta por ser nuestro objeto, que tiene el DNI. Voy a agarrar el ID de args dot ID separado por coma, el título. Pero también muele a partir de args, así que titulo y luego podemos reemplazar nuestra cadena de retorno por el objeto de película que acabamos de crear. De acuerdo, así que ahora vuelve a la terminal, controla c para cerrar y luego reinicia. El patio de juegos, podemos recargar esto y podemos probar esto ahora dentro de los patios infantiles. Voy a abrir una nueva pestaña. Vamos a consultar para nuestra película. Dentro de la película, podemos pasar el DNI. Cualquier identificación está bien. Voy a sumar uno, dos, tres. Entonces a continuación podemos pasarlo en el segundo argumento, que es el título de la película. Voy a añadir la Vida Secreta de Mascotas. Al igual que antes si seguimos adelante y jugamos esto, ahora diremos cuando necesitemos una selección de sub-campos de nuestra película, los sub-campos tendrán la opción de título ID así que al uno de fuera, ambos de aquí adentro, luego hit jugar y ahora regresaremos con los datos de la película, con la identificación y también el título. uso de estos tipos de objetos personalizados nos permite tener mucha flexibilidad sobre cómo queremos que nuestros datos se vean y se comporten. Haré mucho más uso de estos tipos personalizados a medida que vamos por el resto del curso. 9. Trabajar con el contexto y los arreglos: Anteriormente en el curso, agregamos algunos datos de muestra para trabajar. Esta actuará como nuestra base de datos temporal hasta que sumemos una real en una sección posterior. Encima en nuestro proyecto, en nuestro archivo index.js, incluimos nuestros datos de muestra arriba en la parte superior, en esta línea de entrenadores aquí. Empezamos en los Usuarios, las Películas y las Reseñas en sus propias variables, y luego hacia abajo en la parte inferior del archivo, vamos a crear un resolviendo, creamos un Objeto Contexto, que está justo aquí. Después pasamos nuestras tres variables por dentro, y así podemos utilizar nuestros datos de muestra en los proyectos. Cualquier cosa que pasemos al contexto estará disponible para todos los resolutores. Para empezar, voy a configurar una nueva consulta para obtener todas las películas de nuestros datos de muestra. Por lo que arriba en nuestros TypeDefs, y en la sección Query, queremos configurar una consulta de películas. La consulta de esta película no necesita tomar ningún argumento. Por lo que sólo podemos devolver un tipo de película. Recuerda que el tipo de película es un objeto personalizado que creamos anteriormente. No obstante, este enfoque sólo es parcialmente correcto. Sí, queremos que se devuelva un tipo de película, pero queremos una matriz de películas no sólo una. En GraphQL, podemos envolver nuestro tipo de película entre corchetes para declarar que queremos que esta sea una matriz de películas. Esta matriz también puede ser no anulable también. Por lo que agregar un signo de exclamación justo después significa que siempre podemos esperar una matriz de vuelta. Tenemos cero o más artículos y no un valor nulo. También se puede usar un signo de exclamación tras película igual que tenemos aquí. Significado que siempre esperamos recuperar un objeto de película y no un valor de nulo. Al igual que con todas las consultas se requiere un resolver con el mismo nombre, esa es la función. Entonces desplácese hacia abajo. Después de nuestra película, también podemos crear películas. Esto también toma en los mismos cuatro parámetros. Tenemos parent, args, context, e info, y luego agregamos una coma derecha al final para separar esto de nuestro usuario. El propósito de este resolver es buscar las películas de nuestros datos de muestra los cuales fueron agregados al contexto de abajo justo aquí. Podemos acceder al contexto en nuestros resolvers mediante el uso de este parámetro de contexto de ctx. Por lo que dentro de aquí, podemos devolver ctx seguido del nombre del contexto, que es películas. De vuelta a la terminal, podemos reiniciar nuestro servidor. Una vez que esto se esté ejecutando, podemos ir al patio de recreo GraphQL, reiniciar, y luego podemos crear nuestra consulta. Entonces Consulta, y queremos consultar por las películas. Esto no toma en ningún argumento, pero como es un tipo de objeto, queremos devolver algunos campos. Voy a devolver el DNI y el título de la película, luego mandar estos datos. El retorno del título son las películas gratuitas de la matriz de películas en nuestros datos de muestra. De vuelta a las consultas, también podemos eliminar nuestra consulta de usuario, que es esta línea justo aquí ya que esto ya no es necesaria para el proyecto. En su lugar, vamos a buscar a los usuarios, esto va a devolver una matriz del tipo de usuario, y luego hacia abajo podemos crear el resolvente coincidente, que va a ser responsable de sacar a todos los usuarios de nuestros datos de muestra. Por lo que podemos modificar usuario, y cambia para ser usuarios en lugar de devolver los objetos de usuario, vamos a devolver nuestra matriz de usuarios desde el contexto. Entonces usuarios, y es retorno de ctx.users. Una vez más podemos reiniciar el servidor, pasar al patio de recreo, y de hecho, se abre una nueva consulta de usuarios. Nuevamente no se pasan argumentos, solo necesitamos devolver el ID, y de hecho puede que tengamos que recargar esto, por lo que el ID. También tenemos el nombre y el usuario también tiene un correo electrónico. Después tenemos a todos los usuarios de nuestros datos de muestra. El dato final que necesitamos obtener del contexto son las revisiones. De nuevo, te animaría a probar esto por tu cuenta si te sientes seguro al hacerlo, solo recuerda que aún no hemos configurado un Tipo de Objeto Personalizado para la revisión, por lo que también necesitamos hacer esto para que esta consulta funcione. Entonces esto es lo que voy a seguir adelante y hacer ahora. Podemos empezar en los TypeDef, justo después de los usuarios y las películas. Podemos crear un nuevo tipo, que es revisión. Esta revisión va a tener una identificación, una película corresponsal, el texto de revisión, y también la calificación, que espeja nuestros datos de muestra. Por lo que nuestro objeto se vería muy parecido a esto. Todavía no estaremos agregando el campo Usuario. Agregaremos esto en una fecha posterior, cuando creemos una relación entre las reseñas y el usuario. Por lo que volver a nuestro tipo de revisión. El ID es el tipo de ID, la película. Por ahora vamos a añadir esto como una cadena. Ya que esto se guarda como una cadena en las revisiones. A continuación tenemos el texto de revisión. Este es un tipo de cadena también, y luego finalmente la calificación, que es un tipo de entero, y luego configuramos la Consulta de revisión. Por lo tanto, desplácese hasta nuestra sección de consultas aquí. Podemos agregar en la Consulta de Reseñas. Al igual que antes esto va a tomar en una matriz del tipo de revisión. Ahora podemos crear el resolviendo coincidente justo después de los usuarios. A éste se le llama revisiones, que tomarán los mismos cuatro parámetros de parent, args, el contexto, y la info. Dentro de aquí, todo lo que necesitamos hacer es devolver el context.reviews para obtener nuestros datos de muestra. Está bien, bien. Ya podemos reiniciar el servidor, dirígete al patio de recreo GraphQL. Podemos eliminar la Consulta de Usuario y en su lugar podemos agregar nuestro Tipo de Consulta para las revisiones. Esto no es tomar ningún argumento como los dos últimos, todo lo que tenemos que hacer es devolver los datos que queremos. Entonces voy a añadir la identificación, la película, el texto de la crítica, y también la calificación. Envía esto apagado. Ahora obtenemos un conjunto de revisiones a partir de nuestros datos de muestra. Ahora hemos configurado nuestro trabajo en operaciones para conseguir películas y críticas a nuestros usuarios. Posteriormente en el curso, sustituiremos estos datos de muestra por una base de datos real. A pesar de que esto puede parecer complejo al principio para cada ahora hemos visto que la mayoría de ella sigue un patrón similar. A continuación, vamos a hacer un pequeño cambio a nuestro proyecto, que automáticamente reinicia nuestro servidor cada vez que hacemos un cambio. 10. Restar, automáticamente el servidor: Esto sólo va a ser un video rápido para instalar un paquete npm llamado nodemon. Por el momento, cada vez que hacemos un cambio en nuestros archivos, necesitamos cerrar y reiniciar nuestro servidor. Nodemon nos ahorrará haciendo esto reiniciando automáticamente las fotos del servidor cuando guardemos un archivo. Nodemon está disponible para más información en nodemon.io, pero voy a seguir adelante e instalar esto de nuevo en la terminal. Cerremos nuestro servidor. Entonces podemos agregar una instalación npm, —save-dev y luego el nombre del paquete de nodemon. Golpea “Enter”. Esto jalará en el paquete a partir de npm. El save-dev salvará esto dentro de nuestro paquete.json como una dependencia de dev, lo que significa que esto salvará esto como una dependencia solo durante el desarrollo. Bien. Una vez que esto esté instalado, podemos entonces echar un vistazo a esto en el cyber y el paquete.json y chequear. Esto se guarda como una dependencia única de desarrollo. En el mismo archivo, desplazándose hacia arriba, tenemos una sección de guión justo aquí. Podemos agregar un nuevo guiones de inicio para ahora aprovechar nodemon. Podemos añadir “Inicio” dentro de las cotizaciones seguido de dos puntos. Npm start ejecutará el comando que tecleamos a continuación. Entonces, entre las cotizaciones, voy a agregar nodemon y luego la ruta del archivo a nuestro servidor, que es src/index.js. Agrega una coma justo después de esto para separar esto de nuestro script de prueba y luego podemos darle a este archivo una caja fuerte. Este es similar al comando que ejecutamos antes en la terminal para iniciar el servidor. Pero ahora, reemplazamos nodo por nodemon. Ahora, podemos probar esto. Abajo en la terminal, podemos correr npm, arrancar y golpear “Enter”. Esto luego ejecuta el script que especificamos cuál es nodemon src/index.js. Nuevamente, vemos que el servidor se está ejecutando en el puerto localhost 4,000. Ahora bien, si entramos en alguno de nuestros archivos en nuestro proyecto y le damos la palabra “Guardar”, vigile la terminal en la parte inferior. Ahora vemos que el servidor se reinicia, lo que significa que no necesitamos cerrar manualmente el servidor y reiniciarlo después de cada cambio. Esto es todo lo que necesitamos hacer para que esto funcione. A continuación, refactoraremos nuestro código para mantener las cosas más organizadas. 11. Refactoring de nuestro código: Incluso en esta etapa temprana de nuestro proyecto, podemos ver que al tener todo en el archivo index.js esa cosa vuelve a estar un poco abarrotada. No me voy a tomar unos momentos para quitar nuestros TypeDefs de esquema, y también los resolvers a cabo este archivo y organizarlos en archivos separados. A partir de nuestros TypeDefs, donde chrony usamos los ticks traseros para crear todas nuestras definiciones de tipo dentro. También podemos sacarlos de aquí y colocarlos en un archivo GraphQL separado. Voy a crear este archivo dentro de la carpeta fuente y llamar a esto el Schema.GraphQL. Entonces podemos volver a nuestro índice y cortar de aquí todas nuestras definiciones de tipo. Cortar todo excepto las garrapatas traseras. Desde el tipo de revisión, todo el camino hasta nuestra consulta, recorte esto. Después pegarlo en nuestro esquema.graphql. De vuelta en el index.js, podemos eliminar la cadena TypeDefs, que tenemos aquí y también nuestro comentario desde arriba. Desplazándonos hasta nuestro servidor, ahora necesitamos modificar nuestras definiciones de tipo para reflejar esto. Podemos apuntar ahora los TypeDefs a la ubicación de nuestro nuevo archivo. El TypeDefs ahora va a ser igual a una cadena. Esto va a ser barra de puntos. Utilizamos la carpeta fuente y el archivo era schema.graphql. Guarda el archivo y en esta etapa quizá ahora deberías salir del patio de recreo y revisar las cosas que siguen funcionando. Nuestro servidor se ha reiniciado automáticamente usando nodemon, por lo que ahora podemos refrescar los patios de juego. Entonces podemos recargar nuestras consultas y comprobar si recuperamos todos los datos que queremos en lugar de cualquier error. Todo esto parece estar funcionando bien. El siguiente paso es mover los resolvers a un nuevo archivo 2. Nuevamente, en el directorio fuente, voy a crear un nuevo archivo llamado resolvers con la extensión dot js. Pasado al index.js, podemos agarrar todo nuestro objeto resolvers. Agarremos todo incluido el nombre const. Corte desde el corsé rizado de cierre todo el camino hacia arriba. Saca estos de nuestro archivo índice, pegarlos en el archivo resolvers. Después abajo en la parte inferior del archivo, necesitamos exportar este objeto resolvers, para que esto funcione. Expusimos nuestro archivo con module.export y pusimos esto igual a nuestro nombre de resolvers, que es el nombre de nuestro objeto arriba en la parte superior justo aquí. Ahora hemos exportado este archivo, ahora podemos usar esto de nuevo en nuestra copia de seguridad index.js en nuestro archivo índice. A diferencia de nuestras definiciones de tipo, donde podemos pasar un archivo directamente, igual que tenemos aquí. Tenemos que requerir este archivo en la parte superior. Crearemos una nueva constante llamada resolvers y estableceremos esto en nuestra ruta de archivo. Por lo que podemos requerir la ruta del archivo como una cadena, que es los resolvers de barra de puntos. Este nombre const de resolvers también coincide con el nombre que hemos pasado al servidor, que está justo aquí. No necesitamos hacer más cambios. Lo último que quiero hacer para refactorizar nuestro código es eliminar la consulta de película. Ya no necesitamos esto para nuestros proyectos. Por lo que podemos pasar a nuestro esquema dentro de nuestro objeto de consulta, elimina la primera línea de película. También en los resolvers, podemos quitar el solucionador coincidente. Encontremos la película, podemos eliminar todo esto de nuestra sección de consultas, digamos este archivo. Esto fue sólo con fines de demostración al principio del curso. Ya no necesitaré esto para nuestro proyecto. Todo lo que queda por hacer es volver a los parques infantiles de GraphQL y probar si las cosas siguen funcionando. Por lo que refresca. Podemos intentar dar click en algunas de estas consultas. Todavía parece que recuperamos los datos requeridos. Con todo esto ahora cuidado y nuestro código está más organizado. Ahora podemos volver a GraphQL, y descubrir cómo podemos configurar relaciones entre tipos. 12. Relaciones entre tipos: A estas alturas deberíamos estar consiguiendo una mejor comprensión sobre cómo GraphQL utiliza tipos. Pero pronto vendremos a encontrarlo a menudo. Necesitamos configurar vínculos o relaciones entre estos tipos. A pesar de que sólo estamos en las primeras etapas de nuestro proyecto, ya tenemos la necesidad de configurar relaciones. El slide son los tipos de objetos personalizados gratuitos que tenemos en nuestros proyectos en este momento todos son independientes el uno del otro pero así no es como debería ser. Contamos con usuarios los cuales serán responsables de publicar reseñas, por lo que necesitamos configurar una relación entre el usuario y el tipo de revisión y podemos hacerlo agregando un campo de revisión al usuario. Como vemos aquí, esta será una variedad de reseñas ya que un usuario podría publicar tantas críticas como quisiera. Debajo de esto, también tenemos el tipo de película y esto también necesitará las mismas críticas relación con. Ya que la revisión en una película es todo un punto de este proyecto, podemos agregar en los campos de críticas, y esto también es una matriz ya que podemos tener múltiples críticas para la misma película. Para el tipo de revisión, esto también necesitará una relación tanto con el usuario que lo creó como también con la película en la que se basa. Tendremos que hacer dos cosas para este tipo de revisión. En primer lugar, necesitamos cambiar el campo de la película de un valor de cadena a una película, una sola película, no una matriz y finalmente, configurar un campo de usuario, así sabremos qué usuario creó esta revisión. Ahora tenemos una idea clara de cómo podemos configurar nuestras relaciones. Pasemos ahora a implementar los cambios en el siguiente video. 13. Crear nuestras relaciones parte 1: Ahora vamos a trabajar creando las relaciones para nuestro tipo de revisión. Como ya miramos, esto involucra dos campos. Cuando cambió el campo de la película para devolver una película en lugar de una cadena y un nuevo campo para el usuario que la creó. Volvamos al esquema.graphql en nuestro proyecto. En nuestro archivo de esquema, podemos hacer este campo a la vez. Desplázate hacia abajo hasta el tipo de revisión y primero necesitamos cambiar el campo de película, devolver una película en lugar de una cadena. Esto nos permitirá cuando consultes y reseñas y también tirando de todos los datos de película para los que es y ahora hay un paso más que necesitamos dar en este momento, cada vez que los archivos de resolución para este tipo de revisión, puede resolver todo esto campos con valores escalares sin ningún problema. Ya que sólo estamos devolviendo una cadena, un entero, o un id por ejemplo sin embargo, al consultar para esta revisión y encontramos un tipo de película, que es un tipo de objeto personalizado. También necesitamos configurar un solucionador separado, que GraphQL pueda recorrer todas las películas que coincidan y encontrar la correcta para regresar. Si no creamos este solucionador GraphQL no tiene forma de saber exactamente qué película queremos encontrar. Guarda este archivo y luego podemos ir al patio de recreo GraphQL y podemos tratar de agregar en nuestros datos de película para ser incluidos. Si actualizamos la consulta de críticas, hit play, vemos el tipo de película. Ahora esto ya no es una cadena, debe tener una selección de subcampos. Podemos añadir esto fácilmente con las llaves y añadir en el id de la película y el título también. ¿ Cómo obtengo un mensaje de error diciendo: “No podemos devolver nulo por un campo no apto para nulos” que está relacionado con la película. Esto se debe a que aún no hemos creado este solucionador mencionado antes para obtener los datos correctos de la película en el resoluvers.jsfile, podemos crear esto ahora. Necesitamos crear esto como una nueva propiedad, que se llama revisión para que coincida con nuestro tipo de revisión. Abajo justo después de la consulta, agrega una coma y luego agrega el tipo de revisión de ruta y luego se liquida por método, igual que lo hemos hecho anteriormente pero el nombre del método debe coincidir con el campo de este tipo de revisión. En nuestro caso, esta es película. Esto también toma lo mismo para parámetros de padres, args, contexto e info. La responsabilidad de este solucionador es recorrer todas las películas en nuestros datos de muestra y encontrar la que tiene el id de nuestra revisión. Podemos hacer esto usando el método JavaScript find. Podemos agregar un valor de retorno, así que contexto, vamos a recorrer todas las películas. ¿ Dónde encontró el método JavaScript? Cada película encuentra dentro de este bucle se almacenará en el nombre variable de la película. Este método find, que es simplemente JavaScript regular ejecutará esta función para cada elemento de la matriz. Cada elemento de la matriz de películas se instala dentro de esta variable de película, que aquí sugerimos. Volverá a través si el id de la película de nuestros datos de muestra. Devolver la película.id coincide con el id de película de la revisión. Pero, ¿cómo accedemos al id de la película desde la crítica? Accedemos a esto usando un parámetro que aún no hemos utilizado, que es este padres justo aquí, seguido del nombre de campo de la película. Podemos comprobar si esto es igual a parent.movie. En este caso, las películas son un niño del tipo de críticas. El padre se refiere al solucionador un nivel arriba. Para entender cómo funciona mejor esto, echemos un vistazo a lo que está sucediendo en nuestro esquema. En cuanto a nuestro tipo de revisión, esto como sabemos tiene mucho en resolver. Si resolver puede resolver los valores de id, revise el texto y también califique inmediatamente porque se trata de todos los tipos escalares. No obstante, con este tipo de película aquí, no sabrá inmediatamente qué película devolver por lo que luego ejecutamos este solucionador separado, que acabamos de crear llamado película. Este solucionador de películas está anidado dentro de la revisión y es por ello que tenemos que usar a los padres para obtener datos del tipo de revisión. Esto puede parecer un poco confuso al principio, pero veremos algunos ejemplos más de esto, lo que debería ayudar. Ahora si guardamos este archivo por delante en el patio de recreo GraphQL, podemos volver a ejecutar la consulta de revisiones, refrescar los patios infantiles, golpear “Play”. Ahora encontramos los datos de película correspondientes para cada revisión la cual ha sido vinculada por los identificadores. Hagámoslo de nuevo, pero esta vez agregando un usuario a revisar. Encima en el schema.graphql, primero agregamos un campo de usuario al tipo de revisión. Abajo en la parte inferior, un nuevo campo de usuario, que va a devolver un tipo de objeto personalizado de usuario sobre en los datos de muestra. Si vamos a las reseñas, puedes ver ya tenemos un tipo de usuario encendido aquí, cual está vinculado a un id del usuario por lo que 1002, 1001 y esto todo utiliza los identificadores desde arriba. Ahora necesitamos crear el solucionador para este campo de usuario y el trabajo de este solucionador es igualar estos identificadores. Este solucionador seguirá un patrón similar al último sobre en el archivo resolvers. Este campo de usuario también se puede agregar al mismo tipo de revisión para que podamos agregar esto justo después de la película, agregar una coma, el nombre de campo del usuario, que también toma en los padres, los args, el contexto y también la info. Dentro de aquí queremos agregar un valor de retorno, que vas a buscar el contexto y la matriz de usuarios. Esto también va a utilizar el método de búsqueda de JavaScript para recorrer cada elemento de la matriz y almacenar en un valor llamado usuario. Para cada usuario que se devuelve de la matriz, vamos a volver a través si el id de usuario es igual a parents.user. ID de usuario será el campo a partir de nuestros datos de muestra, crudo particularmente usuario. El parents.user será el id abajo en nuestras reseñas de este campo de usuario justo aquí. De vuelta en el patio de recreo para guardar este archivo, cabeza y recarga las reseñas también podemos agregar a nuestro usuario a la selección. El usuario, esto también es un objeto por lo que podemos agregar en algunos campos. Vamos por el nombre y luego pegamos “Enter”. Ahora por cada revisión dentro de nuestros datos de muestra, hemos buscado la película y sacado el id y el título. También he encontrado la coincidencia en usuario a partir de nuestros datos de muestra por el id. Estas son todas las relaciones que ahora necesitamos para el tipo de revisión. Seguiremos obteniendo poca práctica con las relaciones en el siguiente video, donde vincularemos tanto al usuario como al tipo de película a las críticas. 14. Crear nuestras relaciones parte 2: Diapositiva factorial de antes. Todavía tenemos las dos relaciones En la configuración del lado izquierdo. Necesitamos vincular al usuario a una revisión, esto nos permitirá consultar para usuarios y también ver las reseñas que han hecho. También abajo abajo, el mismo campo de críticas para la película Tipo 2. Esto nos permitirá consultar por películas y luego ver las críticas de cada una. Ambas relaciones siguen a la misma persona del último video, agregamos un nuevo campo llamado revisiones y luego creamos un resolviendo para buscar los datos entre él. Nuevamente, agregamos estos nuevos campos sobre en nuestro esquema. Empecemos con el tipo de usuario. Justo en la parte inferior, voy a crear un nuevo campo de revisiones y este va a ser un array del tipo de revisión. Dado que el usuario puede colocar múltiples revisiones, esto necesita ser una matriz. A continuación, necesitamos configurar un resolver correspondiente para que coincida con el ID de usuario. ¿ Qué vamos a hacer si echamos un vistazo a los datos de la muestra? Si bajamos a las revisiones dentro del resolviendo, vamos a recorrer todas las revisiones usando JavaScript, luego encontrar el ID de usuario para cada una. Esto se va a acceder con reseñas o usuario, entonces vamos a comprobar si esto es igual a los padres que es nuestro usuario.id Una vez que tengas un mucho, esto volverá verdadero y luego te proporciona la información que necesitamos. Ahora, podemos guardar nuestro esquema y luego ir a los resolvers, y crear este resolviendo para el tipo de usuario llamado reviews. Hemos terminado con los resolvers para el tipo de revisión, vamos al final de esto y luego creamos una nueva propiedad llamada usuario. Este será un objeto. Ya que como saben desde antes podemos agregar múltiples resolvers por dentro aquí. Solo necesitamos opiniones por el momento, agreguemos el nombre del método de las revisiones. Toma en los padres, los args, el contexto, y la info. Entonces similar a lo anterior, vamos a usar un método y en lugar de usar el método find, vamos a usar el método filter, ya que podemos devolver múltiples valores o múltiples revisiones. Devolvamos el context.reviews.filter. Nuevamente, esto es simplemente JavaScript simple, vamos a filtrar a través de todas las revisiones y luego configurar nuestra función. Cada ítem de las revisiones va a ser almacenado en esta variable de revisión. ¿ Qué queremos hacer aquí? Bueno, al igual que miramos en los datos de la muestra, queremos que coincida con la review.user. Si te desplazas por este campo justo aquí, ahora queremos que coincida con un ID de usuario. Podemos agarrar al usuario comprobando si esto es igual a los parents.id Genial. Ahora, dale una salva a esto y luego dirígete al patio de recreo. Podemos ir a consulta de nuestros usuarios, refrescar, cuando todo esto esté funcionando porque aún no hemos agregado el nuevo campo. Con solo tener el email, también podemos agregar en reseñas, dentro de las reseñas también necesitamos agregar en los campos que quiere volver. Añadamos el texto de revisión y la tasa en y esto todo funciona bien. hora de recuperar esta información, probablemente queramos conseguir el título de la película, así que sabed para qué película es esta crítica. Podemos anidar esto dentro de críticas, para poder acceder a película y luego a los campos que queremos recuperar? Simplemente voy a agregar el título y luego anidado por dentro, también obtenemos este título para cada revisión. ¿ Cómo sabes que esta película funcionará cuando esté anidada dentro de críticas? Bueno, esto es porque ya configuraste el resolviendo para esto en el último video. Al devolver una película de crítica es una propiedad en el tipo de revisión. De vuelta en nuestro esquema, podemos ver esto si bajamos a nuestro tipo de revisión, tenemos la película entonces tenemos un resolviendo correspondiente para recuperar película en el resolvers.js, y ahí está este método justo aquí. Ahora, las cosas están empezando a empatar juntas. Ahora me formaré en relaciones entre nuestros tipos. Con esto en su lugar, sólo tenemos una relación final para sumar y es agregar también el mismo campo de críticas al tipo de película. Si te sientes confiado, sigue adelante y dale a esto un go por tu cuenta, te hará pensar en cómo encajan todas las cosas, y también puedes seguir conmigo después. Empecemos con el tipo de película en el esquema. Vamos a añadir los mismos campos de críticas. Justo después del título, esto también va a devolver el tipo de array. Dado que la película puede tener múltiples críticas, por simplicidad en esta etapa en los datos de muestra, acabo de agregar una sola revisión en lugar de una matriz de múltiples críticas pero trataremos con múltiples críticas más adelante al usar PRISMA. Pasado a los resolvers, montamos nuestro tipo de película en la ruta. Guarda este archivo, tenemos nuestras opiniones, tenemos nuestros resolvers de usuarios, y luego a continuación también necesitamos configurar nuestros resolvers de mudanza y este es un objeto y luego agregamos el nombre de la propiedad. Estas son las revisiones, igual que arriba de nosotros en los cuatro parámetros. Esto también va a devolver un filtro vistas generales. Regresa ctx.reviews.filter y configuramos nuestra función. Aquí adentro, vamos a sumar un valor de retorno. Al igual que arriba vamos a devolver la revisión, pero esta vez queremos apuntar al ID. Si pasamos a nuestros datos de muestra y bajamos a las revisiones, vamos a agarrar una revisión por su ID, y luego vamos a comprobar si esto es igual a padres.reviews. Padres señalarán las películas y luego la identificación almacenada en las críticas. Una vez que obtengamos una coincidencia entre estos dos valores, luego devolveremos true cada elemento de nuestra matriz. De vuelta en resolvers, terminemos esto, comprobemos si esto es igual a parent.reviews, dale a esto un ahorro y luego al patio de recreo, tenemos que ir por la consulta para las películas. Vamos a recargar el navegador. Después del título, podemos pasar las reseñas, podemos obtener el texto de la revisión, la calificación, y también podemos comprobar qué usuario ha publicado esta revisión como acceder al tipo de usuario, y obtenemos el nombre de usuario, presionamos Enter y ahora vemos nuestra vista ha sido devuelta para cada película. También contamos con el usuario correspondiente. Nuevamente, ya que configuramos el resolviendo de un usuario para las revisiones, lo hicimos en nuestro esquema. Si vamos a nuestro tipo de revisión, también configuramos este resolver para agarrar al usuario requerido. Genial. Con todos estos ahora funcionando correctamente, estas son todas nuestras relaciones ahora en su lugar. 15. Introducción a las mutaciones: En la última sección, nos centramos principalmente en recuperar datos, que ya estaba ahí mediante el uso de consultas. Esto fue de nuestros datos de muestra. Que pronto será una base de datos real. Ahora vamos a cambiar las cosas y enviar los nuevos datos, vuelta a nuestra base de datos. Estas se denominan mutaciones y pueden enviar cualquier cosa que quieras, como un nuevo usuario, una nueva película, o una nueva crítica. Las mutaciones siguen un patrón similar a las consultas que ya has utilizado. Configuramos las mutaciones que queremos en el esquema, declarando qué tipo de datos queremos recuperar. Entonces estos también tienen mucho en resolver también. Un resolviendo por mutación. Para empezar, podemos agregar una nueva propiedad de mutación de raíz a nuestro esquema actualmente tenemos el tipo, así que vamos a agregar de nuevo la segunda propiedad raíz de la mutación como un objeto, para que podamos agrupar todas nuestras mutaciones juntas. Miramos brevemente esto antes al configurar los devs de tipo. Esta es una de las tres propiedades de raíz. El tercero es la suscripción, que también cubrirá próximamente. Entonces como hicimos con las consultas anteriores, agregamos el nombre de nuestra mutación, seguido del tipo que queremos devolver. Voy a crear una mutación de inscripciones, inscribirme a un usuario, que va a devolver el tipo de usuario, mayúscula U. Esto puede devolver cualquiera de la misma escala de tipos, como la cadena, un booleano, o también nuestros tipos de objetos personalizados, como este usuario. Al firmar del usuario, no sirve de mucho si no podemos pasar ningún dato sobre el usuario, y de nuevo, podemos hacerlo fácilmente pasando argumentos. Sigamos adelante y sumamos los corchetes después de la inscripción. Podemos agregar un nombre de usuario, cual será un tipo de cadena separada por coma, un correo electrónico, también con el tipo de cadena, puede que note que sólo estamos pasando dos argumentos a esta mutación para el usuario. Pero si nos desplazamos hacia abajo hasta el tipo de usuario, este usuario tiene cuatro campos. Bueno, esto se debe a que el ID también será generado por Prisma más adelante en el curso, y no es algo que esperaríamos que el usuario proporcione, ya que necesita ser único. Dado que las revisiones tienen un tipo de objeto personalizado, pueden tener su propio resolutor para buscar los datos requeridos. [ inaudibles] los resoltores para cada mutación. Guarda este archivo y luego sal a los resolvers. mutación también es una propiedad raíz, así que voy a agregar esto después de la consulta. Encuentra la tornapunta de cierre, que está justo por encima de la revisión, puede agregar mutación, guardar como objeto y agregar una coma, separar esto de las revisiones. Se trata de un objeto que toma un método o un resolver para cada mutación. la única mutación que tenemos se le llama signup, y esto también toma los mismos cuatro argumentos que al crear una consulta, por lo que se trata de padres, args , contexto e info, y luego las llaves. El tipo de usuario es un objeto, por lo que necesitamos crear también un objeto de usuario para que coincida con la estructura. Const, usuario, y podemos establecer esto igual a un objeto. El primer campo es el ID, y esto también lo generará Prisma más adelante, pero por ahora necesitamos crear uno para almacenar en nuestros datos de muestra. Si pasamos a nuestros datos de muestra y luego vamos a echar un vistazo al objeto de usuario, cada ID comienza en 1,000, por lo que tenemos 1,001, 1,002, y 1,003, para que podamos igualar este patrón en el objeto de usuario. Nuevamente, no te preocupes demasiado por lo que estamos haciendo aquí, esto es solo para generar una identificación temporal hasta que utilicemos Prisma más adelante. Podemos crear el ID, va a ser una cadena de plantilla, por lo que podemos usar las garrapatas traseras. Queremos que el ID comience con un doble cero, y luego queremos que esto se incremente por uno para cada usuario en nuestra matriz. Podemos entonces hacer dinámico el cuarto dígito pasándolo en usando JavaScript. Vamos a recorrer la matriz de usuarios con ctx.users, y luego agarrar la longitud de la matriz. Actualmente contamos con tres usuarios dentro de nuestros datos de muestra. Voy a aumentar esto por uno con cada usuario que vamos a agregar. Agrega una coma al final ahí y luego podemos seguir adelante y sumar los dos siguientes campos, que son más simples. Podemos agarrar el nombre y el correo electrónico de los args como ya hemos visto al usar consultas. El nombre va a ser args.name. El email, args.email, y luego podemos seguir adelante y empujar a este nuevo usuario a nuestro array de usuarios. Agarra el context.users. Después podemos usar un método de matriz JavaScript para empujar a este usuario a nuestros datos de muestra. Este método push es simplemente JavaScript regular y nada específico de GraphQL. Por último, podemos luego devolver al nuevo usuario en la siguiente línea. Al igual que las consultas, también podemos probar nuestras mutaciones en el patio de recreo GraphQL. Esta vez voy a abrir una nueva pestaña. Este es el tipo de mutación, así que lo configuramos así, y luego podemos sumar nuestro registro dentro. De hecho tendremos que refrescar. Ahora que también está completa, así que suscríbase. El registro va a tomar los argumentos. En primer lugar tenemos el nombre, así que agreguemos un nombre aquí dentro, y también el segundo fue el correo electrónico. Usuario, ambas cadenas. Puedes agregar cualquier dato que quieras dentro de aquí para el usuario. Esto también va a devolver un tipo de usuario. Tenemos que agarrar el ID, el nombre, y también podemos agarrar el correo también, ejecutar esto. Ahora nuestro registro se ha ejecutado con éxito, tenemos el ID, el nombre, y el correo electrónico. Vemos que el ID se ha incrementado por el valor de uno. Si volvemos a golpear “Enter”, se ven 1,005 y de nuevo 1,006, lo que esto aumenta en uno por cada elemento de la matriz. Vamos a volver a ejecutar nuestra consulta de usuarios y comprobar que estos usuarios adicionales se han agregado. Desplázate hacia abajo, tendremos nuestros libres de datos de muestra, y luego tenemos los que acabamos de agregar en justo entonces. Dado que todavía no estamos usando una base de datos permanente, cualquier cambio que realices a los datos de muestra solo se almacenará en la memoria, haciéndolos temporales. Podemos reiniciar el servidor guardando cualquier archivo, por lo que Comando o Control S. Volver al patio de recreo. Vamos a recargar y podemos volver a ejecutar la consulta de los usuarios. Ahora desplazándose hacia abajo, solo vemos los que se almacenan en nuestros datos de muestra y no los que acabamos de agregar de nuestra mutación. En las aplicaciones del mundo real, los argumentos de nombre y correo electrónico se proporcionarían desde el frontend, como el registro o la página de inicio de sesión de un sitio web. Pero como el GraphQL es para el backend, hemos probado las cosas en este patio de recreo, y eso es todo lo que necesitamos hacer para poder enviar datos a nuestro servidor. A continuación, veremos sumar algunas mutaciones más que necesitaremos en nuestros proyectos. 16. Película y revisión de las imitaciones: Ahora hemos mirado cómo funcionan las mutaciones. Añadamos ahora dos más. Uno para crear una reseña, y otro para crear una nueva película. Empezando en esquema con la mutación Crear película. Volver a nuestro proyecto, y el schema.graphql. Vamos a utilizar los mismos objetos de mutación que usamos para el registro antes. En la nueva línea, voy a llamar a este CreateMovie. Este CreateMovie también va a tomar algunos argumentos. De hecho, este será un solo argumento de título, que va a ser de tipo string. También necesitamos establecer el valor de retorno, que va a ser nuestro tipo de película personalizado. Pasado al archivo resolvers, podemos crear el resolver coincidente dentro de este objeto de mutación. Justo después de la inscripción, separa esto con una coma, createMovie, tomando en los padres, los args familiares, el contexto, y la info. Siguiendo un patrón similar al de la inscripción del usuario, vamos a crear un objeto de película. Esto también va a tener un Id y un título, y una vez más necesitamos incrementar el Id por uno cada vez comprobando cuántas películas hay dentro de los datos de la muestra y luego aumentarlo en una en cada adición. El dato de muestra deberíamos bajar a las películas, vamos a generar el ID y también el título. Pero actualmente vamos a dejar vacías las críticas ya que esto se vinculará con Prisma más adelante. Vamos a seguir adelante y crear nuestra película const objeto. Esto va a ser igual a nuestra propiedad ID. A continuación, crea los backticks para hacer de esta una plantilla literal. Todos los identificadores de nuestras películas en los datos de muestra comienzan con 200, 2001 y 2002. Empecemos con 200, y luego vamos a agregar al final el valor de context.movies.length y luego aumentar esta longitud de matriz en una para cada adición, separada por una coma. A continuación tenemos que añadir el título, que es mucho más sencillo, podemos agarrar esto de los args. Al igual que el usuario anterior, también entonces necesitamos empujar esto a la matriz ctx.movies, el método de empuje de JavaScript, y luego voy a empujar nuestro objeto de película. El último que hay que hacer es devolver esta película de este método, y luego estamos bien para ir. Pasado al Playground, vamos a probar esto. Recargar. Todavía no tenemos esta mutación, por crear película, así que vamos a añadir esto a una nueva pestaña. Crear película. Esto toma un solo argumento de título, y voy a añadir un nombre de película de The Secret Life Of Pets. De esa manera, y entonces podemos devolver nuestros valores para la película. Añadamos el ID y también un título, y luego ejecutemos esto, y eso parece estar funcionando bien. Tenemos nuestros datos ahora devueltos a la derecha. Podemos comprobar dos veces esto está funcionando recuperando todas las películas de nuestra consulta. Vamos a correr esto, y abajo en la parte inferior tenemos nuestra nueva película de La vida secreta de las mascotas. Genial. A continuación podemos completar nuestra mutación final y eso es crear una nueva revisión. Como siempre, comenzamos configurando la mutación en nuestro esquema. Al esquema.graphql podemos agregar una primera mutación, que es crear revisión. Esto va a recuperar el tipo de revisión y se requiere. También necesitamos pasar la información para nuestra revisión por los argumentos. Voy a añadir estos a una nueva línea ya que va a ser para diferentes. Dado que esta revisión va a ser para una película en particular, necesitamos vincular esto agregando un ID de película, que es un tipo escalar de ID. También tenemos que añadir el texto para la revisión. Voy a agregar esto como texto de revisión, que es un tipo de cadena. También necesitamos agregar una calificación, que es un tipo de entero, y luego también necesitamos vincular esta revisión al usuario que la creamos agregando un campo ID de usuario. Esto también puede devolver un ID, y esto es todo lo que necesitamos para crear una revisión. Entonces nuestro resolviendo coincidentes justo después de CreateMovie, agrega una coma al final y podemos crear nuestro resolviendo para crear revisión, siguiendo un patrón similar, por lo que padres, args, contexto, e info. Entonces montamos nuestra constante de revisión, que va a ser nuestro objeto, que vamos a construir. En un dato de muestra si miramos las revisiones al final, vemos que el ID comienza con 300. Al igual que los dos métodos anteriores, vamos a configurar nuestra propiedad ID y luego incrementamos esta en una cada vez. Empecemos con 300. Entonces podemos obtener la longitud de la matriz de revisiones con ctx.reviews.length más uno. El siguiente inmueble que necesitamos es para la película. Podemos agarrar esto con Args.MovieID. A continuación tenemos el texto de revisión. Se trata de Args.ReviewText. El siguiente es para la calificación, y esto es de los args otra vez, por lo que args.rating. El final es vincular esta opinión a un usuario, y podemos agarrar esto del Args.UserID. Justo después de este objeto, hacemos nuestras dos cosas familiares. En primer lugar, necesitamos empujar esto al objeto reviews con ctx.reviews.push, agregando en nuestro objeto de revisión, y luego finalmente, necesitamos devolver esta revisión desde nuestro método. En una aplicación real, queremos restringir la calificación a un valor particular, digamos entre cero y cinco. Pero esto está bien por el momento ya que acabamos de enterarnos de GraphQL. Dale un guardado a este archivo y luego a la Playground, podemos probar esto. Recarga el navegador, abre una nueva pestaña con el tipo de mutación, y el nombre para esto era Crear revisión. Voy a agregar esto en una nueva línea ya que estos múltiples argumentos comienzan en. El primero fue una identificación de película, y como queremos probar si esto realmente está funcionando, vamos a agarrar una identificación de película real. A partir de nuestros datos de muestra, tomemos el 2002, y añadamos esto en. En la siguiente línea se encuentra el texto de revisión. Esta es una cadena, por lo que podemos agregar cualquier cosa aquí, separarla por una coma. El siguiente renglón es para la calificación. Voy a darle a esto un valor de cinco, y luego finalmente el ID de usuario, y esto nuevamente necesita que coincida con un ID real dentro de nuestros datos de muestra. Digamos que el Usuario 1 creó éste. Copia 1001, agrega esto en. Justo después de estos corchetes, también necesitamos agregar en las llaves llaves para declarar qué campos queremos volver, la revisión que queremos volver en nuestro ID. También podemos recuperar un título de película. Entonces película, y luego uno de los campos devueltos va va a ser el título, y luego volver a nuestros campos de revisión normales, así que es el texto de revisión. También podemos agarrar la calificación, y luego finalmente, también podemos agarrar al usuario que creó esto. Para el usuario también necesitamos recuperar un conjunto de selección de campos. Yo sólo voy a ir por el nombre. Vamos a probar esto. Recibimos un mensaje “Esperado tipo Int; encontrado cinco”. Esto sólo tiene que ser sin las cotizaciones. Vuelve a ejecutar esto, y tenemos una revisión creada con éxito, que también está vinculada a la película y también al usuario. Debido a los resolvers que creamos antes para estos tipos, ahora probemos la consulta para las revisiones. Podemos volver a ejecutar esto. Desplazemos hacia abajo hasta el fondo, y tenemos la revisión que acabamos de crear. Esto significa que ahora todas nuestras mutaciones están funcionando. Podemos crear usuarios, películas, y críticas. También recuperamos todos los datos exactos que queremos de cada uno. 17. Suscripción: Al principio del curso, mencionamos que nuestras gráficas de tipo tienen tipos re-root. Estos tipos son Consulta, Mutación y Suscripción. Ya hemos cubierto los dos primeros ya. Ahora vamos a echar un vistazo a cómo funcionan las suscripciones. Al igual que una consulta, la suscripción es una forma de obtener los datos que queremos. No obstante, uno de los inconvenientes de una consulta es que no siempre sabemos si los datos han cambiado desde que lo recuperamos. Si queremos estar seguros, tenemos que seguir haciendo la misma consulta tantas veces como sea necesario. Esta no es una forma muy eficiente de hacer las cosas. Es por ello que las suscripciones entran en juego. Podemos suscribirnos a algunos datos. Cada vez que cambian los datos, los nuevos datos se envían a un cliente, ya sea que ese cliente sea un sitio web o un dispositivo móvil, o incluso el patio de recreo GraphQL. Esto hace mediante el uso de sockets Web para mantener una conexión abierta con el cliente. Lo que esto hará por nuestro proyecto es que nos permitirá suscribirnos a las críticas de películas. Cada vez que se publique una nueva revisión, entonces se nos notificará. En una aplicación del mundo real, esto podría vincularse a un usuario para informarle cuando se ha hecho una nueva revisión en una jugada que les ha gustado, o incluso simplemente para abrir una nueva reseña en una página web a medida que se publican. GraphQL-yoga también viene con soporte para suscripciones, por lo que ni siquiera necesitamos instalar nada extra para empezar. Estos se configuran en nuestro proyecto utilizando un patrón similar a las consultas y mutaciones. Nosotros configuramos la suscripción en la raíz de nuestro esquema en nuestro archivo schema.graphql, y también un resolviendo coincidente para cada suscripción que creamos. Entonces empecemos en el esquema donde configuramos el sitio de suscripción. Entonces justo después de Query and Mutation, lo configuraría en la ruta. Por lo tanto, escribe Suscripción, abre las llaves llaves en. Por aquí seguimos el mismo patrón que las consultas y mutaciones al darle un nombre a nuestra suscripción. Entonces le voy a dar a esto un nombre de revisión, seguido del tipo que queremos devolver, que es un tipo de objeto personalizado. Guarda este archivo, y luego otra vez en los resolvers, necesitamos configurar el objeto de suscripción. Entonces voy a hacer esto después de Consulta y Mutación. Añadamos esto en. Entonces Suscripción, mayúscula S , así que es nuestro objeto, y luego añadir una coma al final. Como siempre, el solucionador debe tener un nombre coincidente. En nuestro caso, esta es revisión. Entonces dentro de este objeto de revisión, utilizamos un método de suscripción. El método de suscripción también toma en el padre, el argsm, el contexto, y también la info. Al trabajar con suscripciones, utilizamos lo que se llama un patrón de suscripción de publicación, a menudo se muestra a pubsub. Publisher es el remitente del mensaje y el suscriptor será nuestra aplicación. Podemos configurar una nueva instancia de pub-sub importando primero esto desde el módulo de yoga GraphQL, y lo hacemos en el index.js. Ya agarramos el servidor GraphQL del paquete de yoga. Entonces vamos a agarrar también a PubSub. Entonces necesitamos crear una nueva instancia de PubSub, que voy a hacer justo antes del servidor. Const, vamos a observar, y esto va a ser igual a una nueva instancia de PubSub igual a esta. Esto nos permitirá implementar PubsUp en nuestros proyectos, y lo podemos hacer agregando PubSub al contexto que aparece a continuación. Entonces dentro está el objeto de contexto justo en la parte inferior, podemos agregar nuestra instancia de PubSub, por lo que esto está disponible en todos los resolvers. Al ir a nuestro resolvable ahora puede terminar esto apagado. Dentro del método de suscripción, necesitamos devolver algo de PubSub. Por lo que podemos devolver ctx.pubsub. Lo que queremos devolver es un método Asynciterator. Entonces pubsub.asynciterator. Este Asynciterator es responsable de devolver los datos al cliente suscrito. Nos suscribimos a esto agregando un nombre de canal de nuestra elección, que voy a llamar mío nueva revisión. Por lo que dentro de aquí tiene una cuerda. Agregamos un nombre de canal de nueva revisión, mayúscula R y puedes llamar a esto lo que quieras. Por lo que ahora tenemos Asynciterator el cual devolverá cualquier nueva reseña. El siguiente paso es subir a la mutación de crear revisión justo arriba, que es ésta que acaba de aquí. Aquí cuando se crea una nueva revisión usando este solucionador, también podemos publicar estos datos en el nuevo canal de revisión. Lo hacemos nuevamente accediendo a PubSub desde el contexto. Hagámoslo justo antes de devolver nuestra opinión. Entonces ctx.pubsub, y luego podemos llamar a un método en pubsub llamado Publicar. Dentro de este método, primero pasamos en el nombre del canal como una cadena. Tan solo para que coincida con el nombre del canal desde aquí, vamos a usar NewReview. Después de que estén separados por coma, pasamos un objeto que contiene los datos que desea publicar, que es nuestro objeto de revisión desde arriba. Entonces vamos a agregar un objeto y el nombre de la revisión, que coincide con este objeto de revisión justo aquí. Esta revisión debe coincidir con el tipo de devolución de nuestro esquema. En nuestro esquema.graphql, si vamos a nuestra suscripción, aquí estamos devolviendo un tipo de revisión. Esto es exactamente lo que estamos publicando para que las cosas coincidan. Las suscripciones también se pueden probar en el patio de recreo, así que vayamos al navegador web y luego recarguemos. Vamos a crear una nueva pestaña para suscripción con una estructura similar a la que ya hemos utilizado para consultas y mutaciones. El nombre de la suscripción es revisión, y vamos a devolver un tipo de revisión, incluye una identificación, una calificación, y también el texto de revisión. Si golpeamos play, vemos en la parte inferior obtenemos un mensaje de escuchar, y él gira en el medio. Esto es escuchar cualquier dato nuevo publicado en nuestro canal, que es cuando se hace una nueva revisión. Podemos probar esto agregando una nueva revisión. Entonces digamos que la película esta vez es 2003. El usuario es 1003. Digamos que nueva revisión aquí dentro, mande esto y se crea la revisión. Volver a nuestra suscripción, genial, nuestra nueva opinión ahora se muestra en la suscripción. Vamos a crear uno más, a lo largo de 2002, nueva revisión 2 mande esto, y ahora se está mostrando nuestra segunda revisión. También podemos usar las suscripciones para sacar cualquiera de los datos que queremos del servidor también creando diferentes canales. Se pueden configurar exactamente de la misma manera que acabamos de hacer para las revisiones. 18. Configuración de Prisma: Ahora llegamos a una parte emocionante del curso donde llegamos a implementar una base de datos de trabajo real en lugar de nuestros datos de muestra. Para ello, estaremos utilizando un servicio llamado Prisma, que está disponible en prisma.io. Se puede pensar en Prisma como el enlace entre nuestros resolvers GraphQL y la base de datos. Se sienta entre nuestra base de datos y el servidor GraphQL creando el enlace. Nos permitirá realizar operaciones CRUD en nuestra base de datos, para que podamos crear, leer, actualizar y eliminar datos junto con trabajar con datos en tiempo real también. Hacemos esto actualizando nuestros resolvers para incluir métodos Prisma para interactuar con nuestra base de datos en lugar de lo que estamos haciendo actualmente, que es empujar y leer desde nuestro archivo de datos de muestra. Prisma es compatible con muchas bases de datos populares como MySQL, Postgre y MongoDB. También modela nuestros datos para que podamos estructurar cómo deben verse nuestros datos. Si antes has usado algo como Mangoose, hace un trabajo similar a éste. No obstante, Prisma está más adaptada para trabajar con la flexibilidad de GraphQL e incluso viene con una base de datos demo alojada gratuita para probar las cosas, y lo configuraremos en unos instantes. Para empezar, voy a instalar la CLI de Prisma a nivel mundial desde la terminal. Volvamos al código VS, dentro de esta terminal, podemos ejecutar npm i -g, y este flanco -g lo instalará globalmente y queremos instalar el nombre del paquete de Prisma y dejar que este tire en el paquete Prisma desde npm. El CLI de Prisma es una herramienta utilizada para administrar e implementar nuestros servicios de Prisma, estaremos utilizando algunos de los comandos que proporciona, como el comando init para configurar nuestros proyectos. Vamos a ejecutar esto ahora, así prisma init seguido del nombre de carpeta que quieres agregar, todos nuestros archivos y carpetas de Prisma dentro de lo que se llama mime Prisma y luego pulsa Enter. Esto activará nuestra inicialización donde podremos elegir la base de datos que queremos utilizar, podemos usar una base de datos existente si ya tenemos una, podemos crear una nueva base de datos local usando un contenedor docker, o voy a elegir la demo que es un entorno de desarrollo gratuito alojado por Prisma, selecciona esto y luego tenemos la opción de regiones, voy a seleccionar la más cercana a mí, pulsa Enter. Podemos seleccionar un nombre para nuestro servicio, quiero llamar a la mía la base de datos de revisión de películas, hit Enter y luego la etapa de desarrollo. A continuación, podemos seleccionar el idioma de los clientes de Prisma que queremos utilizar, voy a estar usando JavaScript, así que voy a seleccionar a los clientes de JavaScript de Prisma. El cliente de Prisma es una biblioteca autogenerada la cual brinda todas las operaciones que necesitamos al trabajar con nuestra base de datos y estas operaciones se basan en un modelo de datos, que pronto echaremos un vistazo. Hemos creado una carpeta llamada Prisma, que está en la raíz de nuestro directorio aquí, así que ahora voy a usar CD para cambiar a la carpeta Prisma y luego podemos desplegar nuestro nuevo servicio Prisma usando el comando Prisma deploy. Añadir Prisma desplegar en la terminal, he tocado Enter. Tan solo dale a esto un momento para correr. Si nos desplazamos hacia arriba para hacer un poco más de espacio, podemos ver que nuestro servicio se ha desplegado y también podemos ver que hemos creado un tipo de usuario y vamos a echar un vistazo por qué esto es en tan solo un momento y luego desplazándonos hacia abajo, tenemos algunos enlaces aquí, si abrimos esto, vamos a copiar este enlace, esto abrirá el patio de recreo el cual está vinculado a Prisma y luego añadirle esto dentro del navegador, esto abrirá una nueva instancia de los patios de juego GraphQL. Más abajo, también tenemos el enlace para nuestra base de datos, por lo que podemos copiar esto, volver a Chrome y luego podemos pegar esto como una nueva pestaña. Esta es la interfaz de usuario para nuestra base de datos demo, podemos ver en el lado izquierdo, tenemos un tipo de usuario y no tenemos ningún registro insertado todavía, lo que puede que te estés preguntando por qué solo tenemos este tipo de usuario o nosotros no ven ninguna referencia a nuestras críticas o películas. Bueno, esto es por un archivo llamado modelo de datos. Si abrimos la barra lateral, entra en la carpeta Prisma que se ha creado, tenemos un archivo llamado data model dot Prisma. Este modelo de datos se parece al esquema que ya tenemos y Prisma está configurado para abrir un tipo de usuario predeterminado. Este es el archivo que utilizaremos para estructurar todos nuestros tipos que queremos guardar en la base de datos. Este archivo reflejará cómo serán nuestras tablas de base de datos. Ya que solo tenemos el tipo de usuario, es por ello que solo vemos el tipo de usuario dentro de la base de datos demo. Una de las cosas difíciles de entender al mirar por primera vez todo esto es por qué tenemos que crear nuestros tipos tanto en este archivo como también en el esquema dot GraphQL. Bueno, hay casos en los que estos dos archivos se verán un poco diferentes, el modelo de datos, que acaba de tener nuestro usuario, describirá lo que queremos guardar en la base de datos mientras que el esquema describirá qué datos está disponible para el cliente para uso. Un ejemplo de cuándo estos archivos tendrán un aspecto diferente es un tipo de usuario típico. A menudo quisiéramos que un campo de contraseña para que el usuario se almacene en la base de datos pero tal vez no deseemos agregar un campo de contraseña en nuestro esquema, por lo tanto, exponiendo esto al cliente ya que esto puede suponer un riesgo de seguridad. Además, dado que nuestro modelo de datos sólo es responsable de estructurar y dar forma a nuestros datos, tampoco contiene ninguna de las consultas o mutaciones que hemos definido en nuestro esquema. Entonces, solo un resumen, nuestro esquema proporciona toda la información para nuestro front-end o para nuestros clientes y el modelo de datos refleja todo lo que vemos aquí en esta base de datos. De vuelta en nuestro proyecto, también dentro de esta carpeta Prisma, tenemos una carpeta generada, si abrimos esto, tenemos un archivo dentro llamado Prisma-schema dot js. Si echamos un vistazo por dentro, este archivo contiene mucho código el cual también ha sido generado por Prisma. El cliente de Prisma ha generado todo esto basado en el tipo de usuario único, cual tenemos en nuestro modelo de datos. Verá, por ejemplo, las mutaciones se han configurado todas en función del usuario, como crear usuario, actualizar usuario y eliminar usuario. Ahora, todas estas acciones estarán disponibles para que las utilicemos en los resolvers y este es uno de los beneficios reales al usar Prisma. Cada vez que agregamos algo nuevo a nuestro modelo de datos, necesitamos regenerar este archivo y veremos cómo hacerlo pronto. Otro archivo agregado cuando ejecutamos Prisma init, fue el archivo yml de punto Prisma. Si abrimos esto, hace más espacio. Este es un archivo de configuración de Prisma que contiene los puntos finales de la base de datos en la parte superior, que apunta a nuestra base de datos demo que acabamos de ver antes. Esto también puede ser utilizado para las bases de datos también y luego debajo de esto, tenemos la ubicación del archivo de modelo de datos, que está en la misma carpeta, luego al final tenemos la sección de generar, donde declaramos que queremos usar el cliente Prisma basado en JavaScript para autogenerar nuestro esquema y luego finalmente, la ubicación de donde se va a guardar este archivo. Para trabajar con este cliente de Prisma, necesitamos instalar una biblioteca cliente de Prisma, abajo en la terminal, podemos hacer esto desde npm, por lo que npm i y el nombre del paquete es Prisma-Clients-Lib. Se termina establece tira de npm. El último trozo de configuración es agregar a Prisma a nuestro contexto. Al igual que hicimos con los datos de muestra, esto nos permitirá hacer uso de todo en este archivo generado dentro de nuestros resolvers en el archivo index dot js. Para que esto funcione en la parte superior, necesitamos requerir el archivo autogenerado, que acabamos de mirar y almacenarlo en una variable llamada Prisma. Entonces vamos a crear una constante llamada Prisma y luego necesitamos requerir el archivo autogenerado, cual miramos antes, esto es en una ubicación de archivo la cual es barra de puntos puntos Prisma forward slash generado y luego reenviar slash cliente Prisma, que es el nombre del archivo. Entonces necesitamos agregar esta variable de Prisma al contexto, por lo que abajo abajo abajo revisiones, también podemos incluir a Prisma en el contexto y que esto nos dará acceso a Prisma desde nuestros resolvers y esto es lo que seremos mirando en los próximos videos. 19. Actualizar nuestro datamodel: Como mencionamos en el video anterior, el archivo de modelo de datos que tienes abierto aquí, viene con un tipo de usuario por defecto. Ahora necesitamos obtener este modelo de datos para adaptarse a nuestros proyectos. Por el momento, los tipos de película y revisión del usuario, serán los mismos que en nuestro esquema. Cuando salga a schema.graphql, y luego copie estos tres tipos, copie la revisión, la película, y también el usuario, y luego vaya a nuestro modelo de datos, y pegue estos en. También puede eliminar al usuario que se ha proporcionado de forma predeterminada. Digamos esto. Entonces necesitamos agregar las directivas ID, cada campo ID, por lo que @id y esto va a ser a nuestro campo ID en el usuario. Lo mismo para la película y también para la revisión. Esta directiva ID es algo que necesita agregar a un campo en cada tipo, al usar PRISMA. Otra directiva útil es única, cual es útil para campos como nuestro correo electrónico. Cada entrada de correo electrónico en la base de datos deberá ser única. Podemos agregar esto a nuestro usuario, su tipo de correo electrónico con personal, podemos agregar @unique. Desde que hemos cambiado nuestro modelo de datos, ahora necesitamos hacer dos cosas. En primer lugar, necesitamos ejecutar un despliegue PRISMA para actualizar nuestro servicio PRISMA, y lo ejecutamos dentro de la terminal. Si nos desplazamos hacia arriba, podemos ver una lista de todos los diferentes tipos y campos que ahora se han creado, modificado o eliminado, junto con cualquier relación entre ellos también. También tenemos la oportunidad de volver a obtener nuestro enlace de base de datos, y esto es algo que no tienes abierto en el navegador, agregando basura desde el enlace que hay en la parte inferior. Si ahora repasamos este enlace en el navegador, voy a recargar. Ya podemos ver más, a la izquierda, tenemos un usuario y tipo de película y revisión. El segundo que tenemos que hacer es regenerar nuestro archivo de esquema PRISMA. Este fue el autogenerado que miramos antes. Dentro de la terminal, ejecutar PRISMA genera, y luego presionar “Enter”. Esto ahora actualizará nuestro archivo también generado con los nuevos tipos del modelo de datos. Podemos ver esto si abrimos la barra lateral, y luego entramos en generado, y luego nuestro esquema PRISMA. Dentro de aquí si nos desplazamos hacia abajo, vamos un poco más allá, podemos ver nuestro tipo de película. Podemos ver muchas referencias de películas a medida que bajamos, y si hacemos una búsqueda de mutación, ya ves cómo están las mutaciones aquí. Contamos con la creación, actualización y eliminación de película. Lo mismo para revisión y también para el tipo de usuario, que hemos visto antes. Estos archivos pueden ponerse bastante complejos, pero PRISMA tiene su cubierto con casi cualquier operación, necesitaremos realizar en nuestra base de datos. Empezaremos a hacer esto en el siguiente video, donde empezamos a cambiar nuestros resolvers para utilizar una base de datos real en lugar de los datos de muestra. 20. Escribir a la base de datos: Ahora hemos generado nuestras operaciones de Prisma, ahora las vamos a implementar en nuestros resolvers. Esto nos permitirá hacer uso de nuestra base de datos real en lugar de las matrices de datos de muestra sobre en el archivo resolvers.ts. Voy a empezar con las mutaciones. Ya que no tenemos nada en nuestra base de datos, usted dibuja una consulta. Empecemos con esta mutación de registro y podemos empezar por reconstruir a nuestro usuario para que use Prisma. Vamos a configurar nuestro const de usuario y luego esta vez vamos a usar el context.prisma. Ya que ponemos prisma en el contexto, podemos acceder a él de esta manera. Después llamamos a una consulta prisma sobre mutación por el nombre del método. Voy a usar la mutación crear usuario. So.Create usuario. ¿ Cómo sé que es una mutación de crear usuario? Porque prisma tomará nuestros tipos, como usuario y hará o creará, actualizará, y eliminará una versión de cada uno. Al igual que hemos visto en el último video cuando revisamos el esquema prisma. Contamos con crear, actualizar y eliminar versiones de nuestra película, revisión, y también usuario. En este esquema prisma generado, una cosa que notarás es que prisma no agrega los argumentos individuales. Por ejemplo, create movie tiene una propiedad de datos y luego la propiedad estatal apunta a un nuevo tipo de entrada y de esta manera es solo para mantener las cosas un poco más organizadas. También podemos buscar película, crear entrada, agregar esto en, y podemos ver el tipo de entrada justo aquí. Esto lleva una identificación, un título, y cualquier comentario. De vuelta a nuestros resolvers, podemos configurar un objeto para construir a nuestro usuario. Dentro de crear usuario como en un objeto y luego podemos agregar el nombre, que es igual a args.name. También use el correo electrónico, que es args.email. No necesitamos agregar un DNI. Ya que esto ahora es autogenerado por Prisma, así que no inculcamos nada como lo hicimos arriba. De hecho, en realidad podemos eliminar este const.user ya que ya no necesitamos esto junto con la herramienta de método push porque ya no estamos empujando a los datos de la muestra. Definición de esta mutación. Voy a convertir esto en una función asíncrona agregando asíncrona frente a la suscripción. Esto nos permitirá usar await justo antes de crear a nuestro usuario. Este es JavaScript estándar y nada específico de GraphQL. Esto solo significa que el código se pausará o esperará hasta que el usuario de creación haya terminado. Entonces finalmente al final regresamos al nuevo usuario con este lugar conocido, podemos probar esto empujará a la base de datos reiniciando el servidor usando npm start. Podemos dar inicio a esto y luego ir a Chrome, abrir el patio de recreo. Después vamos a nuestra mutación de registro, entramos y recuperamos nuestros datos. Entonces lo último que hay que hacer es ir a nuestra base de datos y recargar. Esto parece prometedor tenemos a nuestro usuario y tenemos el valor de uno. Hacemos click en esto. Entonces vemos el valor que se ingresó en el patio gráfico, ahora en nuestra base de datos. Si hacemos click en esta línea de usuario sobre en el lado derecho, vemos todos los campos como usuario. Tenemos un ID el cual ha sido autogenerado, el nombre y correo electrónico. Entonces en la parte inferior tienes el campo de opiniones y conectaremos al usuario a las reseñas muy pronto. Vamos a seguir adelante y crear un nuevo usuario dentro del patio de recreo. Entonces voy a esta vez como mini-mouse, cambiar el correo electrónico y luego enviar esto apagado, recargar. Ahora tenemos dos usuarios dentro de nuestra base de datos. Ahora tenemos a nuestros usuarios todos trabajando. Queremos hacer lo mismo para crear película. Si nos desplazamos hacia abajo, tenemos nuestro solucionador de crear películas justo aquí, que voy a convertir igual que lo hicimos antes con los usuarios. Entonces en primer lugar, voy a quitar el objeto de película, crea una nueva constante llamada película y la secuencia sea igual al contexto top Prisma. Entonces vamos a llamar a un método llamado Create Movie. Se puede tomar un objeto. Vamos a pasar en el título, que va a ser igual al args.title, que pasará desde el patio de recreo. Pero quiero quitar es método push. Desea mantener el estado de cuenta de devolución en. Lo último que hay que hacer es marcar esto como asíncrono. Entonces podemos hacer una pausa hasta que los datos regresen de crear película. Guarda esto, y luego pasa al patio de recreo, refresca y ve a la mutación que es crear película y manda esto apagado. No veo ningún error así que eso es bueno. También agrega una nueva película aquí y también envía esto fuera también, vuelve a cargar la pestaña de la base de datos. Vemos dos películas de lado de nuestra base de datos, que acabamos de agregar. Genial. Ahora sólo tenemos una mutación más para actualizar y esto es crear revisión. Volveremos a este en el siguiente video y también miraremos los datos de conexión, junto con también cómo comprobar si existe un registro en la base de datos. 21. Verificar si existe los datos y crear conexiones: La mutación CreateReview va a ser un poco más en profundidad que las que ya hemos creado. Esto se debe a sus vínculos con un usuario y una película. Antes de crear esta revisión tendrá que comprobar tanto el usuario como la película realmente existen en la base de datos. También necesitamos configurar una conexión con el usuario y también las películas, para que podamos recuperar los datos que necesitamos. Empecemos con CreateReview en el archivo resolvers.js. El CreateReview de los resolvers', y podemos empezar por hacer de esto una función asíncrona. Los clientes de Prisma nos permite comprobar si existe un registro dentro de nuestra base de datos proporcionando una propiedad llamada $exist. Podemos usar esto para pasar un ID para el usuario y la película, para comprobar si ambos existen antes de crear la revisión. Hagámoslo justo encima de nuestro objeto de revisión. Const, vamos a empezar con el usuario, podemos acceder a prisma fuera del contexto, luego podemos usar el método $exist, para comprobar si un usuario de la tabla de usuarios, voy a pasar en un objeto, comprobar si el usuario ID de nuestra base de datos coincide con el ID de usuario de los args, por lo que args.UserID. Justo después de esto también vamos a hacer lo mismo para la película. Sólo hay que hacer constante llamada película, entonces podemos acceder a prisma desde el contexto. Podemos usar $ existes, pero esta vez más que el usuario, queremos revisar la tabla de películas dentro de la base de datos. También queremos comprobar si el ID de película es el mismo que el proporcionado en los args, que es Args.MovieID. Bien. Ahora tenemos estas dos variables, podemos lanzar errores si una o ambas no existen. Podemos hacer esto con una simple sentencia if para comprobar si el usuario no existe. El signo de exclamación hará lo contrario, por lo que si el usuario devuelve falso, entonces ejecutaremos el código dentro de aquí. Este código va a ser un simple lanzamiento nuevo Error con un mensaje de una cadena que va a ser, “usuario no encontrado”. Debajo de esto la mayoría quiere agregar una segunda sentencia if, comprueba si no existe ninguna película. Si la película es falsa, podemos lanzar un nuevo Error, y éste va a decir, “película no encontrada”. Ahora si vamos justo por debajo de estas dos afirmaciones si, si llegamos a esta etapa, el usuario y la película existen en la base de datos. Podemos seguir adelante y construir nuestra revisión. const, revisión, vamos a esperar esta marca de datos de nuestra base de datos, por lo que ctx.prisma, y luego podemos usar el método prisma de CreateReview. CreateReview va a tomar un objeto y este objeto de revisión es similar a lo que hemos creado justo debajo cuando se trabaja con un dato de muestra. Por lo tanto, podemos copiar todas las propiedades de este objeto de revisión. Voy a cortar estos. También podemos eliminar estas constantes y pegar esto dentro de nuestra revisión. También podemos eliminar este método push ya que ya no estamos empujando a nuestros datos de muestra, y también la propiedad id de nuestro objeto ya que este es auto generado por Prisma. Si guardamos este archivo y luego nos dirigimos al GraphQL Playground. Recarguemos esto. Entonces podemos seguir adelante y agarrar un MovieID válido y usar id de nuestra base de datos. Para agarrar a cualquier usuario, podemos copiar el id sobre, agregar esto en. Entonces podemos hacer lo mismo por nuestra película. Cualquiera de esto está bien, agréguelo al MovieID, entonces podremos ejecutar nuestra mutación. Recibimos de vuelta un error. Esto se debe a que necesitamos establecer una conexión entre el MovieID, provisto de argumentos, con una película de la base de datos, y también la misma para el usuario. Prisma nos permite hacer esto fácilmente mediante el uso de un conector. Podemos configurar esto en nuestros resolvers dentro de nuestro objeto de revisión. Por ahora solo voy a cortar los args.movieID, configurar los tirantes rizados, y luego podemos pasar en un objeto connect. Aquí podemos pasar cómo queremos conectarnos a nuestras películas, y una vez que uses el campo id y luego coincide con el MovieID de los args. También podemos hacer esto por el usuario, podemos cortar los args.UserID, configurar las llaves, y nuestro objeto connect. Esta vez también queremos conectarnos por el id. Conectamos esto con el id de usuario proporcionado en los args, le damos un guardado, y luego si volvemos a ejecutar nuestra revisión, recargamos el navegador, y enviamos esto fuera. Obtendremos un error, no se puede leer publicación de propiedad de indefinido, y esto está en CreateReView. Echemos un vistazo a esto. Tenemos ctx.publish en el pubsub que se ve bien. Solo echemos un vistazo a esto en nuestro índice. Parece que cuando vimos al pubsub alguna razón por aquí. Vamos a guardar esto, recargar y comprobar que esto está bien. Ahora ya no obtenemos ese error de publicación. En cambio obtenemos un no puede devolver nulo para el campo no nullable que es review.Movie. Se espera este error. En primer lugar, si pasamos a nuestra base de datos y luego recargamos, vemos que ahora tenemos nuestras reseñas que acabamos de agregar, por lo que la mutación realmente está funcionando. Pero el problema radica en los datos de revisión, que estamos recuperando. Esto es porque si pasamos a nuestro archivo schema.graphql. Entonces si subimos a nuestra mutación, aquí podemos ver recuperar el tipo de Revisión, desplazándose hacia abajo a este tipo de Revisión, que está justo aquí. Como ya hemos mirado, los campos escalares de ID, string, y entero devolverá un valor del resolvente. Tanto nuestros objetos personalizados de Película como también User necesitarán un resolver separado para obtener los datos que necesitamos en el archivo resolvers. Si nos desplazamos hacia abajo a nuestro tipo de vista, ya hemos creado estos dos resolvers de revisión de película y usuario. No obstante, estos siguen buscando los datos de la muestra en lugar del método prisma que necesitamos. En primer lugar, podemos modificarlos comentando o eliminando el código de antes. Entonces en su lugar podemos empezar a sustituir esto por el equivalente prisma. Podemos devolver ctx.prisma, y lo que queremos hacer, que queremos buscar a través de las revisiones. Actualmente estamos accediendo a las revisiones desde nuestra base de datos. El siguiente paso es encontrar la revisión actual haciendo coincidir id con el de los padres. Pasamos esto como un objeto, tanto el id con el parent.id Ahora tenemos la revisión de nuestra base de datos. Queremos devolver cualquier película asociada a esta revisión. Esto se puede lograr encadenando al final una llamada al método de película. Justo al final, podemos encadenar el método de película para buscar todas las películas asociadas a esta revisión. Podemos hacerlo con cualquier dato que esté relacionado. Efectivamente encadenamos para cubrir los métodos que tenemos como usuario, película y revisión, luego filtrar los datos en cada etapa a medida que vamos, como él cuando el primero filtre las críticas por el id, y luego buscar cualquier película asociada con esta revisión. Debajo de este tipo de Revisión también tiene una relación con el usuario, por lo que podemos hacer lo mismo con estos dos. Podemos quitar el código de antes. Esta vez vamos a devolver un ctx.prisma.review. Esto se va a ver muy parecido. Vamos a buscar el id de revisión que coincide con el id de padre La única diferencia en esta ocasión es que vamos a buscar un usuario correspondiente encadenando al final el método de usuario, guardar este archivo y luego volver a la Zona de juegos, recarga el navegador, y luego manda esto apagado, y ya podemos ver que nuestra opinión ha sido creada. Si vas a una base de datos, esta revisión también aparece aquí, y podemos dar click en esto y echar un vistazo a nuestra vista. Probemos una más. Podemos agregar en un usuario diferente. Copia el Id de usuario pega esto en, y luego copia una película válida. Copia este id también, agrega esto dentro de los args, y podemos ejecutar esto y ahora recuperamos los datos que queremos. Si recargamos nuestra base de datos, deberíamos ver la revisión dentro de aquí. Todas nuestras mutaciones ahora están trabajando con Prisma y empujando a nuestra base de datos real. A continuación, pasaremos a modificar nuestras consultas para trabajar también con nuestra nueva base de datos. 22. Lectura de datos con Prisma: Ahora ya tenemos un poco de experiencia de interactuar con nuestra base de datos usando Prisma. Actualizar nuestras consultas para recuperar nuestros datos no debería ser demasiado problema ya que es muy similar. Nuestra primera consulta es para películas y quiero marcar esto como asíncrono para que podamos volver a esperar datos de Prisma. Entonces podemos volver a acceder a Prisma en el contexto y seleccionar el método de películas. Comentemos el código de antes y en su lugar podemos crear una nueva constante llamada películas. Esto también espera nuestra información de ctx.prisma, y llama a los métodos de películas de Prisma, sacando todas las películas de nuestra base de datos entonces podemos devolver nuestras películas al final. Tendría unas declaraciones de retorno y podemos devolver las películas y asegurarnos de que esto coincida con películas justo por encima de eso. Esto es todo lo que necesitamos hacer para nuestra consulta básica y podemos probar esto en el patio de recreo. Actualicemos el navegador y luego a la pestaña que es para las películas. Esta es una consulta. Podemos volver a ejecutar esto y luego tenemos nuestras dos películas pero esta vez sacadas por Prisma de nuestra base de datos. Si queremos algún dato relacional aunque, por ejemplo, el tipo de película también tiene críticas. Si nos fijamos en esta propiedad de comentarios, sólo tenemos una matriz vacía. Para ello necesitamos modificar el solucionador para también buscar las revisiones. De vuelta en el archivo resolvers, desplácese hacia abajo hasta la parte inferior. Tenemos que reducir este solucionador de críticas para que el tipo de película funcione con Prisma igual que hicimos en el último video. Vamos a comentar el código de antes y luego en su lugar podemos devolver ctx.prisma. Vamos a buscar a través de nuestras películas así que busquemos el método de película. Presionando en un objeto y vamos a buscar la película que quieres por el DNI. Bueno, emparejemos el ID de la película con uno proporcionado por parents.id Entonces al igual que miramos en el último video también podemos encadenar al final nuestro método de reseñas, tirando de todas las críticas asociadas a esta película en particular. Guardemos esto. Ahora, si volvemos a ejecutar nuestra consulta, recargar el navegador, pulsa Enter y ahora vemos para cada película tenemos un array de críticas. Esta vez no está vacía. Cuenta con todas las revisiones que se vincula en nuestra base de datos. A continuación tenemos el solucionador de usuarios. así que realice una copias de seguridad en la parte superior del archivo y luego vaya a los usuarios. Podríamos primero marcar esta función como asíncrona, tirando de comandos nuestra declaración de retorno de antes. En su lugar podemos configurar una constante llamada Usuarios la cual va a esperar ctx.prisma. Esta vez queremos buscar a los usuarios y luego podemos devolver a nuestros usuarios. Al igual que antes, esto funciona bien para consultas simples que solo devuelve tipos escalares. Bueno, nuestros usuarios también tienen reseñas así que abajo cerca de la parte inferior del archivo, necesitamos modificar el solucionador de revisiones para el tipo de usuario. Desplácese hacia abajo hasta nuestro tipo de uso. Tenemos un solucionador de opiniones. Dentro de aquí podemos comentar o recortar estas líneas de código y luego podemos reemplazar esto un método Prisma el cual se verá similar a las que creamos antes. Vamos a regresar ctx.prisma. Vamos a buscar a los usuarios, pasar un objeto o podemos filtrar a los usuarios por el ID. El DNI contra el que queremos comprobar es el que vive de los padres. Entonces para cada usuario, también podemos tirar de las revisiones correspondientes encadenando el método de las revisiones al final. Off en el patio de recreo ya podemos probar esto. Si buscamos la pestaña que es la consulta del usuario, presione recargar y luego enviar esta consulta. Después recuperaremos a todos los usuarios y las revisiones correspondientes para cada uno. A continuación tenemos la consulta de opiniones. Esto seguirá el mismo patrón, así que arriba en la parte superior de los resolvers podemos marcar esto como asíncrono, comentar las declaraciones de retorno y luego podemos obtener todas las reseñas de Prisma, así que const reseñas. Esto va a esperar a nuestros datos ctx.prisma.reviews y luego devolver nuestras opiniones a continuación. Prueba esto en el patio de recreo, toca recarga, hasta nuestra consulta de opiniones, envía esto fuera y nuestras reseñas y ahora regresa de la base de datos. Observe cómo esta vez nuestros datos relacionales que es la película así con título de película aquí y ID y también el nombre de usuario en la parte inferior. Todo esto parece estar funcionando también. Esto se debe a que ya hemos manejado antes los resolutores de estos casos. Hicimos esto más en los resolvers abajo en el tipo de revisión. Desplácese hacia abajo hasta el tipo de revisión. Tenemos el usuario y solucionador de películas en su lugar. Los convertimos al usuario Prisma antes al trabajar con mutaciones por lo que también ahora se instalaron para nuestras consultas también. 23. Lectura de datos con Prisma: Todos terminamos con actualizar las consultas existentes, ahora funcionan con Prisma. Pero antes de terminar esto, voy a crear una consulta más. Esto es para obtener opiniones de un usuario en particular. Si te sientes seguro, podrías seguir adelante y probar esto nosotros mismos antes de seguir conmigo. Su estructura seguirá el mismo patrón que las otras consultas justo aquí. Quiero llamar a mis revisiones de consulta por usuario, que tomará cualquier ID de usuario como su único argumento. Entonces necesitas crear un resolvente coincidente que primero comprueba si el usuario existe y luego devuelve todas las revisiones para ese usuario en particular. De acuerdo, entonces comencemos en nuestro esquema agregando en nuestra consulta. Entonces eso es esquema.graftql. Arriba en la parte superior con el tipo de consulta. Podemos agregar opiniones por usuario. Esto va a tomar como su único argumento, el ID de usuario, que devolverá el tipo de ID. Este es un campo obligatorio, por lo que utilizamos el signo de exclamación. Un usuario puede tener múltiples revisiones, por lo que va a devolver una matriz del tipo de revisión. Después de que esto se haga, podemos guardar esto y luego ir a los resolvers para esta consulta. Resolvers es.jsfile. Entonces después de las revisiones podemos añadir una coma. También voy a hacer esto asíncrona. El nombre era reseñas por usuario, que viene segundo, los padres, los args, los contactos y también la info. Configura nuestros tirantes rizados. El primer paso es comprobar si existe un usuario en nuestra base de datos. Vamos a crear una constante llamada usuario existe. Entonces vamos a esperar los datos de regreso de ctx dot prisma. Voy a usar el método $ symbol exist para comprobar si existe un usuario por una ID en particular. Podemos pasar su ID al objeto, comprobando si este ID es igual al proporcionado por args, que era args dot user ID. Entonces podemos comprobar si el usuario existe en una declaración condicional. Entonces si el usuario no existe, entonces vamos a lanzar nuevo error. Pasar un mensaje de error como una cadena de usuario no encontrada. En la línea de abajo, si llegamos a esta etapa, el usuario sí existe. Así que adelante y poner en las críticas. Entonces const críticas, vamos a esperar, ctx.prisma. El primero que voy a hacer es revisar a los usuarios y filtrarlos hacia abajo por el ID proporcionado para buscarte a todos los usuarios de la base de datos que coincidan con el ID de los args. Por lo que ID de usuario. Entonces podemos encadenar al final las revisiones de ese usuario en particular. El paso final es devolver las críticas y luego probar esto en el patio de recreo. Recarga el patio de recreo, y luego necesitamos crear una nueva pestaña para crear nuestra nueva consulta. Esta consulta se denominó reseñas por usuario, que vas a tomar en el ID de usuario. Este ID de usuario necesita ser un ID válido de nuestra base de datos. Por lo que obviamente los usuarios, podemos seleccionar cualquier usuario, copiar el ID, pegar esto en, dentro de las llaves. Tenemos que seleccionar qué campos queremos volver. Vamos a añadir el ID, el texto de la revisión, la calificación y luego también la película a la que esta crítica está asociada. Esto también es un objeto. Por lo que necesitamos pasarlo en las llaves, los campos que queremos volver, Nuestra respuesta para agregar título. Ejecuta esta consulta. Entonces tenemos 1, 2, 3 opiniones diferentes, que coincide con las opiniones bonitas dentro de nuestra base de datos. Una prueba final, si eliminamos los dígitos de nuestro ID de usuario y luego ejecutamos esto, obtenemos nuestro mensaje de usuario no encontrado. Gran esperanza lograste darle a esto un go por ti mismo. Si no, no te preocupes demasiado. Todo es una buena experiencia de aprendizaje y esto es todo ahora para nuestras consultas usando Prisma. 24. Gracias y próximos pasos: Enhorabuena, ya han llegado al final de este curso. En caso contrario, se trata de un curso introductorio. Hemos cubierto bastante terreno y espero que hayas aprendido mucho sobre GraphQL y Prisma. Empezamos mirando qué es GraphQL y algunos de los conceptos básicos como configurar nuestro servidor, configurar nuestros tipos, consultas y mutaciones, y también cómo crear resolvers. Después de eso, miramos las relaciones entre diferentes tipos de los resolvers de conjuntos para obtener nuestros datos relacionales antes de pasar a mutaciones y datos en tiempo real usando suscripciones. Una vez que teníamos todo esto cubierto, pasamos a configurar una base de datos real e interactuar con ella usando Prisma. Después convertimos nuestros proyectos de revisión de películas para trabajar con esta base de datos en lugar de los datos de muestra con los que empezamos. Por ahora, deberías tener una buena comprensión de lo que son GraphQL y Prisma y lo que pueden hacer por el back end de nuestros proyectos. Puedes, por supuesto dejarlo ahí, si solo estás tomando este curso para muestrear GraphQL. Bueno, si quieres llevar las cosas más allá, hay algunos caminos que puedes tomar. Una forma obvia pero realmente efectiva de mejorar en GraphQL es simplemente construir más proyectos. Toma lo que tienes hasta ahora y aplícalo a cualquier proyecto del que disfrutes. Podría ser un hobby o interés personal, algo relacionado con el trabajo, o cualquier otra cosa que se te ocurra. Algo más que puedes hacer es hacer tuyo este proyecto haciendo cambios. Podrías personalizarlo cambiando el tema, cambiando qué datos obtienes, o incluso agregando nuevas características. Si te sientes un poco más seguro, incluso podrías agregar autenticación de usuario con una facilidad de inicio de sesión y registro. Podrías agregar una función para eliminar o actualizar reseñas o cualquier otra cosa que sea buena para ti. Otra opción es alejarse de la base de datos demo de Prisma y configurar la tuya propia. Aquí hay un enlace a los docs de Prisma el cual tiene algunas guías al respecto. Otro gran paso, será crear un front-end para interactuar con nuestros datos. No hemos cubierto el front end en este curso ya que GraphQL es una tecnología relacionada con el back end. Pero sin duda esto es algo que vale la pena examinar. Hemos utilizado el patio de recreo GraphQL para obtener nuestros datos pero GraphQL es compatible con casi cualquier front-ends populares incluyendo, React, Vue JS, Angular, e iOS por nombrar algunos o aquí hay un enlace a la documentación de Apollo GraphQL. Apollo GraphQL tiene implementaciones para trabajar con GraphQL en el servidor, convirtiéndolo en una alternativa al GraphQL-Yoga, que hemos utilizado en este curso. Además, el Apollo Client se puede utilizar para construir el lado del cliente del front-end de su aplicación. Si vas al menú y pasas el cursor sobre las opciones del cliente aquí arriba, hay enlaces a guías para muchas opciones populares de front-end. Siéntase libre de echar un vistazo a algunos de estos. Lo último que quiero mostrarles son estas Calderas GraphSQL. Se trata de placas de calderas basadas en Nodo, Typescript, React o Vue. Cada uno de estos tiene tres niveles de boilerplate a partir de un simple ejemplo hola mundo. Dos características avanzadas que utilizan autenticación y bases de datos. Estos son realmente útiles para usar como punto de partida del proyecto o incluso simplemente como referencia. Esto es ahora para el curso. Espero que realmente lo hayas disfrutado y ojalá te vea en el curso pronto. 25. Sígueme en Skillshare: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo hayan disfrutado y obtengan algún conocimiento de ello. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en share de habilidad, y también sígueme para cualquier actualización y también para estar informado de cualquier clase nueva a medida que estén disponibles. Gracias una vez más, buena suerte, y ojalá te vuelva a ver en una futura clase.