Repository files navigation

1. Crear el proyecto desde el generador
2. API ergast
3. Añadir la fuente de tados de la API y de las temporadas
4. Definición del schema
5. Lista de temporadas
6. Solucionar problema de valores nulos
7. Lista de carreras de una temporada: preparativos
8. Lista de carreras de una temporada: definición del schema
9. Lista de carreras de un año seleccionado

Para crear el proyecto vamos a utilizar elgenerador de proyectos GraphQL en su versión más básica (graphql-hello-world).

Necesitaremos además dos librerías adicionaes:

• apollo-datasource-rest
• apollo-server

npm i apollo-datasource-rest apollo-server

Para realizar este proyecto vamos a basarnos en la api ergast de Fórmula 1link.

• Carreras

  De un año concreto:

  • URL:https://ergast.com/api/f1/

  • API:https://ergast.com/api/f1/.json

  De un año concreto y carrera concreta:

  • URL:https://ergast.com/api/f1//

  • API:https://ergast.com/api/f1//.json

• Pilotos

  Pilotos de la historia - Todos:

  • URL:https://ergast.com/api/f1/drivers?limit=1000

  • API:https://ergast.com/api/f1/drivers.json?limit=1000

  Pilotos con resultados por página - x pilotos por página

  • URL:https://ergast.com/api/f1/drivers?limit=x

  • API:https://ergast.com/api/f1/drivers.json?limit=x&offset=( - 1) * x

  Piloto seleccionado:

  • URL:https://ergast.com/api/f1/drivers/

  • API:https://ergast.com/api/f1/drivers/.json

• Temporadas

  Temporadas de la historia - Todos:

  • URL:https://ergast.com/api/f1/seasons?limit=100

  • API:https://ergast.com/api/f1/seasons.json?limit=100

• Circuitos

  Circuitos de la historia - Todos:

  • URL:https://ergast.com/api/f1/seasons?limit=500

  • API:https://ergast.com/api/f1/seasons.json?limit=500

  Circuitos con resultados por página - x pilotos por página

  • URL:https://ergast.com/api/f1/circuits?limit=x

  • API:https://ergast.com/api/f1/circuits.json?limit=x&offset=( - 1) * x

  Circuito seleccionado:

  • URL:https://ergast.com/api/f1/circuits/

  • API:https://ergast.com/api/f1/circuits/.json

• Estadísticas

  Clasificación de la temporada - Pilotos:

  • URL:http://ergast.com/api/f1//driverStandings

  • API:http://ergast.com/api/f1//driverStandings.json

  Clasificación de la temporada - Constructores:

  • URL:http://ergast.com/api/f1//constructorStandings

  • API:http://ergast.com/api/f1//constructorStandings.json

  Clasificación de la carrera y año - Pilotos:

  • URL:http://ergast.com/api/f1///driverStandings

  • API:http://ergast.com/api/f1///driverStandings.json

  Clasificación de la carrera y año - Constructores:

  • URL:http://ergast.com/api/f1///constructorStandings

  • API:http://ergast.com/api/f1///constructorStandings.json

  Resultados de una carrera profesional de un piloto:

  • URL:http://ergast.com/api/f1/drivers/<ID_DRIVER>/driverStandings

  • API:http://ergast.com/api/f1/drivers/<ID_DRIVER>/driverStandings.json

Creamos la carpetasrc/data y en ella los siguientes archivos:

• data-source-ts:

import{RESTDataSource}from"apollo-datasource-rest";exportclassF1extendsRESTDataSource{constructor(){super();this.baseURL='https://ergast.com/api/f1/'}}

• data-seasons.ts:

import{F1}from'./data-source';exportclassSeasonsDataextendsF1{constructor(){super();}}

• index.ts:

import{SeasonsData}from'./data-seasons';exportconstdataSources={  SeasonsData,}

En el archivo server.ts añadimos el dataSource a la configuración de ApolloServer:

