Construyendo una API GraphQL sin servidor en 7 minutos

Rate this content
Bookmark

Al comienzo de la pandemia de COVID-19, la Universidad Johns Hopkins trabajó en recopilar y refinar datos de múltiples fuentes y proporcionó al mundo un repositorio de Github y un montón de archivos CSV. ¿El problema? Es casi imposible construir algo a partir de datos en bruto como estos.

En esta sesión de codificación en vivo, Maxime Beunier, un defensor del desarrollador de MongoDB, te mostrará cómo construir una API GraphQL sin servidor basada en este conjunto de datos utilizando Python y la plataforma de datos de MongoDB. ¡Finalmente vamos a aprovechar el servidor sin servidor y el generoso nivel gratuito de MongoDB!

8 min
10 Dec, 2021

Video Summary and Transcription

Maxime Beunier, un defensor del desarrollador en MongoDB, demuestra cómo construir una API GraphQL sin servidor utilizando MongoDB Atlas y Realm. Crea una nueva aplicación llamada Galaxy, la vincula al clúster de producción y la implementa en Irlanda. Luego muestra cómo autenticar usuarios y obtener un token para acceder a la API GraphQL. La demostración muestra la facilidad y velocidad de construir una API GraphQL sin servidor y proporciona todos los enlaces necesarios para una mayor exploración.

Available in English

1. Building a Serverless GraphQL API

Short description:

Hola a todos. Soy Maxime Beunier, un defensor del desarrollador en MongoDB, con sede en París. Hoy quiero mostrarles cómo construir una API GraphQL sin servidor en menos de siete minutos. Me inspiré en la Universidad John Hopkins y sus gráficos, así que terminé construyendo una API REST, una API GraphQL y algunos gráficos de MongoDB Atlas. Construyamos ahora una API GraphQL en MongoDB Atlas y Realm. Voy a crear una nueva aplicación llamada Galaxy, vincularla al clúster de producción y desplegarla en Irlanda. Generaré un esquema y lo modificaré según sea necesario.

♪♪ Hola a todos. Soy Maxime Beunier. Soy un defensor del desarrollador en MongoDB, con sede en París. Estoy muy feliz de estar hablando hoy en GraphQL Galaxy, y hoy quiero mostrarles cómo construir una API GraphQL sin servidor en menos de siete minutos, así que abróchense los cinturones porque será muy, muy rápido.

Así que al comienzo de la COVID, como todos saben, fue hace aproximadamente dos años, mi idea era comenzar a construir algunos gráficos y algunas API para mostrar los datos y hacer que todos estén al tanto y que los datos estén disponibles para todos, así que terminé construyendo una API REST, una API GraphQL y algunos gráficos de MongoDB Atlas, como pueden ver aquí, y encontrarán los enlaces a todo eso en la última diapositiva de esta presentación.

Así que, me inspiré en la Universidad John Hopkins y sus gráficos, así que ellos proporcionan, en los términos de uso aquí, un repositorio de GitHub. Este repositorio, lo siento, se ve así, es solo un repositorio muy simple con algunos archivos CSV. Como pueden ver en la carpeta de series temporales, ellos proporcionan cinco archivos, el global, que es para todos los países, y algunos específicos para los Estados Unidos con más detalles para los Estados Unidos. Los archivos se ven todos iguales, se ven así, básicamente, saben, estado, provincia, país, región, latitud, longitud, y dos puntos para cada fecha, y si importan esos archivos en MongoDB utilizando, por ejemplo, la herramienta mongoinport que admite CSV, terminarán con un esquema absolutamente terrible, así que no querrán hacer eso.

En su lugar, querrán, por ejemplo, trabajar con fechas como esta en lugar de ser una clave. Querrán que sea un valor y preferiblemente una fecha, y también querrán trabajar con, como, datos geoespaciales, por ejemplo, para la localización, por lo que es más compatible en los gráficos de MongoDB, por ejemplo, y para índices 2D o este tipo de cosas. También hay otro archivo llamado tabla de búsqueda donde tienen más información sobre los países, como, por ejemplo, la población y algunos códigos de país, etc. Así que también quería esto en la mezcla, así que terminé haciendo algunos scripts de Python, que también están disponibles en uno de los enlaces, y al final terminé con algunos documentos como este, donde tienen, como, para cada país, tienen un montón de campos, saben, para describir a qué se relacionan los datos, una fecha y los valores para esa fecha en particular, ¿verdad? Así que al final, tengo esto, saben, un país, un lugar, una fecha para una fecha en particular y, saben, los números para ese día en particular.

