\u00bfQu\u00e9 Es GraphQL?<\/h2>\n
Seg\u00fan la documentaci\u00f3n oficial<\/a>: \u00abGraphQL es un lenguaje de consulta para API y un tiempo de ejecuci\u00f3n para realizar esas consultas con los datos existentes. GraphQL proporciona una descripci\u00f3n completa y comprensible de los datos de tu API, da a los clientes el poder de pedir exactamente lo que necesitan y nada m\u00e1s, facilita la evoluci\u00f3n de las API con el tiempo y habilita potentes herramientas para desarrolladores.\u00bb<\/p>\n GraphQL es un tiempo de ejecuci\u00f3n del lado del servidor para ejecutar consultas utilizando el sistema de tipos que hayas definido para tus datos. Adem\u00e1s, GraphQL no est\u00e1 vinculado a ninguna base de datos o motor de almacenamiento espec\u00edfico. En su lugar, se apoya en tu c\u00f3digo y almac\u00e9n de datos existentes. Puedes obtener una comparaci\u00f3n detallada de estas tecnolog\u00edas con la gu\u00eda GraphQL vs. API RESTful<\/a>.<\/p>\n Para crear un servicio GraphQL, empieza definiendo tipos de esquema y creando campos que utilicen esos tipos. A continuaci\u00f3n, proporcionas una funci\u00f3n de resoluci\u00f3n que se ejecutar\u00e1 en cada campo y tipo cada vez que el cliente solicite datos.<\/p>\n El sistema de tipos GraphQL se utiliza para describir qu\u00e9 datos se pueden consultar y qu\u00e9 datos se pueden manipular. Es el core de GraphQL. Vamos a discutir las diferentes formas en que podemos describir y manipular datos en GraphQL.<\/p>\n Los tipos de objetos GraphQL son modelos de datos que contienen campos fuertemente tipificados. Debe haber una correspondencia 1 a 1 entre tus modelos y los tipos GraphQL. A continuaci\u00f3n se muestra un ejemplo de Tipo GraphQL:<\/p>\n GraphQL Query define todas las consultas que un cliente puede ejecutar en la API GraphQL. Debes definir un A continuaci\u00f3n definimos y asignamos las consultas a la correspondiente API RESTful:<\/p>\n Si las Consultas GraphQL son peticiones Pondremos todas las mutaciones en un \u00fanico Ya has comprobado el uso de tipos Puedes definir los tipos de entrada como se indica a continuaci\u00f3n:<\/p>\n Los Resolvers le dicen a GraphQL qu\u00e9 hacer cuando se solicita cada consulta o mutaci\u00f3n. Es una funci\u00f3n b\u00e1sica que hace el trabajo duro de acceder a la capa de base de datos para realizar las operaciones CRUD (crear, leer, actualizar, eliminar), acceder a un punto final RESTful API interno o llamar a un microservicio<\/a> para satisfacer la solicitud del cliente.<\/p>\n Puedes crear un nuevo archivo resolvers.js<\/strong> y a\u00f1adir el siguiente c\u00f3digo:<\/p>\n El esquema GraphQL es lo que GraphQL expone al mundo. Por lo tanto, los tipos, consultas y mutaciones se incluir\u00e1n dentro del esquema para ser expuestos al mundo.<\/p>\n A continuaci\u00f3n se explica c\u00f3mo exponer al mundo los tipos, consultas y mutaciones:<\/p>\n En el script anterior, incluimos el GraphQL proporciona una implementaci\u00f3n para los principales lenguajes de programaci\u00f3n, y Node.js no est\u00e1 exento. En el sitio web oficial de GraphQL<\/a>, hay una secci\u00f3n para la compatibilidad con JavaScript<\/a>, y adem\u00e1s, hay otras implementaciones de GraphQL para simplificar la escritura y la programaci\u00f3n.<\/p>\n GraphQL Apollo proporciona una implementaci\u00f3n para Node.js y Express.js y facilita los primeros pasos con GraphQL.<\/p>\n En la siguiente secci\u00f3n aprender\u00e1s a crear y desarrollar tu primera aplicaci\u00f3n GraphQL en Node.js y el framework backend Express.js<\/a> utilizando GraphQL Apollo.<\/p>\n Construir un servidor API GraphQL con Express.js es sencillo para comenzar. En esta secci\u00f3n, exploraremos c\u00f3mo construir un servidor GraphQL.<\/p>\n En primer lugar, necesitas instalar y configurar un nuevo proyecto Express.js. Crea una carpeta para tu proyecto e instala Express.js utilizando este comando:<\/p>\n El comando anterior crea un nuevo archivo package.json<\/strong> e instala la biblioteca Express.js en tu proyecto.<\/p>\n A continuaci\u00f3n, estructuraremos nuestro proyecto como se muestra en la siguiente imagen. Contendr\u00e1 diferentes m\u00f3dulos para las caracter\u00edsticas del proyecto, como usuarios, todos, etc.<\/p>\n Comencemos instalando las dependencias de GraphQL Express.js. Ejecuta el siguiente comando para instalar:<\/p>\n A continuaci\u00f3n, vamos a crear un archivo index.js<\/strong> dentro de la carpeta modules y a a\u00f1adir el siguiente fragmento de c\u00f3digo:<\/p>\n Vamos a trabajar con el fragmento de c\u00f3digo y a desglosarlo:<\/p>\n En primer lugar, importamos las bibliotecas necesarias y creamos los tipos de consulta y mutaci\u00f3n predeterminados. Por ahora, la consulta y la mutaci\u00f3n s\u00f3lo establecen la versi\u00f3n de la API GraphQL. Sin embargo, ampliaremos la consulta y la mutaci\u00f3n para incluir otros esquemas a medida que avancemos.<\/p>\n A continuaci\u00f3n creamos un nuevo tipo escalar para el tiempo y nuestro primer resolver para la consulta y mutaci\u00f3n creadas anteriormente. Adem\u00e1s, tambi\u00e9n generamos un esquema utilizando la funci\u00f3n El esquema generado incluye todos los dem\u00e1s esquemas que importamos y tambi\u00e9n incluir\u00e1 m\u00e1s cuando los creemos e importemos.<\/p>\n El fragmento de c\u00f3digo anterior muestra que hemos importado diferentes esquemas en la funci\u00f3n makeExecutableSchema. Este enfoque nos ayuda a estructurar la aplicaci\u00f3n para que sea m\u00e1s compleja. A continuaci\u00f3n, vamos a crear los esquemas Todo y Usuario que hemos importado.<\/p>\n El esquema Todo muestra operaciones CRUD sencillas que pueden realizar los usuarios de la aplicaci\u00f3n. A continuaci\u00f3n se muestra el esquema que implementa la operaci\u00f3n CRUD Todo.<\/p>\n Analicemos el fragmento de c\u00f3digo y desglos\u00e9moslo:<\/p>\n En primer lugar, creamos un esquema para nuestro Todo utilizando GraphQL A continuaci\u00f3n, creamos un resolver, que se utiliza para recuperar los datos correctos cuando se llama a una consulta o mutaci\u00f3n determinada.<\/p>\n Una vez creada la funci\u00f3n resolver, podemos crear m\u00e9todos individuales para la l\u00f3gica de negocio y la manipulaci\u00f3n de la base de datos, como se muestra en el ejemplo create-todo.js<\/strong>.<\/p>\n Crea un archivo create-user.js<\/strong> en la carpeta El fragmento de c\u00f3digo anterior es una forma simplificada de crear un nuevo Todo en nuestra base de datos utilizando el ORM Sequelize. Puedes obtener m\u00e1s informaci\u00f3n sobre Sequelize y c\u00f3mo configurarlo con Node.js<\/a>.<\/p>\n Puedes seguir el mismo paso para crear muchos esquemas dependiendo de tu aplicaci\u00f3n o puedes clonar el proyecto completo desde GitHub<\/a>.<\/p>\n A continuaci\u00f3n, vamos a configurar el servidor con Express.js y ejecutar la aplicaci\u00f3n Todo reci\u00e9n creada con GraphQL y Node.js.<\/p>\nTerminolog\u00eda GraphQL<\/h2>\n
Tipos de Objeto<\/h3>\n
type User {\n id: ID! # The \"!\" means required\n firstname: String\n lastname: String\n email: String\n username: String\n todos: [Todo] # Todo is another GraphQL type\n}<\/code><\/pre>\nConsultas<\/h3>\n
RootQuery<\/code> que contendr\u00e1 todas las consultas existentes por convenci\u00f3n.<\/p>\ntype RootQuery {\n user(id: ID): User # Corresponds to GET \/api\/users\/:id\n users: [User] # Corresponds to GET \/api\/users\n todo(id: ID!): Todo # Corresponds to GET \/api\/todos\/:id\n todos: [Todo] # Corresponds to GET \/api\/todos\n}<\/code><\/pre>\nMutaciones<\/h3>\n
GET<\/code>, las mutaciones son peticiones POST<\/code>, PUT<\/code>, PATCH<\/code>, y DELETE<\/code> que manipulan la API GraphQL.<\/p>\nRootMutation<\/code> para demostrarlo:<\/p>\ntype RootMutation {\n createUser(input: UserInput!): User # Corresponds to POST \/api\/users\n updateUser(id: ID!, input: UserInput!): User # Corresponds to PATCH \/api\/users\n removeUser(id: ID!): User # Corresponds to DELETE \/api\/users\n createTodo(input: TodoInput!): Todo\n updateTodo(id: ID!, input: TodoInput!): Todo\n removeTodo(id: ID!): Todo\n}<\/code><\/pre>\n-input<\/code> para las mutaciones como UserInput<\/code>, TodoInput<\/code>. Siempre es la mejor pr\u00e1ctica para definir los tipos de entrada para la creaci\u00f3n y actualizaci\u00f3n de tus recursos.<\/p>\ninput UserInput {\n firstname: String!\n lastname: String\n email: String!\n username: String!\n}<\/code><\/pre>\nResolvers<\/h3>\n
import sequelize from '..\/models';\nexport default function resolvers () {\n const models = sequelize.models;\n return {\n \/\/ Resolvers for Queries\n RootQuery: {\n user (root, { id }, context) {\n return models.User.findById(id, context);\n },\n users (root, args, context) {\n return models.User.findAll({}, context);\n }\n },\n User: {\n todos (user) {\n return user.getTodos();\n }\n },\n }\n \/\/ Resolvers for Mutations\n RootMutation: {\n createUser (root, { input }, context) {\n return models.User.create(input, context); \n },\n updateUser (root, { id, input }, context) {\n return models.User.update(input, { ...context, where: { id } });\n },\n removeUser (root, { id }, context) {\n return models.User.destroy(input, { ...context, where: { id } });\n },\n \/\/ ... Resolvers for Todos go here\n }\n}<\/code><\/pre>\nEsquema<\/h3>\n
schema {\n query: RootQuery\n mutation: RootMutation\n}<\/code><\/pre>\nRootQuery<\/code> y el RootMutation<\/code> que creamos anteriormente para exponerlos al mundo.<\/p>\n\u00bfC\u00f3mo Funciona GraphQL con Node.js y Express.js?<\/h2>\n
Configurar GraphQL con Express.js<\/h2>\n
Inicializar el Proyecto con Express<\/h3>\n
cd <project-name> && npm init -y\nnpm install express<\/code><\/pre>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/graphql-todo-structrue.png\")
Inicializar GraphQL<\/h3>\n
npm install apollo-server-express graphql @graphql-tools\/schema --save<\/code><\/pre>\nCrear Esquemas y Tipos<\/h3>\n
const { gql } = require('apollo-server-express');\nconst users = require('.\/users');\nconst todos = require('.\/todos');\nconst { GraphQLScalarType } = require('graphql');\nconst { makeExecutableSchema } = require('@graphql-tools\/schema');\nconst typeDefs = gql`\n scalar Time\n type Query {\n getVersion: String!\n }\n type Mutation {\n version: String!\n }\n`;\nconst timeScalar = new GraphQLScalarType({\n name: 'Time',\n description: 'Time custom scalar type',\n serialize: (value) => value,\n});\nconst resolvers = {\n Time: timeScalar,\n Query: {\n getVersion: () => `v1`,\n },\n};\nconst schema = makeExecutableSchema({\n typeDefs: [typeDefs, users.typeDefs, todos.typeDefs],\n resolvers: [resolvers, users.resolvers, todos.resolvers],\n});\nmodule.exports = schema;<\/code><\/pre>\nRecorrido del C\u00f3digo<\/h4>\n
Paso 1<\/h5>\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-1.png\")
Paso 2:<\/h5>\n
makeExecutableSchema<\/code>.<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-2.png\")
Creaci\u00f3n del Esquema Todo<\/h3>\n
const { gql } = require('apollo-server-express');\nconst createTodo = require('.\/mutations\/create-todo');\nconst updateTodo = require('.\/mutations\/update-todo');\nconst removeTodo = require('.\/mutations\/delete-todo');\nconst todo = require('.\/queries\/todo');\nconst todos = require('.\/queries\/todos');\nconst typeDefs = gql`\n type Todo {\n id: ID!\n title: String\n description: String\n user: User\n }\n input CreateTodoInput {\n title: String!\n description: String\n isCompleted: Boolean\n }\n input UpdateTodoInput {\n title: String\n description: String\n isCompleted: Boolean\n } extend type Query {\n todo(id: ID): Todo!\n todos: [Todo!]\n }\n extend type Mutation {\n createTodo(input: CreateTodoInput!): Todo\n updateTodo(id: ID!, input: UpdateTodoInput!): Todo\n removeTodo(id: ID!): Todo\n }\n`;\n\/\/ Provide resolver functions for your schema fields\nconst resolvers = {\n \/\/ Resolvers for Queries\n Query: {\n todo,\n todos,\n },\n \/\/ Resolvers for Mutations\n Mutation: {\n createTodo,\n updateTodo,\n removeTodo,\n },\n};\nmodule.exports = { typeDefs, resolvers };<\/code><\/pre>\nRecorrido del C\u00f3digo<\/h4>\n
Paso 1:<\/h5>\n
type<\/code>, input<\/code>, y extend<\/code>. La palabra clave extend<\/code> se utiliza para heredar y a\u00f1adir nuevas consultas y mutaciones a la consulta root y mutaci\u00f3n existentes que creamos anteriormente.<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-3.png\")
Paso 2:<\/h5>\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0.png\")
.\/mutations<\/code> y a\u00f1ade la l\u00f3gica de negocio para crear un nuevo Todo en tu base de datos.<\/p>\nconst models = require('..\/..\/..\/models');\nmodule.exports = async (root, { input }, context) => {\n return models.todos.push({ ...input });\n};<\/code><\/pre>\nConfigurar y Ejecutar el Servidor<\/h3>\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/new_graphql_playground.png\")