Unificar Fuentes de Datos con GraphQL en el borde

Rate this content
Bookmark

Combina múltiples APIs y bases de datos en una única API centralizada de GraphQL que puedes mejorar con autenticación, permisos y almacenamiento en caché, totalmente administrada y desplegada en el borde con Wasm.

17 min
21 Sep, 2023

Comments

Sign in or register to post your comment.

AI Generated Video Summary

Esta Charla discute los beneficios de usar GraphQL para unificar fuentes de datos, la flexibilidad de desplegar APIs con GraphBase y la capacidad de personalizar la API de GraphQL usando TypeScript. El SDK de GraphBase permite a los desarrolladores importar autenticación, configuración, conectores y esquemas, proporcionando seguridad de tipos completa y opciones de configuración. TypeScript ofrece una experiencia de codificación útil con sugerencias y descripciones al pasar el cursor sobre el código. La Charla también destaca la capacidad de ampliar la API de Stripe usando código personalizado y la facilidad de configuración con GraphBase y TypeScript.

1. Unifying Data Sources with GraphQL

Short description:

Hola a todos, soy Jamie. Hoy en TS Congress, hablaré sobre el tema de unificar fuentes de datos con GraphQL. Construir una API escalable y mantenible implica considerar diversas preocupaciones y lidiar con diferentes APIs y SDKs. Con la abundancia de fuentes de datos, puede llevar mucho tiempo integrarlas todas. Sin embargo, la flexibilidad para crear aplicaciones diversas utilizando diferentes fuentes de datos es un gran beneficio. El desafío radica en la falta de documentación consistente y la necesidad de asegurar que los datos estén disponibles en el borde para una experiencia de usuario óptima.

Hola a todos, soy Jamie. Estoy muy emocionado de estar aquí hoy en TS Congress y espero que todos estén pasando un tiempo fantástico. Hasta ahora, hay tantos oradores increíbles y charlas programadas. Estoy realmente emocionado de ver eso y ponerme al día.

Pero obviamente, después de esta charla, solo tenemos unos minutos juntos hoy para revisar algunas diapositivas y hacer una demostración. Así que creo que deberíamos sumergirnos en el tema de unificar las fuentes de datos con GraphQL.

Ahora, si estás construyendo una API, no importa si esa API es REST o si es GraphQL. Es bastante difícil. Sí, es fácil instalar una dependencia, crear algunas definiciones de tipos con GraphQL y luego crear algunos resolvers y desplegarlo. Es fácil hacer eso. Pero hay muchas otras cosas que debes considerar al construir algo escalable que deseas desplegar en producción, en el borde, esperemos, para que tus usuarios lo usen y consuman.

Y esta lista que ves aquí es solo una pequeña muestra de algunas de las preocupaciones que debes tener en cuenta al construir algo escalable y mantenible en producción. Pero creo que el mayor problema hoy en día, es un gran beneficio tenerlo. Pero el mayor problema es que hoy en día tenemos tantas fuentes de datos diferentes que todos tenemos que descubrir cómo usar todas las APIs y SDKs. Bueno, todas son diferentes también. Hay una curva de aprendizaje diferente. Hay diferentes tipos de documentación. Algunas están más documentadas que otras. Algunas no llevan tiempo en absoluto comenzar y otras llevan días para entender. Y debido a que ahora estamos utilizando tantos de estos servicios para entregar nuestros productos finales, a menudo puede llevar mucho tiempo hacer eso.

