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!

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

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

21/50
Recursos

GraphQL es un lenguaje creado por Facebook para obtener solo los datos que necesitamos en nuestra aplicación. Imaginemos que tenemos una REST API con WordPress, él nos entrega un JSON con mucha data innecesaria y solo queremos unos cuantos fields; GraphQL hace posible obtener únicamente esa data.

React Apollo es un cliente que nos va a permitir conectarnos a un servidor GraphQL.

Vamos a instalar npm i apollo-boost, una utilidad que nos permite inicializar nuestra conexión con un servidor de Apollo muy rápidamente y sin configuración, necesitaremos npm i react-apollo el cual es la integración de Apollo con React y finalmente npm i graphql.

Configuraremos nuestro index.js para inicializar nuestro cliente de Apollo con GraphQL de la siguiente manera:

// index.js

{/*...*/}
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'

{/*...*/}

const client = new ApolloClient({
        uri: 'URL_DEL_BACKEND' // En el proyecto usamos https://petgram-server.midudev.now.sh/graphql aquí debes colocar el tuyo
})

ReactDOM.render(
        <ApolloProvider client={client}>
                <App />
        ApolloProvider>,
        document.getElementById('app')
)

Aportes 58

Preguntas 22

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Actualización a Dic-2020

Ahora se importa una única dependencia de Apollo y GraphQL

npm install @apollo/client graphql

Luego en el index principal

//DEPENDENCIES
import React from "react";
import ReactDOM from "react-dom";
import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";

//APP
import App from "./App";

const client = new ApolloClient({
  uri: "https://petgram-server-clgg.vercel.app/graphql",
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,

  document.getElementById("App")
);

Y en ListOfPhotocards

//DEPENDENCIES
import React from "react";
import { useQuery, gql } from "@apollo/client";

//COMPONENTS
import { PhotoCard } from "../PhotoCard";

const whitPhotos = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`;

export const ListOfPhotoCards = () => {
  const { loading, error, data } = useQuery(whitPhotos);

  if (error) {
    return <h2>Internal Server Error</h2>;
  }
  if (loading) {
    return <h2>Loading...</h2>;
  }

  return (
    <ul>
      {data.photos.map((photo) => (
        <PhotoCard key={photo.id} {...photo} />
      ))}
    </ul>
  );
};

😉

Para aquellos que quieran utilizar la nueva característica de Apollo Client utilizando hooks quedaría así:

<h3>Dependencias</h3>
npm install apollo-boost @apollo/react-hooks graphql
<h3>index.js</h3>
// Dependencies
import React from 'react'
import ReactDOM from 'react-dom'
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from '@apollo/react-hooks'

// Components
import { App } from './App'

const client = new ApolloClient({
  uri: 'https://petgram-server-jrmfsd-okxluew9o.now.sh/graphql'
})

ReactDOM.render(
  // eslint-disable-next-line react/jsx-filename-extension
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('app')
)
<h3>ListOfPhotoCards component</h3>
import React from 'react'

import { useQuery } from '@apollo/react-hooks'
import { gql } from 'apollo-boost'
import { PhotoCard } from '../PhotoCard'
import { DotSpinner } from '../Spinner'

const getPhotos = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`

export const ListOfPhotoCards = () => {
  const { loading, error, data } = useQuery(getPhotos)

  if (loading) return <DotSpinner />
  if (error) return <p>Error</p>

  return (
    <ul>
      {data.photos.map((photoCard, id) => (
        <PhotoCard key={id} {...photoCard} />
      ))}
    </ul>
  )
}

Hasta ahora hay un pequeño cambio al importar librerías

Para la instalacion

npm install apollo-boost @apollo/react-hooks graphql

index.js

import { ApolloProvider } from '@apollo/react-hooks';

<ApolloProvider client={client}><App /></ApolloProvider>

hacer la query

useQuery(gql(``))

Al dia de hoy 7-12-2021 ahora solo es necesario instalar estas dependencias:

npm install @apollo/client graphql

Estas estan en la Documentación oficial de Apollo, para importar las dependencias se hace así

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider
} from '@apollo/client'

