DailyCode #1
November 25, 2020
Hola. 👋🏼 A partir de hoy SI comienzo a publicar los DailyCode (si ya se que debí comenzar hace 2 semanas, pero se me complicaron unas cosas 😅). Pero comenzamos con el aprendizaje 🚀
Tengo pensado crear una app para seguimientos de hábitos. Será totalmente en JAMstack y utilizaré Next.js como framework, Netlify para el deploy y FaunaDB con Netlify functions para manejar la base de datos. Sin embargo, FaunaDB se maneja con GraphQL y tengo poco conocimiento de lenguaje.
Por ello, desde que anuncié el DailyCode, estoy aprendiendo GraphQL con HowToGraphQL. Completé el tutorial para el Backend y ahora me encuentro con el de frontend con React y Apollo.
Bueno, debo decir que hoy fue que comencé el tutorial. Pensaba que iba a avanzar rápido porque tengo ciertos conocimientos de React. No obstante, en ver de seguir los pasos, quise utilizar el código del tutorial del backend pasado y me compliqué la existencia yo mismo.
Luego de decidir seguir los pasos del tutorial, pude instalar todas las dependencias, re-factoricé el orden de los componentes y estilos, descargue el código del servidor, realicé un deploy de la base de datos (PrimsaDB) y agregué dos elementos a la base de datos.
Aquí te explico cómo lo hice
El tutorial del frontend consta de 10 artículos. Yo tenía planteado realizar por lo menos 4 hoy.
Sin embargo, sólo pude realizar la instalación de las dependencias e iniciar el proyecto.
yarn create react-app hackernews-react-apollo
Instalé las dependencias de Apollo Client:
yarn add apollo-boost react-apollo graphql
Entre esas dependencias, se encontraban:
apollo-boost
el cual ofrece cierta comodidad porque agrupa cierto paquetes que se necesitan cuando se utiliza Apollo Client:apollo-client
: Donde ocurre toda la mágiaapollo-cache-inmemory
: El paquete recomendado por el equipo de howtographql para realizar cache (La verdad, no tengo ni idea de para que sirve 😅)apollo-link-http
: Un Apollo Link para el manejo de data fetching remotosapollo-link-error
: Un Apollo Link para el manejo de erroresapollo-link-state
: Un Apollo Link para el manjero de estados localesgraphql-tag
: Exporta las funciones degql
para las quieries y mutaciones for your queries & mutations
react-apollo
contiene todas las funciones para poder utilizar Apollo Client con Reactgraphql
contiene la implementación de referencia de GraphQL de Facebook. Apollo Client tambien utilizar cieartas de esas funcionalidades
Descargué el servidor del proyecto:
curl https://codeload.github.com/howtographql/react-apollo/tar.gz/starter | tar -xz --strip=1 react-apollo-starter/server
Por último, realicé un deploy del servicio de base de datos de prisma:
cd server
yarn install
yarn prisma deploy
Nos Leemos
Para mañana intentaré completar 4 de los tutoriales para poder comenzar el desarrollo de la Trackable App. Cuentame si estas realizando algún proyecto y si te has encontrando algún problema en un tweet. No leemos 👋