Introducción al curso avanzado de React

1

Qué necesitas para este curso y qué aprenderás sobre React.js

2

Proyecto y tecnologías que usaremos

Preparando el entorno de desarrollo

3

Clonando el repositorio e instalando Webpack

4

Instalación de React y Babel

5

Zeit es ahora Vercel

6

Linter, extensiones y deploy con Now

Creando la interfaz con styled-components

7

¿Qué es CSS-in-JS?

8

Creando nuestro primer componente: Category

9

Creando ListOfCategories y estilos globales

10

Usar información real de las categorías

11

Creando PhotoCard y usando react-icon

12

SVGR: de SVG a componente de ReactJS

13

Creando animaciones con keyframes

Hooks

14

¿Qué son los Hooks?

15

useEffect: limpiando eventos

16

useCategoriesData

17

Usando Intersection Observer

18

Uso de polyfill de Intersection Observer e imports dinámicos

19

Usando el localStorage para guardar los likes

20

Custom Hooks: useNearScreen y useLocalStorage

GraphQL y React Apollo

21

¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC

22

Parámetros para un query con GraphQL

23

Usar render Props para recuperar una foto

24

Refactorizando y usando variables de loading y error

25

Usando las mutaciones con los likes

Reach Router

26

¿Qué es Reach Router? Creando la ruta Home

27

Usando Link para evitar recargar la página

28

Creando la página Detail

29

Agregando un NavBar a nuestra app

30

Estilando las páginas activas

31

Rutas protegidas

Gestión del usuario

32

Introducción a React.Context

33

Creación del componente UserForm; y Hook useInputValue

34

Estilando el formulario

35

Mutaciones para registro

36

Controlar estado de carga y error al registrar un usuario

37

Mutaciones para iniciar sesión

38

Persistiendo datos en Session Storage

39

Hacer like como usuario registrado

40

Mostrar favoritos y solucionar fetch policy

41

Cerrar sesión

Mejores prácticas, SEO y recomendaciones

42

Últimos retoques a las rutas de nuestra aplicación

43

React Helmet

44

Midiendo el performance de nuestra app y usando React.memo()

45

React.lazy() y componente Suspense

46

Usando PropTypes para validar las props

47

PWA: generando el manifest

48

PWA: soporte offline

49

Testing con Cypress

Conclusiones

50

¡Felicidades!

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

Usando las mutaciones con los likes

25/50
Recursos

El componente de mutation es otro componente importante en una aplicación Apollo. Es un componente React que proporciona una función para ejecutar una mutation de GraphQL para así alterar la data. Además, rastrea el estado de carga, finalización y error de esa mutación.

Aportes 43

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

realmente el dominio del framework del profesor es increíble!

Actualmente la libreria apollo se implementa como @apollo/client y esta super genial usarla como un custom hook. Les comparto el codigo

import { useMutation, gql } from '@apollo/client'
const MUTATION_LIKE_PHOTO = gql`
mutation likeAnonymousPhoto($input: LikePhoto!) {
    likeAnonymousPhoto(input: $input) {
      id,
      liked,
      likes
    }
  }
`
export const useMuationToogleLike = () => {
  const [mutation, { loading: mutationLoading, error: mutationError }] = useMutation(MUTATION_LIKE_PHOTO)
  return { mutation, mutationLoading, mutationError }
}

Para usarlo lo hacen asi

import React from 'react'
import { ImgWrapper, Img, Article } from './styles'
import { useLocalStorage } from '../hooks/useLocalStorage'
import { useNearScreen } from '../hooks/useNearScreen'
import { useMuationToogleLike } from '../hooks/useMutationToogleLike'
import { FavButton } from '../FavButton'
const DEFAULT_IMAGE = 'https://res.cloudinary.com/midudev/image/upload/w_300/q_80/v1560262103/dogs.png'

export const PhotoCard = ({ id, likes = 0, src = DEFAULT_IMAGE }) => {
  const [show, element] = useNearScreen()
  const { mutation, mutationLoading, mutationError } = useMuationToogleLike()
  const key = `like-${id}`
  const [liked, setLiked] = useLocalStorage(key, false)
  const handleFavClick = () => {
    !liked && mutation({
      variables: {
        input: { id }
      }
    })
    setLiked(!liked)
  }
  // console.log('{ mutation, mutationLoading, mutationError }', { mutation, mutationLoading, mutationError })

  return (
    <Article ref={element}>
      {
        show && <>
          <a href={`/?detail=${id}`}>
            <ImgWrapper>
              <Img src={src} />
            </ImgWrapper>
          </a>
          <FavButton
            liked={liked} likes={likes}
            onClick={handleFavClick} />
        </>
      }

    </Article>
  )
}
const LIKE_PHOTO = gql`
mutation likeAnonymousPhoto($input: LikePhoto!) {
  likeAnonymousPhoto(input: $input) {
    id,
    liked,
    likes
  }
}
`

JAJA ni phuhta idea de que hace el profe jajaja

Mi meta es llegar a entender y dominar reactJs de la misma forma en la que explica este profesor es excelente.