Creo que la aplicación de tareas más simple que todos solíamos hacer y construir cuando comenzamos con algo, creo que en el mundo de hoy, con todas estas diferentes fuentes de datos, creo que hay tantas implementaciones diferentes de eso ahora, donde tal vez creas una aplicación de tareas que cuando agregas una tarea, te envía una notificación a través de Slack o correo electrónico o SMS. Así que hay tres servicios. Y tal vez cuando agregas algo o eliminas algo o marcas algo o desmarcas algo, tal vez eso se agrega a los espacios libres en tu calendario para que realmente puedas encontrar tiempo para hacer estas tareas. Así que sí, hay muchas cosas que considerar al construir aplicaciones con todas estas diferentes fuentes de datos. Y es genial que tengamos esta flexibilidad. Pero sí, como digo, el inconveniente es que algunas de estas APIs tienen una mejor documentación. Algunas no la tienen. Pero lo más importante, creo, es que todos los diferentes servicios que usamos hoy en día no están realmente enfocados en dónde podría residir los datos porque saben que pueden confiar en que alguien use algún caché o un generador de sitios estáticos o algo así. Así que la mayoría de estos se despliegan en una sola región. Pero, por supuesto, si queremos usar todos estos diferentes servicios, esos datos realmente deberían estar en el borde más cercano al usuario para que puedas obtener la mejor experiencia al usar tu aplicación que obviamente creas usando TypeScript.

2. Flexibilidad en la implementación de API e integración de datos

Short description:

Estamos en una misión para resolver la falta de flexibilidad en la implementación de APIs en diferentes regiones. En GraphBase, permitimos a los desarrolladores conectarse a cualquier tipo de base de datos y ampliar sus aplicaciones con fuentes de datos adicionales. Con nuestra API unificada de GraphQL, tienes una seguridad de tipo completa tanto en el backend como en el frontend. Proporcionamos herramientas para que este proceso sea fácil y eficiente.

Y creo que todas estas APIs se implementan en una sola región. Y obviamente puedes pagar para implementarlas en otras regiones. Pero creo que eso es algo que todos deberíamos tener la flexibilidad de hacer y configurar por nuestra cuenta. Porque hay tantos servicios que no te brindan esa flexibilidad cuando realmente la deseas. Y tal vez si lo obtienes de un proveedor de servicios, te cobrarán mucho más por hacerlo. Así que eso es lo que estamos tratando de resolver en GraphBase.

Y permitimos a los desarrolladores conectarse a cualquier tipo de database, tal vez un almacén o una aplicación de comercio como Shopify. Si tienes un producto en Shopify al que deseas agregar más productos o reseñas. Es posible que desees obtener esas reseñas de una API diferente. Tal vez tengas algún contenido en HiGraph o Contentful o Sanity que deseas agregar a estas páginas de productos. Bueno, te brindamos la capacidad de agregar fuentes de datos, ampliarlas y agregar tu propio código personalizado y hacer otras cosas. Así que estamos en una misión para hacer eso, para crear una única API de GraphQL a la que puedas agregar diferentes fuentes de datos y también tus diferentes frontends. Y con todo esto, tienes una seguridad de tipo completa en el backend, una seguridad de tipo completa en el frontend con esa API unificada de GraphQL. Y hay tantas herramientas geniales para hacer eso.

3. GraphBase: API GraphQL Unificada y Configuración

Short description:

GraphBase ofrece una API GraphQL unificada que te permite utilizar tu propio proveedor de autenticación y configurar permisos de usuario. También ofrece almacenamiento en caché en el borde y genera tipos de TypeScript para consultas y mutaciones de GraphQL. Con una única configuración de SDL de GraphQL, puedes agregar proveedores de autenticación y especificar reglas para solicitudes autenticadas. GraphBase funciona con cualquier solicitud fetch y garantiza una seguridad de tipo completa desde el backend hasta el frontend.

Y lo que hace GraphBase es, obviamente, tener esta API GraphQL unificada donde todas estas fuentes de datos viven. Y además, puedes agregar cosas como Autenticación. Puedes utilizar tu propio proveedor de autenticación como Click o Auth0 y luego puedes decir que este usuario puede actualizar pero no puede eliminar, o pueden leer pero no escribir. Todo eso se puede configurar dentro de la configuración. Pero la gestión real de usuarios ocurre en otro lugar. Básicamente, puedes utilizar tus propios usuarios para utilizar la API y las bases de datos conectadas.

