GraphQL con Express<\/h2>\n
Si no est\u00e1 familiarizado con GraphQL, t\u00f3mese unos minutos para ponerse al d\u00eda utilizando la documentaci\u00f3n GraphQL. Las siguientes p\u00e1ginas deber\u00edan ser un buen comienzo:<\/p>\n
- \n
- Introducci\u00f3n<\/a><\/li>\n
- Consultas y mutaciones<\/a><\/li>\n
- Esquemas y tipos<\/a><\/li>\n<\/ul>\n
Requisitos previos<\/h3>\n
- \n
- nodo<\/a>\u00a0v10.x o posterior<\/li>\n
- npm<\/a>\u00a0v5.x o posterior<\/li>\n
- git<\/a>\u00a0v2.14.1 o posterior<\/li>\n<\/ul>\n
Crear la estructura del proyecto<\/h3>\n
Necesitamos crear un directorio en tu m\u00e1quina para nuestro proyecto, lo llamaremos
rage-with-couchbase<\/code>:<\/p>\nmkdir rage-with-couchbase && cd $_<\/code><\/pre>\nmkdir<\/code> crear\u00e1 un nuevo directorio utilizando la cadenarage-with-couchbase<\/code> para el nombre de la carpeta, bash almacena esa cadena en una variable que podemos utilizar inmediatamente llamada$_<\/code>.<\/p>\ncambiamos de directorio con
$_<\/code> asegur\u00e1ndonos de no escribir mal el directorio en el comando concatenado (es magia de bash).<\/p>\nAhora vamos a crear un
.gitignore<\/code> en la ra\u00edz de nuestro proyecto.<\/p>\ntouch .gitignore && echo \"\/node_modules\/*\" >> .gitignore<\/code><\/pre>\ntoque<\/code> generar\u00e1 un.gitignore<\/code> ignorando todos losnode_modules<\/code> en nuestro proyecto. Esto es importante porque como parte de nuestro proyecto de demostraci\u00f3n fullstack React y GraphQL, estaremos rastreando cambios git desde la ra\u00edzrage-with-couchbase<\/code> pero tendremos directorios de servidor y cliente con sus propiospaquete.json<\/code> ynode_modules<\/code> directorio.<\/p>\necho<\/code> a\u00f1adir\u00e1 elnode_modules\/<\/code> texto dentro del.gitignore<\/code> esto servir\u00e1 para ignorar todos los node_modules<\/strong> en la ra\u00edz y en todos los subdirectorios.<\/p>\nCreaci\u00f3n de nuestro servidor Express<\/h3>\n
Ahora crearemos el directorio para almacenar nuestro servidor Express y usaremos npm para gestionar sus paquetes.<\/p>\n
mkdir couchbase-gql-server && cd $_ && npm init -y<\/code><\/pre>\nmkdir<\/code> crear\u00e1 una nueva carpeta dentro de la ra\u00edz del proyecto espec\u00edficamente para nuestro servidor utilizando la cadenaservidor couchbase-gql<\/code> para el nombre, este es el directorio del proyecto de su servidor.<\/p>\ncambiamos de directorio y utilizamos
$_<\/code> (m\u00e1s magia) y luego inicializamos un npm<\/strong> proyecto utilizandonpm init -y<\/code> aceptando los valores por defecto con el-y<\/code> bandera.<\/p>\nInstalar dependencias de Express Server<\/h3>\n
npm install graphql express express-graphql couchbase && npm install nodemon -D && code .<\/code><\/pre>\nUna vez finalizada la instalaci\u00f3n, tenemos que abrir nuestro proyecto con nuestro editor de elecci\u00f3n. Yo prefiero VS Code.<\/p>\n
Crear nuestro servidor GraphQL<\/h3>\n
touch server.js .gitignore && echo \"\/node_modules\/*\" >> .gitignore<\/code><\/pre>\nRequerir
express\/express-graphql\/graphql<\/code> en nuestroservidor.js<\/code> file:<\/p>\nconst express = require('express')\r\nconst { graphqlHTTP } = require('express-graphql')\r\nconst { buildSchema } = require('graphql')\r\n \r\nconst couchbase = require('couchbase')<\/code><\/pre>\nLas tres primeras importaciones son necesarias para nuestro servidor GraphQL y la \u00faltima importaci\u00f3n es necesaria para conectar y consultar nuestro servidor Couchbase.<\/p>\n
Inicializar Express y conectarse a nuestro cubo<\/h3>\n
A\u00f1ade el siguiente c\u00f3digo:<\/p>\n
const app = express()\r\nconst cluster = new couchbase.Cluster('couchbase:\/\/localhost', { \r\n username: 'Administrator', password: 'password' \r\n})\r\nconst bucket = cluster.bucket('travel-sample')\r\nvar collection = bucket.defaultCollection();<\/code><\/pre>\nArriba estamos conectando a nuestro cluster de Couchbase Server, autenticando con nuestro usuario que configuramos, y abriendo nuestro
viaje-muestra<\/code> cubo. Nunca utilice nombres de usuario y contrase\u00f1as por defecto en aplicaciones de producci\u00f3n.<\/p>\nCrear nuestro esquema GraphQL<\/h3>\n
A\u00f1adiendo el siguiente c\u00f3digo definiremos dos endpoints que permitir\u00e1n a nuestro GraphQL Server acceder y recuperar datos de nuestros documentos dentro de nuestro bucket de Couchbase Server.<\/p>\n
const schema = buildSchema(`\r\n type Airline {\r\n id: Int,\r\n callsign: String,\r\n country: String,\r\n iata: String,\r\n icao: String,\r\n name: String,\r\n type: String\r\n }\r\n input AirlineInput {\r\n callsign: String,\r\n country: String,\r\n iata: String,\r\n icao: String,\r\n name: String,\r\n type: String\r\n }\r\n type Query {\r\n airlinesUK: [Airline],\r\n airlineByKey(id: Int!): Airline\r\n airlinesByRegion(region: String!): [Airline]\r\n }\r\n type Mutation {\r\n updateAirline(id: Int!, input: AirlineInput): Airline\r\n }<\/code><\/pre>\nEn
Consulta<\/code> especifica qu\u00e9 Consultas GraphQL<\/a> pueden ejecutar contra su propio gr\u00e1fico de datos.<\/p>\nTenemos dos puntos finales definidos por
Consulta<\/code>. Uno llamado \"airlinesUK\" y el otro \"airlineByKey\". En nuestra aplicaci\u00f3n React, s\u00f3lo utilizaremos el endpoint \"airlinesUK\". Hice el endpoint \"airlineByKey\" simplemente para mostrar un ejemplo de recuperaci\u00f3n de un \u00fanico documento Couchbase por clave. Esta operaci\u00f3n no utiliza el lenguaje de consulta N1QL y por lo tanto no tiene ninguna sobrecarga adicional. Entender cu\u00e1ndo y d\u00f3nde usar cada uno es importante desde la perspectiva de la construcci\u00f3n de la API, no querr\u00edamos usar una consulta N1QL para devolver un \u00fanico documento que podemos obtener por clave.<\/p>\nEn nuestro c\u00f3digo GraphQL, tenemos un objeto de tipo
L\u00ednea a\u00e9rea<\/code>. This object model the document structure found in our Couchbase `travel-sample` bucket where the type is “airline”.<\/p>\nA continuaci\u00f3n, tenemos un Endpoint llamado \"
compa\u00f1\u00edas a\u00e9reasUK<\/code>\". Observe que el valor de retorno de este punto final es una matriz de Aerol\u00edneas:[Aerol\u00ednea]<\/code>. Esto significa que volveremos a recibir una lista de compa\u00f1\u00edas a\u00e9reas.<\/p>\nTambi\u00e9n tenemos \"
airlineByKey<\/code>\"donde obtendremos un \u00fanico archivoL\u00ednea a\u00e9rea<\/code>.<\/p>\nSi recuerda nuestras im\u00e1genes de Bucket anteriores, cada documento se define mediante una clave con un formato como el siguiente
aerol\u00ednea_1234<\/code> donde1234<\/code> es elid<\/code> de la compa\u00f1\u00eda a\u00e9rea.<\/p>\n![\"travel-sample](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-document.jpg\")
<\/p>\nMantendremos este
id<\/code> a la hora de utilizar el SDK de NodeJS para obtener nuestroairlineByKey<\/code> utilizando un simplebucket.get()<\/code> m\u00e9todo.<\/p>\nCrear nuestra implementaci\u00f3n de Resolver para cada punto final<\/h3>\n
Ahora, que hemos definido dos consultas en nuestra API GraphQL-Express utilizando nuestro
esquema<\/code> necesitamos una implementaci\u00f3n en JavaScript para recuperar los datos.<\/p>\nNuestra aplicaci\u00f3n React que vamos a crear s\u00f3lo necesitar\u00e1 el archivo N1QL<\/strong> consulta denominada
compa\u00f1\u00edas a\u00e9reasUK<\/code>.<\/p>\nPero quer\u00eda mostrarte c\u00f3mo consultar sin N1QL<\/strong> utilizando la API del SDK de NodeJS utilizando s\u00f3lo una clave o extendi\u00e9ndola para utilizar una regi\u00f3n (US\/UK, etc..), que es la
airlineByKey<\/code> yairlineByRegion<\/code> aplicaci\u00f3n.<\/p>\nA\u00f1ada el siguiente c\u00f3digo a nuestro
servidor.js<\/code> para nuestras consultas N1QL:
\n(En su c\u00f3digo JS, aseg\u00farese de escapar los backticks con barras invertidas)<\/p>\n\/\/ Define N1QL Queries\r\nconst airlinesUkQuery = `\r\n SELECT airline.* \r\n FROM \\`travel-sample\\` AS airline \r\n WHERE airline.type = 'airline'\r\n AND airline.country = 'United Kingdom'\r\n`\r\nconst airlinesByRegionQuery = `\r\n SELECT airline.* \r\n FROM \\`travel-sample\\` AS airline \r\n WHERE airline.type = 'airline'\r\n AND airline.country = $REGION\r\n`<\/code><\/pre>\nA\u00f1ada el siguiente c\u00f3digo a nuestro
servidor.js<\/code> para nuestros resolvedores GraphQL:<\/p>\nconst root = {\r\n airlinesUK: async () => {\r\n const result = await cluster.query(airlinesUkQuery)\r\n return result.rows\r\n },\r\n \/*\r\n query getAirlinesUK {\r\n airlinesUK {\r\n id\r\n name\r\n callsign\r\n country\r\n iata\r\n icao\r\n }\r\n }\r\n *\/\r\n airlinesByRegion: async ({region}) => {\r\n const options = { parameters: { REGION: region } }\r\n const result = await cluster.query(airlinesByRegionQuery, options)\r\n return result.rows\r\n },\r\n \/*\r\n query getAirlinesByRegion($region: String!) {\r\n airlinesByRegion(region:$region) {\r\n id\r\n name\r\n callsign\r\n country\r\n iata\r\n icao\r\n }\r\n }\r\n {\r\n \"region\": \"{{country}}\"\r\n }\r\n *\/\r\n airlineByKey: async ({id}) => {\r\n const result = await collection.get(`airline_${id}`)\r\n return result.value\r\n },\r\n \/*\r\n query getAirlineByKey($id: Int!) {\r\n airlineByKey(id:$id) {\r\n id\r\n name\r\n callsign\r\n country\r\n iata\r\n icao\r\n }\r\n }\r\n {\r\n \"id\": {{id}}\r\n }\r\n *\/\r\n updateAirline: async ({id, input}) => {\r\n const result = await collection.get(`airline_${id}`)\r\n\r\n const newDocument = {\r\n ...result.content, \r\n callsign: input.callsign ? input.callsign : result.value.callsign,\r\n country: input.country ? input.country : result.value.country,\r\n iata: input.iata ? input.iata : result.value.iata,\r\n icao: input.icao ? input.icao : result.value.icao,\r\n name: input.name ? input.name : result.value.name,\r\n };\r\n\r\n console.log(newDocument)\r\n\r\n await collection.upsert(`airline_${id}`, newDocument)\r\n return newDocument\r\n }\r\n \/*\r\n mutation updateExistingAirline($id:Int!, $input:AirlineInput) {\r\n updateAirline(id:$id, input:$input){\r\n callsign\r\n country\r\n iata\r\n }\r\n }\r\n {\r\n \"id\": 112,\r\n \"input\": {\r\n \"callsign\": \"FLYSTAR\",\r\n \"country\": \"United Kingdom\"\r\n }\r\n }\r\n *\/\r\n}<\/code><\/pre>\nNota: En la sentencia N1QL anterior, tendr\u00e1 que escapar los puntos suspensivos en la l\u00ednea FROM alrededor de
`viaje-muestra<\/code> con barras invertidas. El ejemplo de c\u00f3digo de nuestro blog no muestra esas barras invertidas, pero est\u00e1n ah\u00ed y se encuentran en el archivo C\u00f3digo fuente final<\/a><\/p>\nPara entenderlo mejor, estamos utilizando dos m\u00e9todos diferentes para consultar nuestro servidor Couchbase.<\/p>\n
El primer m\u00e9todo corresponde al
compa\u00f1\u00edas a\u00e9reasUK<\/code> endpoint, este es su resolver. Necesitamos devolver una promesa y dentro confiar enbucket.query<\/code>para tomar una consulta N1QL predefinida que he desglosado l\u00ednea por l\u00ednea en la variable statement para facilitar la lectura. Poder ejecutar este tipo de consulta SQL es muy potente para una base de datos de documentos. Gran parte del SQL que conocemos se transfiere y esto es un gran alivio en comparaci\u00f3n con otras bases de datos de documentos que tienen una nueva API y un lenguaje de consulta que tendr\u00e1s que aprender.<\/p>\nEl segundo m\u00e9todo corresponde al
compa\u00f1\u00edas a\u00e9reasUK<\/code> endpoint, este es su resolver. Necesitamos devolver una promesa y dentro confiar encubo.get<\/code> y en este caso, s\u00f3lo estamos definiendo la clave de nuestro documento. Recuerde que una de las grandes cosas sobre el uso de un almac\u00e9n de datos clave-valor es que podemos elegir f\u00e1cilmente un solo documento con poca sobrecarga.<\/p>\nCada uno de los m\u00e9todos anteriores tambi\u00e9n comprueba si hay errores de consulta y los resuelve o los rechaza en funci\u00f3n de un valor de
resultado<\/code> oerror<\/code>.<\/p>\nCreaci\u00f3n de nuestro GraphQL con Express Server<\/h3>\n
Ahora que tenemos todo resuelto para nuestros puntos finales y consultas, todo lo que tenemos que hacer es
utilice<\/code> nuestro servidor Express y darle un puerto para ejecutar, vamos a hacer eso ahora.<\/p>\nA\u00f1ade el siguiente c\u00f3digo al final de nuestro
servidor.js<\/code> file:<\/p>\n\/* \r\n The graphqlHTTP function accepts a schema, rootValue and graphiql \r\n among other options for configuring our GraphQL Server \r\n*\/\r\nconst serverPort = 4000\r\nconst serverUrl = '\/graphql'\r\napp.use(serverUrl, graphqlHTTP({\r\n schema: schema,\r\n rootValue: root,\r\n graphiql: true\r\n}))\r\n\r\napp.listen(\r\n serverPort, \r\n () => console.log(`GraphQL server running: https:\/\/localhost:${serverPort}${serverUrl}`)\r\n)<\/code><\/pre>\nSi alguna vez has creado un servidor Express o Express-GraphQL, este c\u00f3digo deber\u00eda resultarte familiar.<\/p>\n
En primer lugar, configuramos nuestro puerto y URL GraphQL.<\/p>\n
A continuaci\u00f3n, pasamos nuestro esquema GraphQL y sus resolvers y establecemos nuestro
graphiql<\/code> a true. (Esto nos dar\u00e1 un IDE para probar nuestras consultas GraphQL disponibles en localhost:4000\/graphql<\/a>.<\/p>\nPor \u00faltimo, escuchamos en el puerto 4000 y ponemos un mensaje en la consola para indicar que nuestro servidor se est\u00e1 ejecutando.<\/p>\n
Vamos a ejecutar nuestro servidor, aseg\u00farese de que su Couchbase:<\/p>\n
nodo servidor<\/code><\/pre>\nUna vez que tenemos el servidor GraphQL en funcionamiento podemos probar la aplicaci\u00f3n
Compa\u00f1\u00edas a\u00e9reasUK<\/code> pegando el siguiente c\u00f3digo en el panel de consultas de GraphQL IDE:<\/p>\nquery getAirlinesUK{\r\n airlinesUK {\r\n id\r\n name\r\n callsign\r\n country\r\n iata\r\n icao\r\n }\r\n}<\/code><\/pre>\nComo indica la consulta, recuperar\u00e1 todas las compa\u00f1\u00edas a\u00e9reas con base en el Reino Unido:<\/p>\n
![\"GraphQL](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-graphiql-airlinesUK.jpg\")
<\/p>\nA continuaci\u00f3n, utilizaremos la funci\u00f3n
airlineByKey<\/code> en este ejemplo, tambi\u00e9n tendremos que crear una variable de consulta y pegarla en el panel correspondiente:<\/p>\nquery getAirlineByKey($id: Int!) {\r\n airlineByKey(id:$id){\r\n id\r\n name\r\n callsign\r\n country\r\n iata\r\n icao\r\n }\r\n}<\/code><\/pre>\n{\r\n \"id\": 112\r\n}<\/code><\/pre>\nY con eso en su lugar y podemos consultar de nuevo y recuperar un solo documento de la aerol\u00ednea por clave:<\/p>\n
![\"GraphQL](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-graphiql-airlineByKey.jpg\")
<\/p>\nCon una configuraci\u00f3n super sencilla de la API GraphQL, estamos listos para crear nuestra aplicaci\u00f3n react<\/a> que utilizar\u00e1 estos endpoints para una p\u00e1gina maestro-detalle utilizando las aerol\u00edneas del Reino Unido en un componente de lista y cuando hagamos clic en una aerol\u00ednea en particular, otro componente mostrar\u00e1 los detalles completos de la aerol\u00ednea en la parte derecha de la p\u00e1gina.<\/p>\n
- npm<\/a>\u00a0v5.x o posterior<\/li>\n
- Consultas y mutaciones<\/a><\/li>\n