para inicializar el cliente es así

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
  cache: new InMemoryCache()
})

y para conectar el cliente con React se hace de la siguiente forma

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('app')
)

Esta es la nueva forma de inicial el client de Apollo

import React from 'react'
import ReactDom from 'react-dom'
import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'

import { App } from './App'

const cache = new InMemoryCache()

const link = new HttpLink({
    uri: 'https://petgram-server-jcamacaro.camacaro.now.sh/graphql'
})

const client = new ApolloClient({
    cache,
    link
})

// ReactDom.render(<App/>, document.getElementById('app'))

ReactDom.render(
    <ApolloProvider client={client}>
        <App/>
    </ApolloProvider>, 
document.getElementById('app'))

Ahora hay una nueva forma de hacerlo y mucho más fácil, veamos:
Primero debemos instalar dos dependencias:
npm install @apollo/client graphql
@apollo/client contiene todo lo que se necesita para configurar ApolloClient y más.
@graphql proporciona la lógica para analizar consultas GraphQL.
.
Ahora en nuestro index.js realizamos lo siguiente:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

import App from './App';

const client = new ApolloClient({
  uri: 'https://petsgram-server-mappedev-339gmifsh.vercel.app/graphql',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('app')
);

InMemoryCache nos permite guardar los datos solicitados en cache.
.
Por último realizamos la query en nuestro componente y renderizamos cada elemento de la data obtenida:

import React from 'react';

import PhotoCard from '../PhotoCard';

import { gql, useQuery } from '@apollo/client';

const GET_PHOTOS = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`;

export default function ListOfPhotoCards() {
  const { loading, error, data } = useQuery(GET_PHOTOS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!!!</p>;

  return (
    <ul>
      {data.photos.map((photo) => (
        <li key={photo.id}>
          <PhotoCard id={photo.id} likes={photo.likes} src={photo.src} />
        </li>
      ))}
    </ul>
  );
}

.
Espero que les haya servidor, si desean más información pueden revisar la documentación que está más detallada.

Como sabrán el curso está desactualizado con algunas cosas, así que les dejo la solución que yo implementé.

  1. Instalen las dependencias de @apollo/client
  2. En el index.js (el global) importan todo desde @apollo/client así :
import React from 'react'
import ReactDOM from 'react-dom'
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client' // ASÍ
import { App } from './App'

const client = new ApolloClient({
  uri: 'TU URL DE VERCEL',
  cache: new InMemoryCache()
})

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>, document.getElementById('app'))
  1. En el componente ListOfPhotoCards.js importan useQuery y gql de @apollo/client y el resto del código es entendible:
import React from 'react'
import { useQuery, gql } from '@apollo/client'
import { PhotoCard } from '../PhotoCard'

const ANIMALS_QUERY = gql`
  query getPhotos {
      photos {
      id
      categoryId
      src
      likes
      userId
      liked
      }
  }
`

export const ListOfPhotoCards = () => {
  const { data, loading, error } = useQuery(ANIMALS_QUERY)  // destructuras la data y el estado de loading y error 
  if (loading) return 'Loading...' // manejas el estado para que no te saque error mientras hace el fetch
  if (error) return <pre>{error.message}</pre>
  return (
    <ul>
      {data.photos.map(photo => <PhotoCard key={photo.id} {...photo} />)}
    </ul>
  )
}
  1. Y eso es todo amigos, lo vi en https://www.freecodecamp.org/news/5-ways-to-fetch-data-react-graphql/

  2. Recuerden que las tecnologías cambian todos los días.

Esta increible 😱, ya tengo un poco de experiencia en react y haber hecho el proyecto por sin antes tomar el curso, puff quedaria menos entendible, una carpeta con todos mi componentes, y sin crear customHooks. Realmente estoy muy contento de todas las buenas prácticas que he aprendido, el código está súper limpio, fácil de entender 😃. También aprendí a integrar GraphQL que es una tecnología que no sabía como integrar a react sin gatsby 👍

Hola 👋
A los que van justos => mi consejo es instalar las dependencias igual que el profe para seguir avanzando (a pesar que están desactualizadas).
En cuanto a la uri de cliente, a mi me sirvió: https://petgram-server-clgg.vercel.app/graphql
Un saludo

Sin duda, prefiero acceder a los datos con render props, o mejor aun, con los Hooks de graphql!!! https://blog.apollographql.com/apollo-client-now-with-react-hooks-676d116eeae2

3:48 es uri no url, cuidado con eso si estan haciendolo manual y no copiandolo porque les da un error!

ListOfPhotoCards usando @apollo/client

import React from 'react'
import { useQuery, gql } from '@apollo/client'
import { PhotoCard } from '../PhotoCard'

const whitPhotos = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`

export const ListOfPhotoCards = () => {
  const { loading, error, data } = useQuery(whitPhotos)

  if (error) {
    return <h2>Internal Server Error</h2>
  }
  if (loading) {
    return <h2>Loading...</h2>
  }

  return (
    <ul>
      {data.photos.map((photo) => (
        <PhotoCard key={photo.id} {...photo} />
      ))}
    </ul>
  )
}

es posible envolver redux dentro de un apollo provider?

💚

import { useQuery, gql } from '@apollo/client'
import { PhotoCard } from '../PhotoCard'
import { Skeleton } from '@material-ui/lab'

const withPhotos = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`

export const ListOfPhotoCards = () => {
  const { loading, error, data } = useQuery(withPhotos)

  if (error) return <h2>Internal Server Error...</h2>
  return (
    <ul>
      {loading ? (
        [1, 2, 3].map(idx =>
          <Skeleton
            width={`100%`}
            height={262}
            animation='wave'
            key={idx}
          />
        )
      ) : (
        data.photos.map(photo => <PhotoCard key={photo.id} {...photo} />)
      )}
    </ul>
  )
}

Hola, tengo problemas de CORS en Now. Alguien puede ayudarme?

Ahora todo esta en @apollo/client

npm install @apollo/client graphql

import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
    uri: "https://petgram-server-9kncf4ueo-gvargas.vercel.app/graphql",
    cache: new InMemoryCache()
});

ReactDOM.render(
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>,
    document.getElementById("app")
);

import React from 'react'
import { useQuery, gql } from '@apollo/client';
import { PhotoCard } from '../PhotoCard'

const LIST_OF_PHOTO_CARDS = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`

export const ListOfPhotoCards = () => {
  const  { loading, error, data } = useQuery(LIST_OF_PHOTO_CARDS);
  console.log(`🚀 ~ file: index.js ~ line 20 ~ ListOfPhotoCards ~ data`, data)


  return (
    <ul>
      {[1, 2, 3, 4, 5, 6, 7].map(id => <PhotoCard key={id} id={id} />)}
    </ul>
  )
}

Hagan un curso de como usar NestJS para NodeJS, me encantaría hacer el backend de este curso en ese framework:

https://nestjs.com/

Y qué pasa si se está usando redux también envuelve a app, entonces me imagino que su high order component es apollo > redux > app ?? 😕

Esta clase deberia estar en Youtube ❤️!

Si estan usando la ultima version de Apollo posiblemente les de error asi que les dejo de la forma en que hice usanado lo de la ultima version de apollo

import React from 'react';
import { PhotoCard } from '../PhotoCard';
import { gql, useQuery } from '@apollo/client';

export const ListOfPhotoCards = () => {

  const { loading, error, data } = useQuery(whithPhotos);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  const photos = data.photos;

  return (
    <ul>
      {photos.map(photo => <PhotoCard key={photo.id} {...photo} />)}
    </ul>
  )
}

const whithPhotos = gql`
query getPhotos{
  photos{
    id
    categoryId
    src
    likes
    userId
    liked
  }
}
`;

[email protected], atención al escribir código!!
Siguiendo el curso confundí boost con boots 😱

Mucho cuidado aquí!

Deben de importar Apollo Client como

import ApolloClient from 'apollo-boost'

Y no se manera nombrada como muchos comentarios dicen mas abajo:

import { ApolloClient } from'apollo-boost'

Si lo hacen así podrán seguir el curso con el mismo código, de lo contrario tendrán problemas mas adelante, vengo del futuro, el profesor resolvió una duda similar hace tiempo aqui

Gracias profe, otra pregunta es mejor usar graphql en la capa de React JS con Apollo o en la capa de Express con express-graphql y cual es la diferencia de performance entre ellas??

Me salió este error en la inicialización del cliente.
Dice que debo especificar el link y el caché, pero Miguel Ángel sólo especificó el link.

En la documentación encontré esta forma de inicializar el cliente
instalé dos nuevas dependencias apollo-cache-inmemory y apollo-link-http

npm i apollo-cache-inmemory apollo-link-http -S

Y así las usé

import React from 'react'
import ReactDOM from 'react-dom'
import { ApolloClient } from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
import { App } from './App'

const cache = new InMemoryCache()
const link = new HttpLink({
  uri: 'https://petgram-api-spark.now.sh/graphql'
})

const client = new ApolloClient({
  cache,
  link
})

Si alguien sabe si no es necesario instalar las dos nuevas dependencias me avisa porfa.
O si hay otra forma más sencilla

Al día de hoy la documentación recomenienda usar @apollo/react-hooks
https://www.apollographql.com/docs/react/get-started/#connect-your-client-to-react

import React from 'react';
import { render } from 'react-dom';

import { ApolloProvider } from '@apollo/react-hooks';

const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h2>My first Apollo app 🚀</h2>
    </div>
  </ApolloProvider>
);