Y además de eso, como mencionamos anteriormente, es importante tener los datos disponibles en el borde, cerca del usuario. Bueno, también hacemos eso con el almacenamiento en caché en el borde. Eso está integrado en todos los proyectos y puedes aprovecharlo. Luego, cuando implementes esto en producción, si abres una rama en GitHub, automáticamente te crearemos una URL de vista previa a la que estás muy acostumbrado. Sin duda, con cosas como Vercel y Netlify, te dan esa URL inmutable que puedes utilizar. Hacemos lo mismo para GraphQL. Te daremos ese nuevo punto de conexión de la API para que no tengas que pensar en cómo construirlo tú mismo. Eso viene incluido, de serie. También tenemos otros productos como búsqueda y análisis, para que puedas obtener una visión completa de lo que está sucediendo en tu proyecto. Y como mencioné antes, esto funciona con cualquier cosa que estés utilizando actualmente. Donde sea que puedas hacer una solicitud fetch, puedes usar GraphBase. Pero lo importante que quiero destacar es que GraphQL y TypeScript funcionan muy bien juntos debido al sistema de tipos. Un sistema de tipos sólido de GraphQL se puede utilizar con herramientas como el generador de código de GraphQL para generar todos los tipos de TypeScript para todos tus tipos de GraphQL, ya sean consultas, mutaciones o si tienen entradas y argumentos, algunos requeridos y otros opcionales. El generador de código puede crear algo en TypeScript que se ajuste a eso. Entonces, cuando estás utilizando GraphBase y creando tus propios resolutores personalizados, puedes utilizar todo ese código generado para crear algo que sea completamente seguro en cuanto a tipos desde el backend hasta el frontend, lo cual creo que es realmente poderoso.

Pero el tema que realmente quiero cubrir hoy y mostrar en la próxima demostración es cuando comenzamos a construir GraphBase, teníamos una única SDL de GraphQL como configuración. Aquí a la izquierda puedes ver un esquema. Luego tenemos esta directiva personalizada llamada auth con la que configurarías todos tus diferentes proveedores de autenticación. Este OpenIDConnectProvider podría ser algo como clerk, o podría ser auth0 u otra cosa. Puedes agregarlo como proveedor de autenticación. Luego puedes especificar una lista de reglas. Aquí solo tenemos una regla, que es permitir privado. Pero eso agregaría algunas reglas a tu backend para permitir solo solicitudes autenticadas. A continuación, tenemos esta etiqueta GraphQL, que define un espacio de nombres, la URL de la tienda Shopify o de la tienda Contentful. Y también tenemos algunos encabezados.

4. Building with GraphBase SDK

Short description:

Aquí tenemos un encabezado personalizado de Shopify. Si lo usas con Shopify, si lo usas con Contentful, obviamente puedes pasar diferentes encabezados. El SDL que las personas tuvieron que usar durante mucho tiempo no les daba a los desarrolladores ninguna pista sobre lo que estaba sucediendo con toda la configuración y las opciones. Por eso creamos el SDK de GraphBase, que te permite importar cosas como autenticación, configuración, conector y esquema. Y mientras escribes, puedes aprovechar al máximo TypeScript. Gracias a TypeScript, obtienes una seguridad de tipo completa y puedes configurar todos los diferentes argumentos al construir consultas y resolutores de GraphQL dentro de GraphBase. Vamos a hacer una demostración utilizando la CLI de GraphBase para inicializar un nuevo proyecto y usar TypeScript como opción de configuración.

Aquí tenemos un encabezado personalizado de Shopify. Si lo usas con Shopify, si lo usas con Contentful, obviamente puedes pasar diferentes encabezados. Y luego esos se agregarían cuando hagas ese tipo de solicitud a los diferentes proveedores.

Entonces, sí, este es el SDL que las personas tuvieron que usar durante mucho tiempo. Y es fantástico. Todavía lo uso hoy en día. También uso la nueva configuración de TypeScript, pero el SDL era realmente agradable. Pero lo que no les daba a los desarrolladores eran pistas sobre lo que estaba sucediendo con toda la configuración y las opciones. No obtenías ninguna ayuda de TypeScript o del editor de código cuando configurabas los backends con SDL. Por eso, cuando hablamos con la comunidad, notamos que muchas personas estaban buscando una forma de crear algo que fuera seguro en cuanto a tipos.

