Fullstack React y GraphQL : Couchbase

Primero de tres artículos enfocados a la construcción Fullstack con React y GraphQL con Express y Couchbase Server.

• Configuración de un servidor NoSQL Couchbase (Parte 1)
• Creación de una API Express-GraphQL (Parte 2)
• Crear un cliente Apollo GraphQL en React (Parte 3)
• Código fuente final

Aplicación Fullstack React y GraphQL

Construyamos un Fullstack Reaccione aplicación utilizando GraphQL. Este es un tutorial accesible pero esperamos cierta familiaridad con JavaScript, React, conceptos de GraphQL y NoSQL. También usamos Docker para aprovisionar nuestro único nodo Couchbase Server. Nos conectaremos a Couchbase a través de Express-GraphQL, construido con Node JS y JS exprés utilizando express-graphql. A continuación, consultaremos la API en React utilizando el método Apolo GraphQL cliente.

Una visión general de GraphQL

Antes de empezar a construir esta aplicación, quiero hablar de nuestra elección de utilizar un API GraphQL en lugar de un API RESTA continuación, pasaremos a la configuración de nuestra base de datos.

GraphQL es un lenguaje de consulta fuertemente tipado para APIs. Es una forma declarativa de obtener datos, que está siendo adoptada rápidamente por la comunidad JavaScript y otras comunidades. Permite un control granular sobre la obtención de datos y ahorra tiempo al realizar llamadas adicionales a la API. Todas las consultas y mutaciones se realizan en un único punto final, en lugar de en varios como REST. Esto significa menos código que escribir gestionando URLs en React. También una huella más pequeña sobre el cable. Para más información sobre GraphQL vs REST, sugiero una charla de Nate Barbettini titulada: Duelo de APIs: RPC vs REST vs GraphQL.

Si está familiarizado con JSON encontrará que Sintaxis de consulta de GraphQL fácil de usar y sus datos fáciles de explorar con GraphiQLun IDE en el navegador que utilizamos para probar nuestras consultas y descubrir las posibilidades de cualquier API GraphQL.

Este IDE GraphiQL será útil más adelante cuando tengamos que probar nuestros propios puntos finales GraphQL. GraphiQL está disponible para todos los servidores GraphQL. Por ejemplo, GitHub tiene una de las APIs GraphQL públicas más antiguas (siendo uno de los primeros en adoptarla). Te permite explorar ese gráfico de datos usando la API Explorador de la API GraphQL v4 de GitHub.

Nota: GitHub tenía una de las API RESTful públicas más populares conocidas por la comunidad de desarrolladores y en 2016 cambiaron a una aplicación GraphQL en lugar de REST para su versión 4 de la API de GitHub. Esto reduce en gran medida el esfuerzo que un desarrollador tiene que pasar para utilizar la API de GitHub y hace que la experiencia del desarrollador sea mejor. Una solicitud es simplemente texto enviado a través de un HTTP POST en una sintaxis que parece un híbrido entre JSON y funciones JS. La respuesta es una respuesta ligera (sólo lo que pedí) de la API GraphQL. Estos son sólo algunos de los beneficios que los desarrolladores obtienen del cambio de REST a GraphQL por parte de GitHub.

Almacén de datos Couchbase

Para empezar nuestro proyecto, necesitamos datos. Vamos a abordar este proyecto como si tuviéramos un cliente que ya tiene una base de datos, en concreto, están utilizando Servidor Couchbase como almacén de documentos.

En SDK para NodeJS de Couchbase Server proporciona las herramientas necesarias para conectarse a través de Node JS y Express a nuestro servidor Couchbase y sus datos.

Para su información, hay muchos otros SDK disponibles además de Node JS para Couchbase Server, incluyendo C, .NET, Vaya a, Java, PHP, Pythony Scala.

Ponga en práctica sus conocimientos de SQL en NoSQL

Couchbase Server aprovecha tus conocimientos de SQL mediante la aplicación Lenguaje de consulta de bases de datos N1QL (SQL para JSON) que permite consultar Couchbase, un almacén de datos de documentos NoSQL con una sintaxis casi idéntica a SQL.

Instalar y ejecutar Couchbase con Docker

Si decide descargar e instalar Couchbase localmente y no desea utilizar Docker, simplemente pase a las instrucciones de instalación manual. Para obtener ayuda sobre Docker, visite docs.docker.com.

Obtener el couchbase imagen:

Vamos a clonar un repositorio existente para obtener el archivo archivo docker y configuración.sh que necesitamos:

Construir una nueva imagen a partir de Dockerfile que utiliza el couchbase Docker como base:

Ejecuta esa nueva imagen:

Si tienes problemas para ejecutar el último comando, puede ser que no tengas una red llamada "bridge". En este caso, ejecute docker network ls y busque el nombre de su nombre de red y controlador por defecto y utilícelo en su lugar.