render(<App />, document.getElementById('root'));

Me tiene intrigada esa medalla que tiene el profe en su IDE ajajja #LOL

No entiendo como se llega a esta dirección en index.js, entiendo que cada uno debe tener la suya personal, pero como se genera ese /graphql con los datos? No se si me explico, yo tengo mi link de vercel, pero simplemente agregandole /graphql al final no me funciona

const client = new ApolloClient({
uri: “>>esta<<”,
});

Genial

Si revias las dependencias react-apollo y apollo-boost puedes sustituiras instalando solo npm i @apollo/client

las importaciones y el client en index.js seria de la siguiente forma:

import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'

const client = new ApolloClient({
  uri: 'https://petgram-server.midudev.now.sh/graphql',
  cache: new InMemoryCache(),
})

y las importaciones de ListOfPhotoCards serian de la siguiente manera:

import { graphql } from '@apollo/client/react/hoc';
import { gql } from '@apollo/client';


Que tanto sentido tendria usar GraphQL si yo soy el que construye tambien la API REST ?

Yo lo hice de la siguiente manera, vi que en la documentacion https://www.apollographql.com/docs/react/get-started/
se podia extraer todo lo necesario desde un import sin tener que usar uno distinto para el client como para el provider ademas de tener los hooks

import React from 'react'
import { render } from 'react-dom'
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'
import App from './App'