Entonces creamos el SDK de GraphBase. El equipo propuso una idea. Hablamos con la comunidad y dijeron: `Wow, esto es genial. ¿Cómo puedo usar esto?` Así que comenzamos a construir el SDK, que te permite importar cosas como autenticación, configuración, conector y esquema. Y luego puedes crear modelos a partir de eso. Luego puedes conectar cosas. Y mientras escribes, puedes aprovechar al máximo TypeScript para asegurarte de que estás pasando una cadena donde se debe invocar una cadena, un entero, etc. Y cosas como la API de encabezados, nos aseguramos de que puedas personalizar y especificar el tipo correcto de claves y valores allí. Y nadie los va a arruinar. Así que obtienes esa seguridad de tipo completa, que también nos encanta. Gracias a TypeScript.

Y creo que lo otro cuando estás construyendo consultas y resolutores de GraphQL que son personalizados para ti. Entonces, estás construyendo estos dentro de GraphBase, puedes configurar todos los diferentes argumentos que tienen. Y si hay algún campo opcional, puedes declararlo aquí dentro. Y TypeScript te ayuda a generar automáticamente ese SDL. Pero sí, quiero hacer una demostración ahora. Ahora abriremos nuestro editor de código. Imagina que esta era tu aplicación frontend y querías crear un backend para tu frontend. Puedes usar la CLI de GraphBase para inicializar un nuevo proyecto. Y luego, por supuesto, queremos usar TypeScript como opción de configuración.

5. Customizando la API de GraphQL con TypeScript

Short description:

Voy a hacer trampa un poco. Voy a invocar algunos pasos que creé anteriormente, para que podamos actualizar y cambiar cómo se ve esta configuración. Pero a medida que exploramos este archivo, ahora podemos ver que podemos pasar el cursor sobre las cosas e invocar cosas, y obtenemos ayuda completa gracias a TypeScript con todas estas descripciones y opciones disponibles dentro de nuestro editor de código. Así que empecemos creando una consulta aquí. Tenemos algunos argumentos opcionales. Ahora vamos al archivo que tenemos, hello.ts. Aquí tenemos una función de TypeScript. Podemos importar SDK y lo que sea aquí dentro, pero esto es TypeScript. Podemos crear un resolvedor de TypeScript que luego implementaremos en el edge. En este esquema que vemos aquí, todo se generó a partir de esa configuración de TypeScript. Así que no tuvimos que preocuparnos por escribir GraphQL SDL. Pudimos usar TypeScript y olvidarnos de que necesitas conocer GraphQL para construir un backend. Si no lo conoces, puedes usar TypeScript para construir estos backends. Ejecutemos una mutación aquí con GraphQL. Nos registraremos para el evento. Podemos pasar nuestro nombre y nuestro estado aquí, que es un enum en GraphQL, y podemos enviar diferentes valores de enum si queremos. Y luego, cuando ejecutemos esa operación aquí, nos devolverá los datos. Así que básicamente es una consulta y mutación personalizada de GraphQL utilizando TypeScript que se configuró usando TypeScript en lugar de nuestro repositorio de GraphBase. A continuación, podemos hacer cosas como conectar Stripe utilizando el conector de la API abierta. Y aquí, gracias a TypeScript, sabemos exactamente qué necesitamos pasar, cosas como encabezados, cuál es la clave, qué valor puede ser, y lo mismo con las transformaciones. Podemos transformar el esquema para excluir ciertos campos, consultas y mutaciones.

Voy a invocar algunos pasos que creé anteriormente, para que podamos actualizar y cambiar cómo se ve esta configuración. Pero a medida que exploramos este archivo, ahora podemos ver que podemos pasar el cursor sobre las cosas e invocar cosas, y obtenemos ayuda completa gracias a TypeScript con todas estas descripciones y opciones disponibles dentro de nuestro editor de código.

Así que nos encanta esta experiencia ahora, y creemos que a nuestros desarrolladores también les encanta. Nos dicen que sí. Y estamos realmente emocionados de expandir este patrón de construcción de nuestra API.

