Consumir API REST y GraphQL

a. Definición

En la actualidad se utiliza normalmente API REST (Representational State Transfer), que es otro tipo de API web que no tiene estos defectos.

La idea de este tipo de arquitectura es poder acceder de forma estandarizada a recursos sin estado devueltos en formato HTML, JSON o XML. Los recursos se definen usando URI (Uniform Resource Identifier) y, para indicar la acción que queremos aplicar sobre estos recursos, usamos los verbos del protocolo HTTP (llamados métodos):...

a. Presentación

Ahora llegaremos al meollo del asunto y veremos cómo consumir un API REST y una API GraphQL. Para esto, en primer lugar usaremos Strapi para crear rápidamente una API: https://strapi.io/. Strapi es una solución para crear una API REST y GraphQL. Lo desarrolló una start-up francesa fundada en 2018. Strapi también se puede utilizar como CMS Headless.

Permite que el código de backend de una API se cree en unas pocas líneas de comando y una interfaz gráfica de front-office permite a los usuarios agregar contenido. Strapi puede utilizar varias bases de datos, como SQLite, MySQL, PostgreSQL, MariaDB y MongoDB. A continuación, la API se puede implementar en un servidor Node.js o en un host PaaS, como Netlify o Heroku.

Para una API REST, Strapi le permite usar en sus URI parámetros de clasificación, filtros y paginación.

También es posible usar múltiples complementos para agregar funcionalidad adicional.

Esta es la lista de complementos oficiales mantenidos por el equipo central de Strapi:

a. Definición y uso

Fetch es una API nativa, disponible en todos los navegadores modernos, para enviar peticiones HTTP asíncronas. Esta API sustituye al antiguo método que se utilizaba para realizar peticiones AJAX (Asynchronous JavaScript And XML) a través del objeto XMLHttpRequest. Es más flexible y ofrece potentes funciones:

El primer argumento del método fetch() es el URI de un punto final de la API y, opcionalmente, recibe un objeto de opciones como segundo parámetro.

let promesa = fetch("URI", {/* opciones */}); 

Cuando fetch() recibe la respuesta del servidor, devuelve una promesa cumplida, independientemente del estado HTTP (200+, 300+, 400+ o 500), con un objeto Response como valor de resolución.

Luego llamamos a la función .json() del objeto Response, que devuelve una promesa cumplida, con los datos del cuerpo de la respuesta en formato JSON como valor de resolución.

let promesa = fetch("URI", {/* opciones */}); 
 
promesa.then(reponse => { 
  console.log(reponse.json()); 
)); 

b. Los objetos Request y Response

En lugar de pasar el URI como primer parámetro, también puede proporcionar un objeto Request. El constructor del objeto Request recibe exactamente los mismos parámetros que fetch():

const request = new Request("miURI", {/* opciones */ }); 
 
let promesa = fetch(request)); 

Las propiedades del objeto Request:

a. Instalación con Vue CLI

Apollo es un conjunto de herramientas para crear una API GraphQL en el servidor y consumir cualquier API GraphQL en el cliente.

Para más información: https://www.apollographql.com/

La comunidad Vue.js ha desarrollado el plugin Vue Apollo para poder integrar fácilmente el cliente Apollo en un proyecto Vue.js. La documentación oficial está disponible en la siguiente dirección: https://vue-apollo.netlify.app/

Hay diferentes tipos de instalación. La forma más sencilla es utilizar Vue CLI cuando usa una API GraphQL creada con Apollo (este no es el caso con Strapi).

Así puede:

Si está utilizando Vue CLI, el complemento se puede instalar de manera muy sencilla y sin ninguna configuración con el siguiente comando:

vue add apollo 

También es posible instalarlo a través de la interfaz gráfica:

vue ui 

b. Instalación manual para consumir una API Strapi

Usamos la API GraphQL de Strapi. Por tanto, vamos a instalar solo los siguientes elementos necesarios para consumirla:

// con npm 
npm install --save vue-apollo graphql apollo-client apollo-link...