En este punto, podemos visitar localhost:8091 e inicie sesión con el Administrador & contraseña.

Instalación local de Couchbase

Si ha instalado con Docker puede pasar a la sección siguiente.

El proceso de instalación es muy sencillo y le cubrimos todas las necesidades. Linux, Macy Windows.

Una vez instalado, puede acceder a la consola web del servidor Couchbase mediante localhost:8091.

Desde esta pantalla, puede hacer clic en "Configurar un nuevo clúster“.

El nombre del cluster depende de ti y representa todos tus buckets Couchbase. El usuario y contraseña admin es una cuenta de administrador del servidor para acceder al panel de control de todo el servidor, no es un usuario y contraseña para conectarse a un bucket específico desde nuestra aplicación Express. Eso lo veremos más adelante.

Configuré mi cluster con los servicios por defecto y cuotas de memoria.

Explore nuestro cubo en la consola

Accedamos al Dashboard del Servidor Couchbase y hagamos click en "Servidores" para ver nuestro servidor creado inicialmente.

A continuación, haga clic en "Buckets". A Couchbase Cubo es una colección de documentos. Puedes "Añadir Cubo" para crear tu propia colección de documentos, o añadir datos de muestra. Si has seguido las instrucciones del archivo Docker el viaje-muestra ya debería estar cargado y visible en esta pantalla.

El uso de esta base de datos de ejemplo nos permitirá dar el pistoletazo de salida con nuestra aplicación Fullstack React y GraphQL y empezamos con Express para construir nuestra API y esto nos facilitará las cosas puesto que ya tenemos datos e índices configurados.

Los índices se configuran automáticamente en este viaje-muestra como parte del script utilizado para instalar el bucket. Estos índices son necesarios para utilizar el lenguaje de consulta N1QL (SQL para JSON).

Si quieres saber más y crear tus propios cubos e índices, consulte este artículo!

Su cubo debe ser similar al cubo de la imagen de abajo:

Si hacemos clic en el botón "Documentos" podemos ver algunos de los datos de nuestro Bucket:

Haciendo clic en "Editar documento como JSON" para ver el JSON del valor de esa clave específica e incluso podemos editar los datos desde aquí. ¡Pruébalo!

Antes de seguir adelante, queremos hacer clic en la pestaña "Seguridad" y configurar un usuario para conectarse a este cubo.

Una vez en la página "Seguridad", haz clic en "Crear usuario". Añade un nombre de usuario y una contraseña específicos para conectarte al bucket desde nuestra aplicación Express. He utilizado mi propio nombre y coincidirá con la información del código fuente del proyecto. Así que recuerda usar tu nombre y actualizar el código según sea necesario.

Asegúrese de marcar la casilla "Acceso a aplicaciones" para nuestro viaje-muestra cubo. Eso es todo lo que necesitamos. Recuerda tu nombre de usuario y contraseña, ya que los necesitaremos para conectarnos.

Índices de cubos

Para esta demostración, nuestros índices se generaron automáticamente. Si quisieras añadir índices, puedes añadirlos usando la pestaña "Query" y ejecutar el SQL necesario para crearlos. Si estás familiarizado con SQL, ¡crear índices para Couchbase será intuitivo!

Si quieres saber más sobre los índices en Couchbase, echa un vistazo a un artículo reciente que muestra cómo utilizar el Servicio Index Advisor para Couchbase. Se trata de una nueva herramienta proporcionada junto con nuestra última versión de Couchbase Server 6.5. Otro punto de interés puede ser nuestra Índices secundarios globales documentación.

Estos son los índices de viaje-muestra que instalamos con Couchbase Server.

Mención rápida sobre las consultas N1QL

Algo más que mencionar sobre Couchbase Server es el lenguaje que utilizamos para consultar nuestros documentos. Couchbase Server utiliza N1QL. N1QL es una sintaxis similar a SQL que cualquier persona con conocimientos relacionales debería ser capaz de entender. Es especialmente útil para consultar colecciones de documentos. Cubriremos algunos aspectos básicos en nuestro próximo artículo cuando construyamos nuestra API GraphQL.

Encontrará más información en N1QL en la documentación, así como información sobre el uso del couchbase.get de consulta, toda esta información se puede encontrar en nuestro SDK para NodeJS de Couchbase Server docs.

Con la configuración de Couchbase ahora podemos continuar y entrar en la parte de JavaScript de la construcción de nuestra aplicación Fullstack React y GraphQL. Vamos a pasar a la construcción de nuestro Servidor Express-GraphQL a continuación, y luego vamos a crear un cliente React en el último segmento.

Creación de una API Express-GraphQL (Parte 2)