├── LICENSE ├── README.md └── images ├── apollo.png └── graphql.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Juan David Nicholls Cardona 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Apollo 2 | ********************************************** 3 | Es un intermediario entre el cliente y los datos. Permite una conexión flexible vía HTTP, es decir no requiere una conexión DDP y se puede consultar otras APIs dentro de la aplicación sin mayor configuración. En cuanto a **Meteor** permite trabajar con otras bases de datos en vez de **MongoDB**. 4 | 5 | - **Server:** 6 | 7 | Proceso que se situa entre las fuentes de datos y el código cliente. 8 | Se encarga de unificar cualquier número de bases de datos en un único flujo de datos accesibles al cliente. 9 | Escucha las peticiones del cliente, realiza peticiones a fuentes (bases de datos/APIs) y devuelve los datos estructurados. 10 | 11 | - **Client:** 12 | 13 | Una interfaz entre la UI y el servidor. Con React el cliente se asemeja al Redux store provider. 14 | 15 | ![Apollo](images/apollo.png) 16 | 17 | # GraphQL 18 | ********************************************** 19 | Lenguaje de consulta de aplicaciones. Es una especificación y Apollo es la implementación. 20 | Su propósito es cambiar la naturaleza de la relación datos-aplicación. 21 | Es una arquitectura con una sintaxis para la consulta de datos y es la base de Apollo. 22 | Es una mejora de las capas de consulta: **REST**, **SOAP** y **DDP**. 23 | 24 | ![Approach](images/graphql.png) 25 | 26 | **La idea es evitar:** 27 | - Duplicación de código (Componentes reutilizables). 28 | - Enviar información extra a otros clientes cuando se agregan nuevos campos a endpoints existentes a medida que la aplicación lo requiere. 29 | 30 | **Objetivo:** 31 | - El cliente solicita únicamente los datos que necesita. 32 | - Transmitir la cantidad mínima de datos necesarios por cada componente de la aplicación sin perder la reactividad. 33 | - Esquema auto-documentado: Después de configurado el esquema, GraphiQL puede mostrar perfiles sobre los datos que se almacenan 34 | https://github.com/graphql/graphiql 35 | - Disminuir la relación ruta-documentación-mantenimiento en las peticiones. 36 | 37 | **Ejemplo:** 38 | ```graphql 39 | { 40 | authors(count:5){ 41 | _id, 42 | name 43 | }, 44 | author(_id:"indi"){ 45 | twitterHandle 46 | }, 47 | otherAuthor: author(_id:"lol"){ 48 | twitterHandle 49 | }, 50 | recentPosts(count: 2) { 51 | title, 52 | comments(limit: 1) { 53 | content 54 | } 55 | } 56 | } 57 | ``` 58 | 59 | ## Obstáculos: 60 | ********************************************** 61 | - **Productividad:** La estructura de datos es diferente para soportar el formato de una única consulta, por lo cual hay que aprender a trabajar con la sintaxis. 62 | - Cambio de paradigma para saber como configurar el servidor y el gráfico de los datos. 63 | - Utilizar la sintaxis adecuada para desarrollar de manera eficiente (Ensayo y error) 64 | - Poca documentación en los ejemplos por lo reciente que es el proyecto. (Frustrado y Confundido) 65 | 66 | ## Introducción 67 | ********************************************** 68 | - Código servidor ES6 => https://github.com/lukehoban/es6features 69 | - Definición de esquemas con Node.js, para aprender => https://nodeschool.io/ 70 | - Conocer Git => https://try.github.io/levels/1/challenges/1 71 | - *Root query fields* => a field of the root of the graph. 72 | - Arguments: 73 | 74 | _id: String! //El signo "!" significa que es requerido. 75 | - Mutations: Modificar el conjunto de datos detrás del esquema. 76 | 77 | ```graphql 78 | mutation { 79 | createAuthor( 80 | _id: "john", 81 | name: "John Carter", 82 | twitterHandle: "@john" 83 | ) { 84 | _id 85 | name 86 | } 87 | } 88 | ``` 89 | - Multiple mutations are executed in sequence to prevent errors: 90 | 91 | ```graphql 92 | mutation { 93 | john: createAuthor( 94 | _id: "john", 95 | name: "John Carter", 96 | twitterHandle: "@john" 97 | ) { 98 | _id 99 | name 100 | }, 101 | laura: createAuthor( 102 | _id: "laura", 103 | name: "Laura Carter", 104 | twitterHandle: "@laura" 105 | ) { 106 | _id 107 | name 108 | } 109 | } 110 | ``` 111 | 112 | - Fragments: Agrupar campos de uso común para reutilizarlos. 113 | 114 | "...": spread operator 115 | ```graphql 116 | { 117 | arunoda: author(_id: "arunoda") { 118 | ...authorInfo, 119 | twitterHandle 120 | }, 121 | indi: author(_id: "indi") { 122 | ...authorInfo 123 | } 124 | } 125 | fragment authorInfo on Author { 126 | _id, 127 | name, 128 | comments { 129 | content 130 | } 131 | } 132 | ``` 133 | 134 | - Nested Fragments: Anidar y reutilizar campos agrupados. 135 | ```graphql 136 | { 137 | post1: post(_id: "03390abb5570ce03ae524397d215713b") { 138 | ...postInfo 139 | }, 140 | post2: post(_id: "0176413761b289e6d64c2c14a758c1c7") { 141 | ...postInfo 142 | } 143 | } 144 | 145 | fragment postInfo on Post { 146 | title, 147 | content, 148 | ...authorInfo, 149 | comments { 150 | content, 151 | ...authorInfo 152 | } 153 | } 154 | 155 | fragment authorInfo on HasAuthor { 156 | author { 157 | _id, 158 | name 159 | } 160 | } 161 | ``` 162 | 163 | - Variables: 164 | 165 | "query": Darle un nombre al query 166 | ```graphql 167 | query getFewPosts { 168 | recentPosts(count: 10) { 169 | title 170 | } 171 | } 172 | query getFewPosts($postCount: Int!) { 173 | recentPosts(count: $postCount) { 174 | title 175 | } 176 | } 177 | ``` 178 | 179 | - Variables with Fragments: 180 | ```graphql 181 | query getFewPosts($postCount: Int!, $commentCount: Int) { 182 | recentPosts(count: $postCount) { 183 | title, 184 | ...comments 185 | } 186 | } 187 | 188 | fragment comments on Post { 189 | comments(limit: $commentCount) { 190 | content 191 | } 192 | } 193 | ``` 194 | 195 | - Input types: 196 | Solo se puede utilizar un sub-conjunto de tipos, como: 197 | - Int, String and Boolean (Escalares) 198 | - Enums 199 | - Arrays 200 | 201 | ## Crear un proyecto: 202 | ********************************************** 203 | ```cmd 204 | npm init -f 205 | npm i -g babel-cli 206 | npm install babel-preset-es2015 --save 207 | babel-node index.js //transpile ES2015 into ES5 208 | npm install graphql --save //Isomorphic module, permite definir los esquemas para ejecutar queries. 209 | babel-node index.js --presets "es2015" //Run the code 210 | ``` 211 | 212 | - Ejecutando queries: 213 | ```javascript 214 | let query = ` 215 | { 216 | receivedMessage: echo(message: "Hello") 217 | } 218 | `; 219 | graphql(Schema, query).then(function(result) { 220 | console.log(result); 221 | }); 222 | 223 | let query = ` 224 | query getEcho($inputMessage: String) { 225 | receivedMessage: echo(message: $inputMessage) 226 | } 227 | `; 228 | graphql(Schema, query, null, {inputMessage: "Hello"}).then(function(result) { 229 | console.log(result); 230 | }); 231 | ``` 232 | 233 | ## Recursos 234 | ********************************************** 235 | Nombre | Enlaces 236 | ---------- | ------------- 237 | Especificación | - http://facebook.github.io/graphql/
- https://github.com/facebook/graphql 238 | Implementación | - https://github.com/graphql/graphql-js
- https://github.com/kadirahq/lokka 239 | Diseño de alto nivel | - https://github.com/apollostack/apollo/blob/master/design/high-level-reactivity.md 240 | Introducción | - http://graphql.org/learn/ 241 | Curso interactivo | - https://learngraphql.com/ 242 | Consola | - https://sandbox.learngraphql.com/ 243 | Ejemplos | - https://github.com/chentsulin/awesome-graphql
- https://github.com/kadirahq/graphql-blog-schema/blob/master/src/schema.js
- https://github.com/graphql/graphql-js/blob/master/src/__tests__/starWarsSchema.js 244 | Crear GraphQL HTTP server con Express | - https://github.com/graphql/express-graphql 245 | Node.js GraphQL ORM | - https://github.com/RisingStack/graffiti 246 | GraphQL & Relay para MySQL & Postgres via Sequelize | - https://github.com/mickhansen/graphql-sequelize 247 | GraphQL + BookshelfJS | - https://github.com/brysgo/graphql-bookshelf 248 | Crear servidores GraphQL listos para producción | - https://github.com/lucasbento/create-graphql 249 | 250 | ## Supporting 🍻 251 | I believe in Unicorns 🦄 252 | Support [me](http://www.paypal.me/jdnichollsc/2), if you do too. 253 | 254 | Donate **Ethereum**, **ADA**, **BNB**, **SHIBA**, **USDT/USDC**, **DOGE**, etc: 255 | 256 | > Wallet address: jdnichollsc.eth 257 | 258 | Please let us know your contributions! 🙏 259 | 260 | ## Happy coding 261 | Made with <3 262 | 263 | 264 | 265 | -------------------------------------------------------------------------------- /images/apollo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdnichollsc/GraphQL/93fbd4ede7b218fd0807384dca71ea6b6a0ea75f/images/apollo.png -------------------------------------------------------------------------------- /images/graphql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdnichollsc/GraphQL/93fbd4ede7b218fd0807384dca71ea6b6a0ea75f/images/graphql.png --------------------------------------------------------------------------------