...import{dataSources}from'./data/index';...constserver=newApolloServer({      schema,dataSources:()=>({seasons:newdataSources.SeasonsData()}),introspection:true// Necesario});

modificamos la configuración de cors que viene por defecto aapp.use(cors());

En este paso se puede hacer uso de la webjson to ts que dado un json nos define las distintas interfaces, de forma que podamos"traducir" estas interfaces en definiciones de schema.

Elschema.graphql quedaría como sigue:

typeQuery {seasonList: [Season!]!}typeSeason {year:String!;url:String!;urlMobile:String!;}

En la fuente de datos creamos una función asíncrona para obtener los datos de la API Rest:

exportclassSeasonsDataextendsF1{...asyncgetSeasons(){returnawaitthis.get('seasons.json',{cacheOptions:{ttl:60}});}}

En el resolver de Queries creamos la consulta que llamaŕa a ese resolver y que obtendrá los datos:

import{IResolvers}from'graphql-tools';constquery:IResolvers={Query:{asyncseasonList(_:void,__:any,{ dataSources}){returnawaitdataSources.seasons.getSeasons().then((data:any)=>data.MRData.SeasonTable.Seasons);},},};exportdefaultquery;

Por ahora la llamada a la API de GraphQL para consultar las temporadas generará un error en aquellas keys que no se correspondan (sólo funcionaurl). Esto lo resolveremos en la siguiente sección.

Ahora mismo tenemos en nuestra api de GraphQL dos keys que no tienen correspondencia en la API Rest (year y urlMobile).

Para solventar este problema, creamos el archivosrc/resolvers/type.ts.

import{IResolvers}from'graphql-tools';consttype:IResolvers={Season:{year:parent=>parent.season,urlMobile:parent=>parent.url}};exportdefaulttype;

De este modo, estamos pasando a la key year lo que viene en la key season en la API Rest, y a urlMobile lo que vienen en la key url.

Para obtener la urlMobile correcta, creamos un archivosrc/lib/utils.ts.

exportfunctiongetWikipediaMobileUrl(url:string){return(url!==undefined)     ?url.replace('wikipedia','m.wikipedia')    :''}

Utilizamos esta función en el resolver de types:

import{getWikipediaMobileUrl}from'../lib/utils';...urlMobile:parent=>getWikipediaMobileUrl(parent.url)...

Finalmente importamos el tipo definido alresolverMap, que quedaría como sigue:

import{IResolvers}from'graphql-tools';importqueryfrom'./query';importtypefrom'./type';constresolvers :IResolvers={    ...query,    ...type};exportdefaultresolvers;

Creamos un nuevo archivo en la carpeta src/datadata-races.ts:

import{F1}from'./data-source';exportclassRacesDataextendsF1{constructor(){super();}}

y lo importamos en el index...

import{SeasonsData}from'./data-seasons';import{RacesData}from'./data-races';exportconstdataSources={  SeasonsData,  RacesData}

Añadimos la nueva fuente de datos alserver.ts:

...constserver=newApolloServer({        schema,dataSources:()=>({seasons:newdataSources.SeasonsData(),races:newdataSources.RacesData()}),introspection:true// Necesario});...

Valiénonos de la API y de "json to ts" podemos generar en elschema.graphql los nuevos tipos:

typeRace {season:String!round:String!url:String!raceName:String!circuit:Circuit!date:String!time:String!}typeCircuit {id:String!url:String!name:String!location:Location!}typeLocation {lat:String!lng:String!locality:String!country:String!}

Definimos en elschema.graphql la nueva query:

typeQuery {seasonList: [Season!]!racesByYear(year:String!): [Race!]!}

En la fuente de datos definimos la función que hará la petición a la api:

asyncgetRacesByYear(year:string){constcurrentYear=newDate().getFullYear()if(isNaN(+year)||+year<1950||+year>currentYear){year=String(currentYear)}returnawaitthis.get(`${year}.json`,{cacheOptions:{ttl:60}});}

Incluimos una validación para el caso en el que se mande un año no numérico, anteriores a 1950 o posteriores al año actual.

En el resolver creamos la query correspondiente:

Query:{  ...asyncracesByYear(_:void,{ year},{ dataSources}){returnawaitdataSources.races.getRacesByYear(year).then((data:any)=>data.MRData.RaceTable.Races);}  ...}