logo

midudev


Transcribed podcasts: 146
Time transcribed: 5d 6h 19m 9s

This graph shows how many times the word ______ has been mentioned throughout the history of the program.

Vamos a hacer una más que sea del cambiar el número de teléfono, ¿vale?
Vamos a poner esto bien, con el yes, yes, claro que yes, muy bien.
Vamos a hacer uno que sea una mutación para cambiar el número de teléfono.
Habíamos creado esta de aquí, vamos a crear otra que sea edit number.
Para editar un número de teléfono necesitamos el, bueno, vamos a hacer la búsqueda por el nombre
y el nuevo teléfono, así que el string, y esto devuelve la persona.
Fíjate que esto es súper típico en GraphQL y es bastante importante.
Cuando hacemos una mutación, ¿vale?
Nosotros mutamos el objeto, por ejemplo, la persona, lo que devolvemos es otra vez la persona, ¿vale?
¿Por qué?
Porque en GraphQL muchas veces lo que hacemos es que al cambiar este dato,
lo cambiamos en la base de datos y también lo cambiamos en la caché local.
De esta forma reflejamos en React, en la aplicación del cliente, puede ser React, puede ser la que sea,
reflejamos este cambio cuanto antes, sin necesidad de verificar
cómo ha ido en la base de datos o lo que sea, ¿vale?
De esta forma lo hacemos mucho más rápido.
Así que devolvemos este dato, ya devuelve de la base de datos y lo guardamos en local.
¿Ok?
Pues venga.
Lo que podríamos hacer aquí también, porque alguien estaba preguntando,
oye, ¿no se puede pasar un objeto?
Claro, o sea, aquí podríamos pasar Person, Person, por ejemplo.
Pero bueno, en este caso no tiene mucho sentido pasarle a la persona entera,
porque solo queremos editar el número, por lo tanto vamos a pasarle el nombre de la persona y el teléfono, ¿vale?
Pero sí que se le podría pasar otro tipo de datos y ya sabéis, el tipo de datos de persona, pues funcionaría correctamente.
Vale, vamos a añadir aquí en las mutaciones, aquí tenemos el de añadir la persona,
pues vamos a añadir el Edit Number.
Aquí tenemos el Root y Arcs.
En este caso vamos a buscar primero la persona, que esto ya vemos que lo podríamos extraer,
porque no es la primera vez que hacemos esto, de buscar la persona justamente utilizando el nombre,
o sea, que es una utilidad que podríamos volver a utilizar.
Si la persona no existe, pues nada, devolvemos NULL, ¿vale?
Siempre devolvemos NULL en GraphQL, si algo no existe, si algo no se encuentra, NULL.
En este caso no vamos a editar el nombre de una persona que no existe.
Así que, si editamos el número de una persona que no existe, pues ahí tienes un NULL.
Y si no, pues nada, vamos a añadir el Updated Person de la persona que hemos encontrado,
pero que el teléfono sea el Arcs Phone.
Y nada, ¿ahora qué podemos hacer?
Podríamos añadir esta persona justamente al array original.
Así que para añadirlo podríamos hacer, ¿qué podríamos hacer?
Podríamos filtrarlo, podríamos mapear todos los datos,
podríamos hacer un montón de cosas, o podríamos buscar el índice, el índex.
Vamos a probar eso.
Vamos a hacer un FindIndex.
Tendríamos aquí el PersonIndex.
El PersonIndex, si no lo encuentra, a ver, vamos a buscar en MDN FindIndex.
Yo creo que si no encuentra es Undefined.
Hoy menos uno, menos uno.
¿Ves? Pues no me gusta que sea menos uno.
Vale.
Es un poco raro, FindIndex, menos uno.
Pero bueno, tiene sentido porque siempre ha sido así.
Bueno, tendríamos aquí el índice.
Vamos a recuperar a la persona.
Person, Persons, de PersonIndex.
Esta persona es justamente la que queremos hacerle el SpreadOperator y cambiarle el teléfono.
¿Por qué estoy haciendo todo esto?
Porque ahora, en todas estas personitas que tenemos aquí,
ahora hay que cambiar el que había antes por este.
Entonces, para hacer esto, justamente tenemos que saber el índice.
Así que ahora, en Persons, que es donde están todas las personas,
utilizamos el PersonIndex del principio y le añadimos el UpdatePerson.
Y estamos machacando el que había antes.
Hay diferentes formas de hacer esto.
Se podría utilizar un Map y cosas así.
Pero bueno, esta funciona y creo que es mejor que hacer un Map
porque si no estaríamos recorriendo dos veces de forma innecesaria esto.
Vale.
Pues hacemos el UpdatePerson.
Vale, importante.
Tenemos que devolver la persona que al final hemos actualizado.
Hago un Recap rápido.
Línea 95.
Vamos a recuperar la persona que tenga el nombre que le pasamos por argumento.
Recuperamos el índice.
Si el índice es menos uno, es que no lo hemos encontrado.
ReturnNull.
Porque no podemos editar el número de teléfono de una persona que no existe.
Pero si existe, lo que vamos a hacer es recuperar esta persona del array
utilizando este índice.
Con este índice, ya que tenemos la persona,
vamos a crear un nuevo objeto que le llamamos UpdatePerson,
donde están todas las propiedades de esta persona
pero donde el teléfono es el que le estamos pasando por parámetro.
Y ahora, con el array original de personas,
en esa posición donde habíamos encontrado esta personita,
le vamos a asignar el UpdatePerson.
Vamos a machacar el que había antes.
Y este UpdatePerson es el que vamos a devolver.
Así que con esto...
¡Ay!
Aquí hay algo que no he hecho bien porque no le ha gustado.
A ver...
A no-type phone.
Vale, ¿qué he hecho con phone?
¡Ay! Es que he puesto phone y esto era Person, ¿eh?
Digo que...
Pero mira, fíjate que es que no te deja pasar ni una.
Es que GraphQL es una cosa loca.
Es que no me da la gana, ¿sabes?
Es como...
No, no, no.
No vas a utilizar ni una.
No te voy a dejar pasar ni una.
Vale.
Vale, vale.
A ver.
Y esto, pues nada.
A ver cómo lo podríamos utilizar.
Con la mutación.
Vamos a crear una mutación por aquí.
Mutation.
EditNumber.
Abrimos aquí el nombre.
Que sería Itzy.
Vamos a poner la Itzy de un teléfono, va.
Y le tenemos que poner el teléfono también.
Pues el teléfono que sea 123.
Y de la persona vamos a recuperar el nombre.
Vamos a ver si esto funciona con todas las coserías que hemos hecho.
Vale.
Aquí tenemos el nombre de Itzy.
Podríamos recuperar las personas con el phone.
Itzy.
Ahora tiene el número de teléfono justamente que le hemos añadido.
¿Vale?
Pues con esto ya deberías estar dominando, vamos, a tope, el tema de las mutaciones.