fetchPolicy=‘cache-and-network’ va a la red y obtiene una version fresca q almacena en el cache. Este es mejor por si hay acceso offline a la app.
Introducción al curso avanzado de React
Qué necesitas para este curso y qué aprenderás sobre React.js
Proyecto y tecnologías que usaremos
Preparando el entorno de desarrollo
Clonando el repositorio e instalando Webpack
Instalación de React y Babel
Zeit es ahora Vercel
Linter, extensiones y deploy con Now
Creando la interfaz con styled-components
¿Qué es CSS-in-JS?
Creando nuestro primer componente: Category
Creando ListOfCategories y estilos globales
Usar información real de las categorías
Creando PhotoCard y usando react-icon
SVGR: de SVG a componente de ReactJS
Creando animaciones con keyframes
Hooks
¿Qué son los Hooks?
useEffect: limpiando eventos
useCategoriesData
Usando Intersection Observer
Uso de polyfill de Intersection Observer e imports dinámicos
Usando el localStorage para guardar los likes
Custom Hooks: useNearScreen y useLocalStorage
GraphQL y React Apollo
¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC
Parámetros para un query con GraphQL
Usar render Props para recuperar una foto
Refactorizando y usando variables de loading y error
Usando las mutaciones con los likes
Reach Router
¿Qué es Reach Router? Creando la ruta Home
Usando Link para evitar recargar la página
Creando la página Detail
Agregando un NavBar a nuestra app
Estilando las páginas activas
Rutas protegidas
Gestión del usuario
Introducción a React.Context
Creación del componente UserForm; y Hook useInputValue
Estilando el formulario
Mutaciones para registro
Controlar estado de carga y error al registrar un usuario
Mutaciones para iniciar sesión
Persistiendo datos en Session Storage
Hacer like como usuario registrado
Mostrar favoritos y solucionar fetch policy
Cerrar sesión
Mejores prácticas, SEO y recomendaciones
Últimos retoques a las rutas de nuestra aplicación
React Helmet
Midiendo el performance de nuestra app y usando React.memo()
React.lazy() y componente Suspense
Usando PropTypes para validar las props
PWA: generando el manifest
PWA: soporte offline
Testing con Cypress
Conclusiones
¡Felicidades!
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 26
Preguntas 6
fetchPolicy=‘cache-and-network’ va a la red y obtiene una version fresca q almacena en el cache. Este es mejor por si hay acceso offline a la app.
con hooks
/* eslint-disable import/no-extraneous-dependencies */
import { useQuery } from '@apollo/react-hooks';
import qgl from 'graphql-tag';
const GET_FAVORITES = qgl`
query getFavs {
favs {
id
categoryId
src
likes
userId
}
}
`;
const useGetFavorites = () => {
const { data, error, loading } = useQuery(GET_FAVORITES, { fetchPolicy: 'cache-and-network' });
return { data, loading, error };
};
export default useGetFavorites;
import styled from 'styled-components'
import { Link as LinkRouter } from '@reach/router'
export const Link = styled(LinkRouter)`
border-radius: 8px;
box-shadow: 0 0 8px rgba(0,0,0,.3);
display: inline-block;
margin: 1%;
overflow: hidden;
position: relative;
width: 31.33%;
&:after {
content: '';
display: block;
padding-bottom: 100%;
}
`
export const Grid = styled.div`
padding-top: 32px;
`
export const Image = styled.img`
object-fit: cover;
height: 100%;
width: 100%;
position: absolute;
Tengo un problema muy seguido me sale este error cuando entro a mi Favs page
Error GraphQL error: user does not exist
Sabran que sera?
Es como si se me borrara la base de datos de graphql 😒
26/04/2021 El codigo del video ya no funciona… Dejo el código (que se que se puede mejorar pero hasta hoy funciona…) una vez acabado el video (Y) espero le sirva a alguien
GetFavorites:
import { useQuery, gql } from '@apollo/client'
import React from 'react'
import {ListOfFavs} from '../components/ListOfFavs'
const GET_FAVORITES = gql`
query getFavs {
favs {
id
categoryId
src
likes
userId
}
}
`;
const FavsWithQuery = () => {
const { loading, data, error } = useQuery(GET_FAVORITES, {
fetchPolicy: 'cache-and-network'
})
return { loading, data, error }
};
export const RenderProp = () => {
const {loading, data, error} = FavsWithQuery();
if(loading) return <p>Loading...</p>
if(error) return <p>Error...</p>
const {favs} = data
return <ListOfFavs favs={favs} />
}
ListOfFavs y styles si funciona tal cual el video
Dejo mi aporte del uso de hooks para realizar el query GET_FAVS.
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";
const GET_FAVS = gql`
query getFavs {
favs {
id
categoryId
src
likes
userId
}
}
`;
export const useGetFavs = () => {
const { data, loading, error } = useQuery(GET_FAVS, {
fetchPolicy: "cache-and-network"
});
return { data, loading, error };
};
Hola chicos, intenté usar la nueva forma con hooks que han dejado en los comentarios, sin embargo, mi useQuery seguía sin traer los datos actualizados, así que usé useEffect y extraí la propiedad refetch de useQuery
const { loading, error, data, refetch } = useQuery(GET_FAVS_PHOTO)
useEffect(() => refetch(), [])
Básicamente estoy diciendo que vuelva a hacer un fetch cada vez que el componente se renderice. Si quieren saber cómo funciona el refetch les dejo la documentación https://www.apollographql.com/docs/react/data/queries/#refetching
Pensando en la reutilizacion de componentes, porque en lugar de crear un nuevo componente ListOfFavs que en esencia es lo mismo que el ListOfPhotoCards, no se modifica el componente (ListOfPhotoCards) para que reciba las fotos por props y se hace un hook en cada page (Home, Favs) para que obtenga las photos que se necesitan?
Creo que se esta haciendo doble trabajo.
Un aporte de como configurar el policy en los hooks
import { useQuery, gql } from '@apollo/client'
const GET_FAVS = gql`
query getFavs {
favs {
id
categoryId
src
likes
userId
}
}
`
export const useGetFavorites = id => {
const { loading, data, error } = useQuery(GET_FAVS, {
fetchPolicy: 'network-only'
})
return { loading, data, error }
}
import { Query } from '@apollo/client/react/components'
El componente QUERY a fecha de hoy julio 2021 se encuentra en esa ruta…
Así me funcionó el GetFavorities.js al día de hoy:
import { useQuery, gql } from '@apollo/client'
import React from 'react'
import { ListOfFavs } from '../components/ListOfFavs'
const GET_FAVORITES = gql`
query getFavs {
favs {
id
categoryId
src
likes
userId
}
}
`
const RenderProp = ({ loading, data, error }) => {
if (loading) return <p>Loading...</p>
if (error) return <p>Error...</p>
const { favs } = data
return <ListOfFavs favs={favs} />
}
export const FavsWithQuery = () => {
const { loading, error, data } = useQuery(GET_FAVORITES, {
fetchPolicy: 'cache-and-network'
})
return <RenderProp loading={loading} data={data} error={error} />
}
Yo reusé el componente ListOfPhotoCard (yo lo llamo ListFeedCard) de la siguiente manera:
Nota: useGetFavorites() Es mi hook para obtener los datos, uso los hooks de GraphQl
export const FavsPage = () => {
const { data, loading, error } = useGetFavorites()
const [favs, setFavs] = useState([])
useEffect(() => {
if (data) setFavs(data.favs)
}, [data])
return <ListFeedCard list={favs} error={error} loading={loading} />
}
Me esta encantando este curso, super super completo, con detalles en los errores y posibles errores! Muy contento de haberlo iniciado!
Hola Chicos, vengo del futuro y Les dejo una mejora en PhotoCardWithQuery.js para evitar pasar data empty al renderizar PhotoCard:
const renderProp = ({ loading, error, data = { photo: {} } }) => {
// if (loading) return <p>Loading... </p>
if (error) return <p>Error!</p>
if (data) {
const { photo = {} } = data
if (Object.keys(photo).length) {
return <PhotoCard {...photo} loading={loading} />
}
}
return null
}```
Esto les ayudara mas adelante cuando vean validaciones dentro de los proptypes.
Saludos 🐱🏍
Hola a todos, estoy en 05/04/2022
Ya no hay ese problema de cache, entiendo que por esta parte del codigo:
const client = new ApolloClient({
...
cache: new InMemoryCache(),
...
})
En cuanto al codigo utiliado, emplee hooks:
hooks/useGetFavs
import React from 'react'
import { ListOfFavs } from '../components/ListOfFavs';
import { useQuery, gql } from '@apollo/client';
const GET_FAVORITES = gql`
query getFavs {
favs {
id
categoryId
src
likes
userId
}
}
`;
const FavsWithQuery = () => {
const { loading, data, error } = useQuery(GET_FAVORITES, {
fetchPolicy: 'cache-and-network'
})
return { loading, data, error }
};
export const RenderProp = () => {
const {loading, data, error} = FavsWithQuery();
if(loading) return <p>Loading...</p>
if(error) return <p>Error...</p>
const {favs} = data
return <ListOfFavs favs={favs} />
}
pages/Favs
import React from 'react'
import { RenderProp } from '../hooks/useGetFavs'
export const Favs = ()=>(
<>
<h1>Favs</h1>
<RenderProp />
</>
)
components/ListOfFavs:
import React from 'react'
import { Grid, Image, Link } from './styles'
export const ListOfFavs = ({favs = []})=>{
return (
<Grid>
{
favs.map(fav=>(
<Link key={fav.id} to={`/detail/${fav.id}`} >
<Image src={fav.src} />
</Link>
))
}
</Grid>
)
}
components/ListOfFavs/styles
import styled from 'styled-components'
import { Link as LinkRouter } from 'react-router-dom'
export const Link = styled(LinkRouter)`
border-radius: 8px;
box-shadow: 0 0 8px rgba(0,0,0,.3);
display: inline-block;
margin: 1%;
overflow: hidden;
position: relative;
width: 31.33%;
&:after{
content:'';
display: block;
padding-bottom: 100%;
}
`
export const Grid = styled.div`
padding-top: 32px;
`
export const Image = styled.img`
object-fit: cover;
height: 100%;
width: 100%;
position: absolute;
`
Exitos camaradas
Hola, les dejo el avance de mi proyecto hecho en Nextjs:
Hola Devs:
-Aqui les traigo un aporte, les comparto este articulo que habla bien sobre el fetchPolicy, espero que les ayude a entender mejor y sacarle el maximo provecho: Click Aqui
Excelente!!
¿Se podría guardar los favoritos sin que se tenga que registrar?
Excelente
Como es que se le pasa el header de autenticación ??
como valida eso? automaticamente Apolo lo detecta?’
Esta solucion me parecio la mejor con hooks https://www.apollographql.com/docs/react/data/queries/#refetching
para los que vienen del curso PWA ajaj esto me hizo acordar a https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-strategies
genial!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.