const client = new ApolloClient({
  uri: 'https://petgram-server-anthony-3vrjckvsb.vercel.app/graphql',
  cache: new InMemoryCache()
})

render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('app')
)

me aparece este error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

A alguien le ocurre? cómo puedo resolverlo? estoy buscando en stackoverflow pero no he tenido suerte con las respuestas que sugieren

Es mágico, no comparo que tan amigable sea en proyectos grandes, pero se ve muy profesional e intuible

Para los que no gusten de importar librerias de 3ros, con solo importar
npm i @apollo/client se puede conseguir el mismo resultado.

Dejo documentacion:
https://www.apollographql.com/docs/react/get-started/
https://www.apollographql.com/docs/react/api/react/hooks/#function-signature

vengo por apollo pero este profesor es muy bueno, en un rato tomaré esta curso!

me sale este error:
.
`Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of App.
in App
in ApolloProvider`
.
y este:

`Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of App.`
.
copie el codigo igual al profe y me sigue dando error, quien me ayuda?

npm i apollo-boost react-apollo graphql

Si quieren validar los tipos que manejan su componente y asignarle valores por default, pueden utilizar los propTypes.
Si no utilizas typescript, con los propTypes puedes validar los tipos.

https://es.reactjs.org/docs/typechecking-with-proptypes.html

