Headless Wordpress with React & GraphQL
- 1. HEADLESSWORDPRESS Como crear una SPA con React y GraphQL utilizando la API de Wordpress
- 3. WP - THE GOOD PARTS /El CMS más utilizado (*) ● 30% de todos los sitios en Internet corren sobre Wordpress ● 60% del market share dentro de los CMS ○ Le siguen Joomla, Drupal con el 6.3% y 4.3% respectivamente. /Sitios productivos (**) ● Sitios trackeados activos: 26.701.222 ● Sitios en el top 1 million: 239.139 (*) Datos extraídos de w3techs.com - Fecha: 12 de Marzo 2018 (**) Most popular CMS one by one - websitesetup.org - Fecha: 19 de Diciembre de 2017 /Otros puntos importantes ● Admin fácil de usar para usuarios no técnicos. ● Comunidad ● Galería de plugins. ● Actualizaciones periódicas. ● Muchos de nuestros clientes ya están familiarizados con WP.
- 4. /Otros puntos importantes ● Plataforma vulnerable ● Plugins con calidad cuestionable ● Theme custom no es una tarea trivial ● Sin sistema de building por defecto WP - THE UGLY /Arquitectura ● PHP no es JS :) ● Alta dependencia con la BD. ● No está pensado para: ○ versionadores de código. ○ mecanismo de despliegues automáticos ● Arquitectura compleja de páginas: https://developer.wordpress.org/files/2014 /10/wp-hierarchy.png
- 5. GraphQL
- 7. “The graph represents the relationships between the various pieces of data that we have and the entities (Project, User) we’re trying to represent.” Resultado COMO FUNCIONA? Esquema Query
- 8. ● Fuertemente tipado ○ Documentación y descubrimiento de API ● API adaptable ○ Evolucionar APIs sin romper código ● Relacionar recursos en una query ○ Obtener varios recursos en un solo llamado a la API ● Obtener solo lo que necesita el cliente CARACTERISTICAS /Que se necesita para utilizar GraphQL? ● GraphQL server ● GraphQL client ○ No es obligatorio, pero si recomendado ● Múltiples fuentes de datos
- 9. ● Describe la data con esquemas. ● Posee “resolvers” que permiten acceder a las diferentes entidades. ● Pasa la info de autenticación hacia el/los backends. ● Expone un endpoint HTTP en donde el body se utiliza para enviar las queries o mutaciones. GraphQL SERVER?
- 10. WPGraphQL
- 11. /Estado actual ● En desarrollo activo ○ Help wanted! ● Release 1.0 - 80% /Ver ejemplo 1 ● Sitio WP ● GraphiQL WPGraphQL /Data de WP ● Posts ○ Categorías ● Pages ○ Estructura jerárquica. ● Usuarios ● Media files ● Settings ● Permite extender el esquema: ○ Custom types ○ 3rd party plugins “A free, open-source WordPress plugin that provides an extendable GraphQL schema and API for any WordPress site.”
- 12. ApolloClient
- 13. (*) Fuente Graphcool blog. GraphQL CLIENT? ● Backend GraphQL puede ser accedido por un request HTTP normal. ● Desafíos recurrentes con GraphQL: ○ Integración con el framework front-end ○ Manejo de cache ■ Almacenamiento de respuestas ■ Consistencia después de mutación ○ Suscripciones real-time ○ Paginación de colecciones Alternativas: ● Apollo Client ● Relay by facebook ● Graphql Request ● Lokka < graphql client alternatives />
- 14. FEATURES Por qué Apollo Client? ● Fácil de configurar y empezar a utilizar ● Agnóstico del framework front-end ● Trabaja con cualquier esquema ● Flexible < apollo client /> Más allá de que WPGraphQL esté implementado con Relay en el server “Apollo Client is the ultra-flexible, community-driven GraphQL client for React, JavaScript, and native platforms.”
- 16. /Setup ● Plug n’ play ● Reutilizable para otros sitios Wordpress /General ● Experiencia Single Page ● Utilizar tecnologías modernas ○ React, GraphQL, Apollo Client, React Router 4, Webpack, Sass ● Developer happiness :D ● Simple de mantener / extender ● No usar themes de Wordpress POC OBJETIVOS /Performance ● Payloads ahorrar ancho de banda ● SPA ahorrar requests /SEO ● Mantener estructura de URLs ● Crawler Bots (*) /Content Management ● No modificar contenido en WP. ● Imágenes existentes en WP
- 17. /Setup ● Link: graphql endpoint ● Cache: Almacena data normalizada y aplanada /Tipos de Cache ● apollo-cache-persist (*) ○ InMemoryCache (default) ○ Hermes Apollo Client SETUP
- 18. /Ejemplos ● graphql HOC ○ Wrapea componentes ○ Se encarga de: ■ Fetching ■ Dejar disponible el resultado a través de las props /Como realizar queries GraphQL? GraphQL QUERIES ● gql ○ Es un template literal tag para escribir queries ○ Las queries son parseadas a un GraphQL AST
- 19. /Data, loading y errores ● props.data tiene las propiedades inyectadas por el HOC ○ loading: true | false ○ error ○ pages: el resultado de la query ● Demo 2 React Component
- 20. Navegación React Router - Demo 3
- 21. (*) Pagination with Relay Cursors Paginación GraphQL ● Demo 4 /Fetch next page ● Método “fetchMore” inyectado por graphql HOC. ● Argumentos: ○ variables ○ updateQuery ● updateQuery ( ) ○ Agrega los resultados de la página nueva a la misma colección
- 22. Demo Final
- 23. /Highlights ● Experimentación: ○ Otra forma de hacer las cosas ● Apollo GraphQL ○ Client ○ Server ● WPGraphQL o WP Rest API ● Repo con App React: ○ nanlabs/wp-react-graphql TAKEAWAYS /Links de interés ● Cómo integrar Redux con Apollo Client? ● Cache persistence for Apollo Client 2.0 ● Como implementar un resolver? ● SEO en apps React ● Best practices de Clientes GraphQL ○ Artículo
- 24. /NaNLABS ● Not a Number ● nan-labs.com CHIVOS /HOMBRE ESPIRITU ● Stoner Metal ● Facebook ● Instagram
- 25. foto Muchas Gracias! Matías Alvarez Duran nan-labs.com - @matiasalvarez87