Así que construyamos ahora una API GraphQL basada en esto, como pueden ver, terminé con, como, esas cinco colecciones aquí en la parte inferior, y voy a trabajar con la global solo para mostrarles cómo hacerlo. ¡Vamos a hackear! Para hacer esto, me estoy moviendo ahora a MongoDB Atlas, donde pueden alojar sus bases de datos de MongoDB en la nube de su elección, y tengo este clúster en producción aquí llamado COVID-19. Ahora me voy a Realm, que es el lugar donde pueden construir su aplicación, su aplicación sin servidor, que se mantendrá y vivirá sobre su clúster de MongoDB Atlas. Voy a crear una nueva aplicación que estará en producción. Como pueden ver, la voy a llamar Galaxy, por ejemplo. La voy a vincular al clúster real en producción y la voy a desplegar en Irlanda porque quiero que esté en Irlanda porque el clúster también está en Irlanda, así que, como, ambos están en el mismo lugar. Como pueden ver aquí, tienen un montón de opciones, y tengo desencadenantes, también tengo una sincronización, si quieren sincronizar datos en dispositivos móviles, por ejemplo, pero me voy a quedar con GraphQL. Voy a hacer clic aquí en Generar esquema porque GraphQL se basa en esquema, así que necesito generar un esquema que me lleva de vuelta a las reglas. En las reglas, puedo seleccionar mi colección aquí, global. Puedo decir que un usuario puede leer todos los datos porque estoy haciendo una API pública aquí. Configurar. Sí, quiero guardar. Entendido. Voy a generar el esquema. Voy a hacer clic aquí en Generar esquema solo para la colección global y voy a decir Generar esquema. Ahora tengo un esquema que se ha generado. Veo que falta el estado, así que puedo copiar y pegar el país, por ejemplo, y también puedo modificar el esquema como desee.

2. Using GraphQL and Authenticating Users

Short description:

Puedo decir Guardar, y eso es todo, estoy listo para trabajar. Para usar esto, necesito un token. Así que necesito autenticar a mis usuarios, para poder usar esto fuera de esta interfaz de GraphQL. Voy a usar el usuario anónimo. Voy a activarlo, guardar el borrador y desplegar mi aplicación sin servidor. Como pueden ver, ahora tengo un token. Este token se puede copiar y pegar aquí, y ahora puedo ejecutar mi consulta. Espero que les guste esta demostración. Muchas gracias por escuchar. Y ahora tienen todos los enlaces que prometí.

Puedo decir Guardar, y eso es todo, estoy listo para trabajar. Así que si vuelvo ahora a GraphQL, como pueden ver, tengo un webhook. Y tengo una consulta, y puedo enviar una consulta. Y si pongo Global en plural, obtengo varios documentos. Obtengo una matriz de documentos. Así que como pueden ver, está funcionando.

Para usar esto, necesito un token. Así que necesito autenticar a mis usuarios, para poder usar esto fuera de esta interfaz de GraphQL. Así que puedo usar la autenticación aquí, como pueden ver, tengo muchas opciones. Así que voy a elegir una fácil para hoy, pero cualquiera de ellas podría funcionar. Así que voy a elegir el usuario anónimo. Lo voy a activar, guardar el borrador, y voy a desplegar mi aplicación sin servidor aquí en la parte superior. Así que tengo que desplazarme hasta abajo del todo. Guardar y desplegar.

Así que ahora si vuelvo aquí, ya tengo preparadas algunas consultas con una que se ve así. Así que estoy consultando para Francia, para la parte continental y para alguna fecha, ya saben, en mayo. Así que voy a copiar este ID de la aplicación, que es el ID de la aplicación de mi aplicación sin servidor ahora en Realm. Necesito copiar y pegar esto aquí en la parte superior. Y creo que me falta esto. Oh no, tengo que copiar y pegar en todas partes. Así que necesito copiar y pegar aquí. Aquí puedo obtener un usuario anónimo. Oops. Genial. Como pueden ver, ahora tengo un token. Este token se puede copiar y pegar aquí, y ahora puedo ejecutar mi consulta. Aquí, y como pueden ver, tengo mi respuesta. Está un poco ampliado, pero sí, como pueden ver, tengo mi respuesta. Y tiene casos confirmados diarios y las fechas, eso es lo que obtengo.

Así que espero que les guste esta demostración. Muchas gracias por escuchar. Y ahora tienen todos los enlaces que prometí. Un montón de publicaciones de blog y también los gráficos que presenté al principio. Muchas gracias, y nos vemos la próxima vez, adiós.

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
Top Content
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
Top Content
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.
React Day Berlin 2022React Day Berlin 2022
29 min
Get rid of your API schemas with tRPC
Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation. In this talk we will understand the benefit of tRPC and how apply it in a NextJs application. If you want reduce your project complexity you can't miss this talk.

Workshops on related topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
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
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
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
Top Content
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
Top Content
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