Cuando se usa GraphQL y React Apollo es necesario utilizar alguna herramienta adicional para manejar el estado general de la app? algo asi como redux o React context…

Yo tengo un problema con los Styles, cuando ya hice la carga todo el css del PhotoCard se rompe 😕 o no esta reconociendo los estilos.

React Apollo es un cliente que nos va a permitir conectarnos a un servidor GraphQL.

![](

Puden usar el loading para saber cuando la información ya ha sido cargada

Por problemas con la instalación inicial del repositorio, preferí montar todo sobre react-create-app, y cómo el link graphql usaba now para hacer el deploy y ahora existe vercel, todo esto genera confusión al momento de trabajar en el curso.

Simplemente yo decidí correr en local el api y me funciona bien.

npm run start dev:api

Vamos a instalar npm i apollo-boost, una utilidad que nos permite inicializar nuestra conexión con un servidor de Apollo muy rápidamente y sin configuración, necesitaremos npm i react-apollo el cual es la integración de Apollo con React y finalmente npm i graphql.

GraphQL es un lenguaje creado por Facebook para obtener solo los datos que necesitamos en nuestra aplicación. Imaginemos que tenemos una REST API con WordPress, él nos entrega un JSON con mucha data innecesaria y solo queremos unos cuantos fields; GraphQL hace posible obtener únicamente esa data.

Configuraremos nuestro index.js para inicializar nuestro cliente de Apollo con GraphQL de la siguiente manera:

// index.js

{//}
import ApolloClient from 'apollo-boost’
import { ApolloProvider } from ‘react-apollo’

{//}

const client = new ApolloClient({
uri: ‘URL_DEL_BACKEND’ // En el proyecto usamos https://petgram-server.midudev.now.sh/graphql aquí debes colocar el tuyo
})

ReactDOM.render(
<ApolloProvider client={client}>
<App />
ApolloProvider>,
document.getElementById(‘app’)
)

Esta muy bueno GraphQL

WOW

No me queda claro como saber de forma genérica como construir una consulta en graphql, o como estructuro mi data para esto

Bueno yo use

npm install @apollo/react-hooks

Y use el customSkeleton pasandole una prop que basicamente cambia el diseño a cuadrado

import React from 'react'
import { PhotoCard } from '../PhotoCard/index'
import { useQuery } from '@apollo/react-hooks'
import { gql } from 'apollo-boost'
import {
  ListSkeleton,
  ListSkeletonBody,
  ListSkeletonPhoto
} from '../../styles/categorySkeleton'

const getPhotos = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`

export const ListOfPhotoCard = () => {
  const { loading, error, data } = useQuery(getPhotos)

  if (error) console.log(error)

  return (
    <ul>
      {
        loading
          ? [1, 2, 3].map((key) =>
            <ListSkeleton key={key}>
              <ListSkeletonPhoto square />
              <ListSkeletonBody square />
            </ListSkeleton>
          )
          : data.photos.map((element, key) =>
            <PhotoCard key={key} {...element} />
          )
      }
    </ul>
  )
}

¿en cuál curso de Platzi aprendemos cómo hacer una API como la de Petgram?

Hola, qué tal? Vengo arrastrando errores con todo lo que fue el deploy de vercel. Alguien me da una mano para hacer el paso a paso de esto?

se está complicando… eso es bueno!

Genial, una conexión nativa con graphql y herramientas para cualquier demo!!!

Hola, les dejo el avance de mi repositorio para este proyecto hecho en Next.js:

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

Genial, muy interesante todo. Gracias!!

Hola, tengo un problema en mi app, en la consola me aparece que tengo un problema de tipo post y no cargan las fotos que deberían venir de la url, si saben como solucionarlo me ayudarían mucho,
Ya cambie de url y ni así cambia