Somos varios los que pensamos que el curso está bastante desactualizado por lo menos respecto a Apollo.
Así mismo y solo a título personal, me parece algo interesante tener que apelar a estudiar un poco la librería de Apollo para transformar lo que se da en el curso, pero no creo que deba ser así y hay bastante malestar en los estudiantes que están tomando el curso en este 2021, por lo menos de la segunda mitad.

Mi version con hooks. Me base en https://www.apollographql.com/docs/react/data/mutations/#executing-a-mutation

useLikePhoto

import { gql, useMutation } from '@apollo/client'

export const useLikePhoto = (id) => {
  const LIKE_PHOTO = gql`
    mutation likeAnonymousPhoto($input: LikePhoto!) {
      likeAnonymousPhoto(input: $input) {
        id
        liked
        likes
      }
    }
  `
  const [toggleLike] = useMutation(LIKE_PHOTO)
  return [toggleLike]
}

**PhotoCard **

  const [toggleLike] = useLikePhoto()
  const handleFavButtonClick = () => {
    console.log(`id de la photo ${id}`)
    setLiked(!liked)
    toggleLike({ variables: { input: { id: id } } })
  }

Para los que quieran hacerlo con apollo hooks os dejo el código del componente completo

import React, { useEffect, useRef, useState } from 'react'

import { gql } from 'apollo-boost'
import { useMutation } from '@apollo/react-hooks'

const DEFAULT_IMAGE =
  'https://res.cloudinary.com/midudev/image/upload/w_300/q_80/v1560262103/dogs.png'

// Styles
import { Article, ImgContainer, Img, Button, Span } from './styles'

// Hooks
import useLocalStorage from '../../hooks/useLocalStorage'
import useNearScreen from '../../hooks/useNearScreen'

// Import const TOGGLE_LIKE
const TOGGLE_LIKE = gql`
  mutation likeAnonymousPhoto($input: LikePhoto!) {
    likeAnonymousPhoto(input: $input) {
      id
      liked
      likes
    }
  }
`

import { IoIosHeartEmpty, IoIosHeart } from 'react-icons/io'

/* -------------------------------------------------------------------------- */
/*                                  Component                                 */
/* -------------------------------------------------------------------------- */

export const PhotoCard = ({ id, likes = 0, src = DEFAULT_IMAGE }) => {
  const [liked, setLiked] = useLocalStorage(id, false)
  const [toggleLike] = useMutation(TOGGLE_LIKE, {
    variables: { input: { id } },
  })
  const [show, ref] = useNearScreen()

  const Icon = liked ? IoIosHeart : IoIosHeartEmpty

  const handleFavClick = () => {
    setLiked(!liked)
    toggleLike()
  }
  return (
    <Article ref={ref}>
      {show ? (
        <>
          <a href={`/?detail=${id}`}>
            <ImgContainer id="img__container">
              <Img src={src} alt="" />
            </ImgContainer>
          </a>
          <Button onClick={handleFavClick}>
            <Icon size="25px" />
            {likes}
            <Span>¡Dislike!</Span>
          </Button>
        </>
      ) : (
        <></>
      )}
    </Article>
  )
}

Mi código con useMutation, el hook de react apollo para las mutaciones.

const [toggleLike] = useMutation(TOOGLE_LIKE, { variables: { input: { id } } });

const handleFavClick = () => {
  toggleLike()
  setLiked(!liked)
 }

Podríamos mejorar el nombramiento de algunas variables/params dependiendo del tipo de valor que se aloje en ellas. Por ejemplo: “liked” podría ser “isLiked” y daría a entender que es un valor booleano.

Lee más sobre Clean Code aquí.

Como podriamos hacer para que disminuya el numero de likes?

Estoy usando react apollo y tuve algunos problemas para llevar acabo este ejercicio, seguramente se pueda mejorar pero asi lo resolvi

PhotoCard

import React from 'react'
import {
  ImgWrapper,
  Img,
  Article
} from './styles'
import { useLocalStorage } from '../../hooks/useLocalStorage'
import { useNearScreen } from '../../hooks/useNearScreen'
import { FavButton } from '../FavButton/index'
import { UseLikeMutation } from '../../graphql/useToggleLikeMutation'

const DEFAULT_IMAGE = 'https://res.cloudinary.com/midudev/image/upload/w_300/q_80/v1560262103/dogs.png'

export const PhotoCard = ({ id, likes = 0, src = DEFAULT_IMAGE }) => {
  const key = `like-${id}`
  const [liked, setLiked] = useLocalStorage(key, false)
  const [show, ref] = useNearScreen()
  const { toggleLikePhoto } = UseLikeMutation()

  const handleFavClick = () => {
    setLiked(!liked)
    toggleLikePhoto({
      variables: {
        input: { id }
      }
    })
  }

  return (
    <Article ref={ref}>
      {show && (
        <>
          <a
            href={`/detail/${id}`}
          >
            <ImgWrapper>
              <Img src={src} />
            </ImgWrapper>
          </a>
          <FavButton
            liked={liked}
            likes={likes}
            onClick={handleFavClick}
          />
        </>
      )}
    </Article>
  )
}