Así que empecemos creando una consulta aquí. Tenemos algunos argumentos opcionales. Ahora vamos al archivo que tenemos, hello.ts. Aquí tenemos una función de TypeScript. Podemos importar SDK y lo que sea aquí dentro, pero esto es TypeScript. Podemos crear un resolvedor de TypeScript que luego implementaremos en el edge. Creo que ahora, con este resolvedor, deberíamos iniciar el servidor de GraphQL, y luego, si vamos al puerto 4,000, podemos iniciar Pathfinder.

En este esquema que vemos aquí, todo se generó a partir de esa configuración de TypeScript. Así que no tuvimos que preocuparnos por escribir GraphQL SDL. Pudimos usar TypeScript y olvidarnos de que necesitas conocer GraphQL para construir un backend. Si no lo conoces, puedes usar TypeScript para construir estos backends.

Así que a medida que ejecutamos el siguiente paso ahora, podemos crear otra mutación para registrarnos en un evento, tal vez algo como esto. Luego podemos definir algunas cosas como enums e inputs y una mutación, y ahora tenemos un archivo que acepta algunos parámetros. Todo esto que tenemos aquí es seguro en cuanto a tipos, por lo que puedes trabajar con TypeScript y GraphBase para crear estos backends, y no tienes que esperar hasta que inicies el servidor para encontrar errores. Te lo diremos si hay algo mal antes de que llegues allí. Y como puedes ver, el esquema de GraphQL se ha actualizado automáticamente utilizando esa configuración de TypeScript que se convirtió para crear esta API de GraphQL que luego puedes usar para tu frontend.

Ejecutemos una mutación aquí con GraphQL. Nos registraremos para el evento. Podemos pasar nuestro nombre y nuestro estado aquí, que es un enum en GraphQL, y podemos enviar diferentes valores de enum si queremos. Y luego, cuando ejecutemos esa operación aquí, nos devolverá los datos. Así que básicamente es una consulta y mutación personalizada de GraphQL utilizando TypeScript que se configuró usando TypeScript en lugar de nuestro repositorio de GraphBase. A continuación, podemos hacer cosas como conectar Stripe utilizando el conector de la API abierta. Y aquí, gracias a TypeScript, sabemos exactamente qué necesitamos pasar, cosas como encabezados, cuál es la clave, qué valor puede ser, y lo mismo con las transformaciones. Podemos transformar el esquema para excluir ciertos campos, consultas y mutaciones.

6. Beneficios de TypeScript e Integración de GraphQL

Short description:

Gracias a TypeScript, los usuarios ahora pueden obtener toda la ayuda que necesitan directamente en el editor de código. Con OpenAPIConnector y el servidor en ejecución, la API de Stripe está disponible en GraphQL sin la necesidad de aprender GraphQL desde el punto de vista del servidor. GraphBase abstrae la complejidad y se encarga de tareas como pasar encabezados y realizar registros por ti.

Y nuevamente, gracias a TypeScript, obtenemos toda esta ayuda. Antes, cuando usábamos un SDL, ninguno de nuestros usuarios podía hacer eso solo dentro del editor de código. Siempre tenían que consultar la documentación para ver qué podían y qué no podían hacer. Eso llevaba mucho tiempo y la gente no estaba implementando y construyendo aplicaciones más rápido. Pero creo que ahora, con TypeScript, lo están haciendo. Es fantástico.

Entonces, con ese OpenAPIConnector agregado y con el servidor en ejecución, obtenemos toda la API de Stripe aquí en GraphQL gracias a la especificación de OpenAPI. Tomamos eso y lo transformamos en GraphQL. Y los usuarios de GraphBase que quieran construir estos backends no tienen que preocuparse por aprender GraphQL realmente desde el punto de vista del servidor. Nosotros abstraemos toda esa complejidad por ti. Y cosas como pasar encabezados aquí, podemos ver que los enviamos desde el cliente al servicio subyacente, en este caso es Stripe, y lo actualizamos. Y cuando haces una solicitud desde el frontend, simplemente la pasamos directamente a Stripe, lo cual es genial. Y hay cosas como el registro para que puedas profundizar y averiguar exactamente qué está sucediendo si algo sale mal, en lugar de hacerlo en tu resolvedor.

7. Extensión de la API de Stripe con el campo Gravatar

Short description:

Vamos a extender la API de Stripe agregando un campo Gravatar usando código personalizado en nuestro resolvedor. Con GraphBase y TypeScript, podemos configurar fácilmente esta extensión utilizando el SDK.

A continuación, vamos a extender la API de Stripe. Aquí tenemos un cliente de Stripe, el cliente de Stripe es el tipo en GraphQL para el cliente de Stripe, pero los usuarios no tienen un campo Gravatar. Así que creo que deberíamos agregar uno. Aquí hay un código personalizado dentro de nuestro resolvedor que está obteniendo el correo electrónico de ese cliente de Stripe, y luego está creando esa URL de Gravatar, y luego simplemente va a devolver una cadena. Así que ahora, con eso en funcionamiento, si vamos a Pathfinder y cerramos la pestaña de encabezados, ahora deberíamos poder invocar ese campo Gravatar que no existía antes. Eso no existe en Stripe, pero hemos podido extender la API de Stripe con GraphBase usando TypeScript. Ahora podemos pasar un valor diferente en los argumentos aquí, y podemos obtener un enlace diferente para obtener un tamaño de imagen diferente. Así que eso ha sido extender Stripe con GraphBase y con TypeScript, y todo lo que realmente tuvimos que hacer fue configurar cómo se veía eso usando el SDK y luego escribir ese código. Y por último, veremos el almacenamiento en caché, donde puedes configurar diferentes reglas. Así que aquí tenemos el cliente de Stripe. No queremos almacenar en caché nada más excepto nuestro cliente de Stripe porque generar esa URL para la imagen de Gravatar, bueno, eso podría llevar un poco más de tiempo. No queremos esperar por eso, así que vamos a almacenar en caché esa respuesta de URL para que podamos configurar a nivel de tipo, a nivel de campo, lo que quieras. Puedes configurarlo con GraphBase, y luego cuando implementes eso en el borde y hagas una consulta, eso se almacenará en caché. Así que dentro de aquí, esto es cuando el proyecto se implementa con GraphBase. Podemos abrir ese proyecto dentro del panel de control. Y aquí podemos ver que no hemos pasado ese encabezado así que nuestra API está protegida. Ahora, si pasamos el encabezado de autorización para Stripe, esta es nuestra clave secreta con Stripe, ahora ejecutamos esa operación y será exitosa y obtendremos esa URL de Gravatar. Pero, si abrimos el historial aquí, podemos ver que tenemos un fallo en la caché. Ahora, si ejecutamos eso nuevamente, deberíamos obtener un acierto en la caché y podemos ver la diferencia en el tiempo aquí. El tiempo de respuesta ha disminuido significativamente gracias a esa caché que está ocurriendo en el borde. Así que esto ha sido un campo que extiende una API. Pero imagina todas las diferentes fuentes de datos que usas, al llevar eso a una API unificada de GraphQL puedes ahorrar considerablemente tiempo y costos para construir aplicaciones. Así que espero que esto haya sido interesante. Creemos que los desarrolladores pueden construir backends realmente geniales con GraphBase y aún pueden usar TypeScript para crear código personalizado donde lo deseen dentro de esos resolvedores personalizados. Pero luego, para configurar todo esto, no necesitas aprender GraphQL en el lado del servidor. Solo puedes usar esa configuración de TypeScript y el SDK para construir el backend por ti, lo cual es bastante poderoso. Y por eso amamos TypeScript. Así que si estás interesado en aprender más sobre esto, puedes ir a graphbase.com. Y si tienes alguna pregunta, no dudes en contactarme en Twitter. Estoy en Notrab. Eso es simplemente bottom al revés si alguien se pregunta. Estoy encantado de responder cualquier cosa sobre graph base y GraphQL allí. Así que muchas gracias por tenerme hoy.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Rock Solid React and GraphQL Apps for People in a Hurry
In this talk, we'll look at some of the modern options for building a full-stack React and GraphQL app with strong conventions and how this can be of enormous benefit to you and your team. We'll focus specifically on RedwoodJS, a full stack React framework that is often called 'Ruby on Rails for React'.

Workshops on related topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
WorkshopFree
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.