Instantáneamente Backend GraphQL sin servidor

Así que, vamos a sumergirnos. Aquí tengo una aplicación de Next.js. Voy a usar el comando mpx para inicializar un nuevo proyecto de GraphBase en la raíz de mi proyecto de Next.js. Esto muestra cómo puedes agregar GraphBase como un backend a tu proyecto existente. Aquí podemos definir todos nuestros modelos usando SDL de GraphQL. Usamos la directiva personalizada model para indicarle a GraphBase que genere una API para nosotros, y luego podemos usar los tipos escalares y otras directivas como unique aquí, y en este caso, para la URL de una publicación, podemos usar una directiva opt-in para una mayor validación con el escalar URL. Luego podemos agregar relaciones entre nuestros modelos, y luego podemos ejecutar el comando mpx graphbase dev para ejecutar una API local de GraphBase en localhost 4000. Si abrimos esto y echamos un vistazo al esquema y la documentación, podemos ver que todo esto se generó automáticamente para nosotros desde la CLI de GraphBase. Y todo esto funciona localmente y te proporciona una API para crear, actualizar, eliminar y leer datos. Entonces, en este caso, estamos creando una nueva publicación, podemos proporcionar una URL personalizada y podemos obtener esos datos de vuelta. Si intentamos crear esto nuevamente, podemos ver aquí que la directiva URL y la directiva at-unique han entrado en acción. No podemos crear una publicación duplicada con la misma URL porque dijimos que era única.

Ahora, pasemos a crear otra publicación y esta vez crearemos un comentario en línea como una relación cuando creamos una nueva publicación. Entonces, aquí, le daremos un texto y enviaremos esa mutación. A continuación, creemos un nuevo comentario, pero esta vez tomaremos el ID de una publicación existente y ahora vincularemos este comentario cuando lo creemos. Ahora veamos cómo obtener todas nuestras publicaciones utilizando la consulta de colección. Podemos optar por utilizar la paginación y, para cada uno de nuestros nodos, podemos obtener los campos que nos gustan. Podemos llevar esto un paso más allá obteniendo los comentarios relacionados de una publicación, lo cual también admite paginación. Finalmente, podemos recuperar registros singulares de nuestros datos en nuestro backend utilizando el ID o cualquier campo único. Tomemos el ID de una de nuestras publicaciones y ahora usemos la mutación para actualizar. Podemos actualizar utilizando el ID o nuevamente, utilizando ese campo único. Y aquí podemos proporcionar un nuevo valor de título para esta publicación. Ahora, si actualizamos nuestra consulta al obtener todas nuestras publicaciones y obtenemos el ID de un comentario, ahora podemos usar la mutación que se genera automáticamente para eliminar uno de nuestros comentarios. Podemos proporcionar tanto el ID del comentario como, si tuviéramos algún campo único, podríamos proporcionarlo dentro de los argumentos. A continuación, creemos un repositorio de GitHub y enviemos todo nuestro código a GitHub.

Una vez que hemos implementado el código en GitHub, podemos iniciar sesión en GraphBase usando nuestra cuenta de GitHub. Luego podemos buscar nuestro repositorio y conectarnos para crear un nuevo proyecto en GraphBase. Y esto no sería una aplicación SaaS si no hubiera confeti. Luego podemos explorar el panel de control dentro de GraphBase para explorar el esquema actual y el playground donde podemos crear y actualizar los datos que están sucediendo en el Edge.

Ahora imaginemos que queremos agregar la capacidad para que los usuarios voten en ciertas publicaciones. Bueno, puedo actualizar la interfaz de usuario y el backend al mismo tiempo en una rama. Luego puedo confirmar todo este código en GitHub y abrir una solicitud de extracción y automáticamente GraphBase implementará un entorno de vista previa único para esa rama específica. Así que aquí puedo trabajar con los datos que están limitados solo a esa rama, por lo que no estoy afectando nada que esté en producción y puedo trabajar de manera segura y mostrar a todos mis colegas para asegurarme de que la funcionalidad de votación funcione como esperamos. Aquí podemos ver que estamos consultando y mutando algunos datos dentro de nuestro backend que está en esa rama aislada.

Luego, una vez que el equipo esté satisfecho, todo lo que tenemos que hacer es fusionar y aprobar esa solicitud de extracción y GraphBase se encargará de implementarlo en producción. GraphBase también viene con muchas otras características, incluyendo autenticación, autorización, permisos y directivas personalizadas para rastrear cualquier actualización en las consultas utilizando la nueva directiva en vivo. Puedes conectar GraphBase a casi cualquier software de gestión de usuarios utilizando JWT o cualquier proveedor de OpenID Connect para manejar y autorizar automáticamente las solicitudes enviadas por los usuarios o grupos de usuarios. Así que echemos un vistazo a eso. Creemos un proyecto con Clerk. Le daremos el nombre de GraphQL Galaxy. Permitiremos contraseñas para nuestro tipo de autenticación y crearemos el proyecto. Ahora que está creado, crearemos una plantilla JWT para GraphBase. Y aquí podemos configurar muchas cosas, incluida la estrategia de autenticación basada en grupos. Instalemos algunas dependencias, incluido Apollo Client, para poder hacer una solicitud desde nuestra página de índice en nuestra aplicación. Y configuraremos el proveedor de Clerk usando los hooks de Next.js.

Ahora crearemos nuestras páginas de inicio de sesión y registro de cuentas con Clerk. Afortunadamente, Clerk se encarga de todo esto al proporcionar componentes listos para usar que podemos incrustar en nuestra aplicación. Ahora que los hemos agregado, solo tenemos que configurar algunas cosas más, incluidas nuestras variables de entorno, para que nuestro front-end sepa cómo comunicarse con Clerk y GraphBase. Ejecutemos tanto nuestra CLI local con GraphBaseDev como nuestra aplicación Next.js. Crearemos una nueva cuenta con nuestro correo electrónico y luego actualizaremos nuestra página de índice para crear una consulta que llame a nuestro backend de GraphBase. Si vamos a la página de índice, deberíamos ver que la consulta se está ejecutando correctamente porque hemos iniciado sesión y estamos enviando un encabezado de autorización válido. Este token se genera desde Clerk, se pasa a GraphBase y se valida. Pero si ahora actualizamos nuestro esquema para permitir solo la operación DELETE, si volvemos a nuestra aplicación e intentamos ejecutar la consulta para obtener todas nuestras publicaciones, ahora deberíamos ver que hay un error. Si inspeccionamos este error y vemos por qué, deberíamos ver que la operación para el tipo LIST ya no es válida. Espero que este video muy rápido te haya dado una idea de qué backend usar para tu próximo proyecto. Visita graphbase.com donde puedes unirte a la versión beta privada de forma gratuita hoy. Gracias.