├── EXTENSIONS.md ├── LICENSE ├── MY-PUBLIC-APIS.md ├── NPM_DEPENDENCIES.md ├── PRACTICAS-PLAYGROUND.md ├── VSC_EXT.md └── practicas-playground ├── 1-Formula-1.md └── 2-rest-countries.md /EXTENSIONS.md: -------------------------------------------------------------------------------- 1 | A continuación os añado la lista de extensiones que uso para el curso. Si encontráis alguna interesante que pueda ser útil para el desarrollo del curso, comentarlo en el apartado de preguntas / respuestas relacionado a esta clase. 2 | 3 | **Puede que alguna de estas con el tiempo y usando unas versiones + nuevas, por alguna razón que no funcionen bien, por lo que os pido que me aviséis, ya que si no hacen su trabajo bien y nos va a ocasionar problemas, mejor no usarlas** 4 | 5 | * [Angular V8 Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2): Añade fragmentos de código en Angular con Typescript y HTML. 6 | 7 | * [Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets](https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode): Añade fragmentos de Bootstrap 4, Font awesome 4 & Font Awesome 5 Free & Pro. 8 | 9 | * [Node.js Modules Intellisense](https://marketplace.visualstudio.com/items?itemName=leizongmin.node-module-intellisense): Para autocompletar en Javascript / Typescript cuando estamos importando módulos. 10 | 11 | * [Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport): Ayuda para importar librerías, clases,... 12 | 13 | * [GraphQL Prisma](https://marketplace.visualstudio.com/items?itemName=Prisma.vscode-graphql): Para poder trabajar + cómodamente en los ficheros .graphql 14 | 15 | * La Extensión de TS Lint se ha deprecado en VSCode, se sugiere usar en su lugar [ESLint](https://johnserrano.co/blog/configurar-eslint-con-vscode-para-javascript). Gracias por el aviso [Gib-Iglesias](https://github.com/Gib-Iglesias) 16 | 17 | * [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) (esto se usa en el curso Premium): Para trabajar en ficheros con extensión .env donde vamos a gestionar las variables de entorno. 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 GraphQL Courses 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 | -------------------------------------------------------------------------------- /MY-PUBLIC-APIS.md: -------------------------------------------------------------------------------- 1 | # Lista de APIs 2 | 3 | ## Votaciones en tiempo Real Personajes Breaking Bad 4 | 5 | Sistema de votaciones en tiempo real que gestiona el envio de votaciones y actualiza en tiempo real gracias al uso de los suscriptions mediante conexión de Web Sockets. 6 | 7 | ### Características principales 8 | * Bases de datos MongoDB. 9 | * Tipos de raíz: Query, Mutation y Suscriptions. 10 | 11 | ### Fecha de inicio / Final 12 | 13 | Julio 2019 / Julio 2019. 14 | 15 | Acceso a la API: https://breaking-bad-voting.herokuapp.com/ 16 | 17 | Demo usando la API: https://breaking-bad-f1ffd.firebaseapp.com/ 18 | 19 | ====================================================================== 20 | ## Conversión API REST a GraphQL - API RAWG 21 | 22 | Conversión de la API REST Rawg a una API GraphQL. 23 | 24 | ### Características principales 25 | * Datasource REST. 26 | * Tipos de raíz: Query. 27 | * Modularización Schemas / Resolvers. 28 | * Despliegue continuo (CD). 29 | * TSLint. 30 | 31 | ### Fecha de inicio / Final 32 | 33 | Febrero 2020 / -. 34 | 35 | Acceso a la API: https://rawg-api.now.sh/ 36 | Repositorio: https://github.com/mugan86/rawg-api 37 | 38 | ====================================================================== 39 | 40 | Iré añadiendo + APIs poco a poco en base a desarrollar más. 41 | -------------------------------------------------------------------------------- /NPM_DEPENDENCIES.md: -------------------------------------------------------------------------------- 1 | # Dependencias de NPM que se usará en común 2 | 3 | * [Typescript](https://www.typescriptlang.org/) 4 | * [Nodemon](https://www.npmjs.com/package/nodemon) 5 | * [Ts-Node](https://www.npmjs.com/package/nodemon) 6 | -------------------------------------------------------------------------------- /PRACTICAS-PLAYGROUND.md: -------------------------------------------------------------------------------- 1 | # Prácticas a realizar para repasar lo aprendido en el playground 2 | 3 | Me gustaría que cogáis más soltura con el playground, ya que es un aspecto muy importante en el desarrollo de APIs de GraphQL de cara a consumir esa información. Haciendo uso de las diferentes opciones, podemos conseguir el mismo resultado añadiendo cnsultas más simples y ese es el verdadero objetivo, saber trabajar con directivas (skip / include), hacer uso de fragments, query variables... 4 | 5 | Los ejercicios los voy poniendo de menos a más, de consultas sencillas hasta consultas + avanzadas. Espero que lo intentéis y no recurráis al resultado sin intentarlo. 6 | 7 | Fundamental que os metáis a ver la documentación de esa API para saber que elementos necesitáis para hacer las consultas y mostrar los resultados. 8 | 9 | ¡¡Poco a poco, con paciencia!! 10 | 11 | * [PRÁCTICA 1 - API Formula 1](/practicas-playground/1-Formula-1.md) 12 | 13 | * [PRÁCTICA 2.- Rest Countries](/practicas-playground/2-rest-countries.md) 14 | 15 | ## Me gustaría que propusieráis vosotros con lo que queráis trabajar, para centrarme en lo que queráis. 16 | 17 | Enlace a la API: Pendiente de añadir propuestas. 18 | 19 | 20 | -------------------------------------------------------------------------------- /VSC_EXT.md: -------------------------------------------------------------------------------- 1 | # Información acerca de Visual Studio Code y las extensiones 2 | 3 | ## Visual Studio Code 4 | 5 | La versión actual estable de [Visual Studio Code](https://code.visualstudio.com/) es la 1.4.2. [Más información](https://code.visualstudio.com/updates/v1_42) 6 | 7 | Para descarga dicha versión: [Aquí](https://code.visualstudio.com/#alt-downloads) 8 | 9 | ## Extensiones 10 | 11 | Extensiones que servirán para customizar nuestro editor de código. 12 | 13 | * [Lista con todas las extensiones.](https://marketplace.visualstudio.com/VSCode) 14 | * [Extensiones de los cursos de GraphQL.](./EXTENSIONS.md) 15 | -------------------------------------------------------------------------------- /practicas-playground/1-Formula-1.md: -------------------------------------------------------------------------------- 1 | ## PRÁCTICA 1.- API Formula 1 2 | 3 | Enlace a la API: https://f1-graphql.herokuapp.com/ 4 | 5 | ## A.- Temporadas (seasonsList) 6 | 7 | ### 1.- Obtener lista de todas las temporadas seasonsList 8 | 9 | Las propiedades que se mostrarán. 10 | * year 11 | * url 12 | * urlMobile 13 | 14 | ### 2.- Obtener lista de todas las temporadas seasonsList con URL Mobile o no (haciendo uso de directiva include) 15 | Lista de temporadas mostrando toda la información disponible dependiendo de si queremos añadir la url del móvil o no. Todo depende de la directiva **"include"**. Recordar que la directiva se añadía en una propiedad al final con "@include(if: )" y que en la query variables tenemos que pasar ese argumento 16 | 17 | Ejemplo: 18 | 19 | ``` 20 | QUERY 21 | query getList($show: Boolean!){ 22 | characters { 23 | id 24 | name 25 | actor @include(if: $show) 26 | votes 27 | } 28 | } 29 | QUERY VARIABLES 30 | { 31 | "show": false //En este caso solo mostraría id, name y votes 32 | } 33 | ``` 34 | 35 | ### 3.- Obtener lista de todas las temporadas seasonsList con URL Mobile o no (haciendo uso de directiva skip) 36 | Lista de temporadas mostrando toda la información disponible dependiendo de si queremos añadir la url del móvil o no. Todo depende de la directiva **"skip"**. Recordar que la directiva se añadía en una propiedad al final con "@skip(if: )" y que en la query variables tenemos que pasar ese argumento. Es lo mismo que el anterior, pero en este caso será trabajando de manera inversa en los valores del Query Variables. 37 | 38 | Ejemplo: 39 | ``` 40 | QUERY 41 | query getList($hide: Boolean!){ 42 | characters { 43 | id 44 | name 45 | actor @skip(if: $hide) 46 | votes 47 | } 48 | } 49 | QUERY VARIABLES 50 | { 51 | "hide": true //En este caso solo mostraría id, name y votes 52 | } 53 | ``` 54 | ### 4.- Obtener lista de todo las temporadas seasonsList haciendo uso de un Fragment para añadir la información de la temporada 55 | 56 | Vamos a empezar a practicar con elementos que nos van a permitir tener consultas más limpias. Haremos uso de los Fragments basándonos en el ejercicio 1 donde obtenemos la lista de todas las temporadas. Es simplemente refactorizar dentro de un Fragment la información. 57 | 58 | Pasar de algo así: 59 | ``` 60 | { 61 | characters { 62 | id 63 | name 64 | actor 65 | votes 66 | } 67 | } 68 | 69 | ``` 70 | A esto: 71 | ``` 72 | { 73 | characters { 74 | ...CharacterObject 75 | } 76 | } 77 | fragment CharacterObject on Character { 78 | id 79 | name 80 | actor 81 | votes 82 | } 83 | ``` 84 | Como veís, el objeto Character, que tiene las propiedades id, name, actor, votes,... lo hemos añadido como un Fragment y ahora imaginaros que voy a hace consulta de 2 personajes especificos, pues gracias a ello, tendré que pone menos información. 85 | 86 | Por ejemplo, haciendo uso de este elemento si hacemos las consultas especificas: 87 | Pasar de algo así: 88 | ``` 89 | { 90 | character(id: "1" { 91 | id 92 | name 93 | actor 94 | votes 95 | } 96 | character(id: "2" { 97 | id 98 | name 99 | actor 100 | votes 101 | } 102 | } 103 | 104 | ``` 105 | A esto: 106 | ``` 107 | { 108 | character(id: "1") { 109 | ...CharacterObject 110 | } 111 | character(id: "2") { 112 | ...CharacterObject 113 | } 114 | } 115 | fragment CharacterObject on Character { 116 | id 117 | name 118 | actor 119 | votes 120 | } 121 | ``` 122 | Consiguiendo el mismo resultado y como podéis apreciar, escribiendo bastante menos información. Ahí se ve realmente la utilidad de usar Fragment. 123 | ... 124 | 125 | ### 5.- Combinar el uso del Fragment con la directiva include 126 | 127 | Cogemos el ejercicio #2 y lo modificamos para hacer uso con un Fragment. 128 | 129 | ### 6.- Combinar el uso del Fragment con la directiva skip 130 | Cogemos el ejercicio #3 y lo modificamos para hacer uso con un Fragment. 131 | 132 | Resultado: 133 | 134 | ## B.- Pilotos (drivers, historyDrivers, driversYear, driversCount) 135 | 136 | ### 1.- Obtener número de pilotos 137 | 138 | Una consulta que nos devolverá el número de pilotos. Fijaros bien dentro de la documentación. 139 | 140 | ### 2.- Obtener pilotos del año 2019 141 | 142 | Las propiedades que se mostrarán. 143 | * id 144 | * url 145 | * urlMobile 146 | * name 147 | * dateOfBirth 148 | * nationality 149 | * code 150 | * permanentNumber 151 | 152 | ### 3.- Obtener pilotos del año 2018 153 | 154 | Mostrar las mismas propiedades, únicamente cambia el año 155 | 156 | ### 4.- Obtener pilotos de los años 2012 al 2016 157 | 158 | Mostrar las mismas propiedades, únicamente cambia el año. Ejecutar varias consulas en la misma query. 159 | 160 | Ejemplo: 161 | ``` 162 | { 163 | character(id: "1" { 164 | id 165 | name 166 | actor 167 | votes 168 | } 169 | character(id: "2" { 170 | id 171 | name 172 | actor 173 | votes 174 | } 175 | } 176 | ``` 177 | 178 | ### 5.- Obtener pilotos de la ronda 5 del año 2018 179 | 180 | Obtenemos mediante el año y ronda el resultado con la lista de pilotos. 181 | 182 | ### 6.- Obtener pilotos de la ronda 1 del año 2019 183 | 184 | Obtenemos mediante el año y ronda el resultado con la lista de pilotos. 185 | 186 | ### 7.- Añadir el uso del Fragment en las consultas anteriores de este apartado. 187 | 188 | Cogemos las consultas de los ejercicios 5 y 6, los añadimos juntos y hacemos uso del fragment. 189 | 190 | Recordad esto y aplicarlo en nuestro ejemplo: 191 | ``` 192 | { 193 | character(id: "1" { 194 | ...CharacterObject 195 | } 196 | character(id: "2" { 197 | ...CharacterObject 198 | } 199 | } 200 | fragment CharacterObject on Character { 201 | id 202 | name 203 | actor 204 | votes 205 | } 206 | ``` 207 | 208 | ### 8.- Combinar el uso del Fragment con la directiva include usando la B-2 209 | 210 | Asignamos la directiva "include" para mostrar el "code" e "id" del piloto cuando le decimos que si. Tenemos que añadir la directiva en esas propiedades y hacer uso del Query Variables. 211 | 212 | Cogemos el ejercicio #2 y lo modificamos para hacer uso con un Fragment. 213 | 214 | ### 9.- Combinar el uso del Fragment con la directiva skip usando la B-2 215 | 216 | Asignamos la directiva "skip" para ignorar el "code" e "id" del piloto cuando le decimos que si. Tenemos que añadir la directiva en esas propiedades y hacer uso del Query Variables. 217 | 218 | Cogemos el ejercicio #2 y lo modificamos para hacer uso con un Fragment. 219 | 220 | ### 10.- Crear vuestras Queries con las diferentes variantes que os he dado y usando las definiciones del Schema 221 | 222 | Como repaso, os dejo que libremente intentéis ejecutar diferentes queries (no tengáis miedo a probar y "romper" el playground, que es como se aprende) y posteriormente que los compartáis en el apartado de preguntas y respuestas o mediante el grupo **"GraphQL - Español"**. 223 | 224 | **Enunciado preparado el 30/04/2020** 225 | 226 | Os animo a que añadáis vuestra solución en el apartado de preguntas / respuestas del curso y si no es posible, porque estáis en el gratuito, hacerlo en el grupo de Facebook "GraphQL - Español". 227 | 228 | Añadir el título "Playground - Práctica 1" -------------------------------------------------------------------------------- /practicas-playground/2-rest-countries.md: -------------------------------------------------------------------------------- 1 | ## PRÁCTICA 2.- Countries V2 2 | 3 | Enlace a la API: https://countries-274616.ew.r.appspot.com/ 4 | 5 | Ejercicios aportados por Enzo Puyol (https://github.com/EnzoPujol) (¡¡¡MUCHAS GRACIAS AMIGO!!!) 6 | 7 | ## A.- Paises (Country) 8 | 9 | ### 1.- Obtener lista de todos los países con "Country" 10 | 11 | Las propiedades que se mostrarán. 12 | * area 13 | * capital 14 | * name 15 | * nativeName 16 | 17 | ### 2.- Obtener lista de todos los países "Country" con nombre (name) original o no (haciendo uso de directiva include) 18 | Lista de los países mostrando toda la información disponible dependiendo de si queremos añadir el nombre (name) originak o no. Todo depende de la directiva **"include"**. Recordar que la directiva se añadía en una propiedad al final con "@include(if: )" y que en la query variables tenemos que pasar ese argumento 19 | 20 | ### 3 - Obtener una lista de todas las zonas temporales - husos horarios (Timezone) junto a la lista de los países que forman partes de ellas. 21 | En este caso queremos obtener la lista de todos los husos horarios / zonas horarias junto con la lista con los datos básicos, ese será el mínimo que se requiere para obtener el ejercicio concluido, pero si se quiere añadir alguna información más de manera extra, podéis hacerlo 22 | 23 | Las propiedades que se mostrarán serán las siguientes: 24 | * name (del timezone) 25 | * Lista de paises que corresponden a ese zona horario 26 | 27 | 4 - Agregar al inciso anterior la obtención de los idiomas 28 | oficiales de cada país. 29 | 30 | 5 - Agregar al inciso anterior la directiva include para los países, 31 | y la directiva skip para los idiomas de cada país. 32 | 33 | 6 - Ordenar los idiomas oficiales por orden ascendente. 34 | 35 | 7 - Implementar el uso de Fragment en la obtención tanto de los 36 | países como de los idiomas oficiales. 37 | 38 | 39 | #Para cada uno de los incisos, los elementos a devolver de cada 40 | objeto son a elección, mira bien la documentación para saber un poco más ;) 41 | 42 | --------------------------------------------------------------------------------