useLikeMutations

import { useMutation } from '@apollo/client'
import { gql } from 'apollo-boost'

const LIKE_PHOTO = gql`
  mutation likeAnonymousPhoto($input: LikePhoto!) {
    likeAnonymousPhoto(input: $input) {
      id,
      liked,
      likes
    }
  }
`
export const UseLikeMutation = () => {
  const [toggleLikePhoto] = useMutation(LIKE_PHOTO)

  return { toggleLikePhoto }
}

Es un curso muy bueno, pero todo lo de Apollo ya está desactualizado. La api actual de Apollo hace todo con hooks. Creo que este curso debe actualizarse o hacer un curso de Apollo que non hay

si cambiaste las dependencias apollo-boots y react-apollo por la dependencia @apollo/client
Para realizar la importación de Mutation seria de la siguiente forma:

import { Mutation } from '@apollo/client/react/components'
import { gql } from '@apollo/client'

para que puedas seguir realizando el curso de la misma forma que el profesor.

con hook react pollo
-useToggleLikeMutation.jsx

import { useMutation } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const LIKE_PHOTO = gql`
mutation likeAnonymousPhoto($input: LikePhoto!) {
    likeAnonymousPhoto(input: $input) {
      id,
      liked,
      likes
    }
  }
`;

const useToggleLikeMutation = (id) => {
  const [toggleLikePhoto] = useMutation(LIKE_PHOTO, { variables: { input: { id } } });
  return { toggleLikePhoto };
};

export default useToggleLikeMutation;```

Sigo pensando lo mismo que cuando empecé el curso. Muy desactualizado.

Ya no se si seguir con el curso, o dejarlo aquí, esta repleto de errores

Como sé que el nombre de la función debe ser toggleLike? no me quedó claro

import { Mutation } from '@apollo/client/react/components';

Desde aquí recuperamos el Componente Mutation hoy en día con “@apollo/client”

Interesante React Apollo se pdoria decir que te permite hacer lo que harias con Firebase

Cambio muchismo la forma en como se realiza esto hoy con apollo, dejo la forma en que lo implemente, pero en serio deberian actualizar el curso

import React, { FC } from "react";
import { Img, ImgWrapper, Article } from "./styles";
import { useLocalStorage } from "../../hooks/useLocalStorage";
import { useNearScreen } from "../../hooks/useNearScrean";
import { FavButton } from "../FavButton";
import { useMutation } from "@apollo/client";
import { LIKE_PHOTO } from "../container/ToggleLikeMutation";
type props = {
  id?: string;
  likes?: number;
  src?: string;
};

export const PhotoCard: FC<props> = ({ id, likes = 0, src }) => {
  const key = `like-${id}`;
  const [liked, setLiked] = useLocalStorage(key, false);
  const [show, elementRef] = useNearScreen();
  const [mutateFunction, { data, loading, error }] = useMutation(LIKE_PHOTO);

  const handleFavClick = () => {
    !liked && mutateFunction({ variables: { input: { id } } });
    setLiked(!liked);
  };
  //if (loading) return <p>Validando...</p>;
  if (error) return <p>Submission error! ${error.message}</p>;

  return (
    <Article ref={elementRef}>
      {show && (
        <>
          <ImgWrapper href={`/?detail=${id}`}>
            <div>
              <Img src={src} />
            </div>
          </ImgWrapper>
          <FavButton liked={liked} likes={likes} onClick={handleFavClick} />
        </>
      )}
    </Article>
  );
};

lo malo es que si le doy dislike no se descuenta

Hola, les dejo el avance del curso hasta este punto, hecho en Nextjs:

https://github.com/danyel117/petgram-platzi/tree/likemutation

no entiendo de donde sale toggleLike? aiuda

Les quiero compartir como hacer la mutation con hook

creo que me gusta mas redux jaja

Graphql me recuerda un poco a Mongoose

Alguien sabe como solucionar el siguiente error?
mutationError: Error: you must be logged in to perform this action at new t (…) at Object.next

Yo tampo entiendo de donde sale - toggleLike. ?

Es mi primer curso en platzi, y veo muy desactualizado este curso y también la vista de la grabación es incómoda con la barra exploradora abierta todo el tiempo.

Anter era muy engorroso hacer peticiones a graphql con hooks todo mas limpio y sencillo.

Me trono la cabeza con esta clase 🤯

No me quedo realmente claro, en que momento le decimos a graphql que debe aumentar un numero los likes?

Maravillado con el dinamismo que propone react con graphql, espero realizar un proyecto así algún día

totalmente extaciado con react-apollo

Esta clase fue un poco más confusa, para mi…🤦🏽‍♀️ figuró repetir el video

Increible el poder y el alcance que tiene react apollo y graphql. Me queda un poco la duda de como funciona mutation, pero creo que pasaré por el curso de graph para aprenderlo más, quedé enamorado

que locura de clase, se le nota la experiencia y el dominio del tema

Cuándo quitamos el like como podemos hacer que el contador baje uno?

No entendi esta claseee

a

Wuuaooo, super interesante este tema. espero ser uan expert en React. ❤️