No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Pruebas de APIs GraphQL con PokeAPI no oficial

10/17
Recursos

¿Cómo probamos APIs de tipo GraphQL?

GraphQL ha cambiado la forma de trabajar con APIs gracias a su capacidad para realizar consultas flexibles y precisas. Si alguna vez has lidiado con el overfetching o underfetching en REST, encontrarás que GraphQL te ofrece una solución elegante. Hoy exploraremos cómo probar una API de tipo GraphQL, específicamente utilizando la PokeAPI no oficial para consultas.

¿Cómo estructuramos una consulta GraphQL?

Para comenzar, creamos un archivo llamado GraphQL y estructuramos nuestro entorno de trabajo con un bloque describe que denominamos "Probando GraphQL". En este entorno, desarrollamos nuestro primer test. Para esta demostración utilizamos una versión no oficial de la PokeAPI que soporta GraphQL. Aunque no es un curso extensivo sobre GraphQL, nos pondremos manos a la obra con algunas funcionalidades básicas.

  1. Entorno de Pruebas: Utilizamos un playground para ejecutar las consultas.
  2. Definición de Query: Creamos un query donde establecemos parámetros como limit y offset.
  3. Estructura de la Respuesta: A través de los queries, GraphQL devuelve información específica, permitiéndonos elegir exactamente los campos que necesitamos.

¿Cómo enviamos variables a través de GraphQL?

GraphQL nos permite parametrizar nuestras consultas. Definimos un conjunto de variables que modifican la información que recibimos:

  • Limit: Define cuántos elementos deseas recibir (por ejemplo, 20).
  • Offset: Indica desde dónde iniciar la consulta (por ejemplo, 0).
const graphqlQuery = `
{
  pokemons(limit: $limit, offset: $offset) {
    results {
      name
    }
  }
}
`;

const graphqlVariables = {
  limit: 20,
  offset: 0
};

¿Por qué utilizamos el método POST en GraphQL?

Aunque el objetivo del query GraphQL es fetching de información, utilizamos el método POST en las solicitudes. Esto se debe a que enviamos datos específicos al servidor para que procese ciertas consultas, un comportamiento similar al de las operaciones POST en REST.

fetch('https://graphql-pokemon2.vercel.app/', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    query: graphqlQuery,
    variables: graphqlVariables
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

¿Cómo validamos la respuesta de la API?

El siguiente paso en nuestra prueba es validar que la API devuelva la información correcta. Al usar console.log imprimimos la respuesta y vigilamos la estructura del JSON devuelto. Particularmente buscamos en data los resultados de los Pokémon.

// Pseudocódigo para la validación
expect(response.body.data.pokemons.results[0].name).toBe("Bulbasaur");

Durante esta prueba, encontramos el nombre del primer Pokémon como "Bulbasaur". Si nuestras expectativas no se cumplen, debemos corregir el nombre o reevaluar la consulta.

¿Qué podemos esperar al usar GraphQL?

Al trabajar con GraphQL tenemos el control total sobre los datos que recuperamos. Superamos las limitaciones de los APIs REST, como su capacidad de respuesta limitada. Sin embargo, las mutaciones no siempre están disponibles en todas las APIs públicas debido a riesgos de seguridad. El reto está en crear y probar tus propias mutaciones en un entorno controlado.

En suma, GraphQL promete flexibilidad y precisión en la gestión de APIs. Si ya eres programador, te animo a profundizar en este estándar y crear tu servidor GraphQL para explorar más capacidades de mutación y ver cómo se manejan las eliminaciones y actualizaciones dentro de las bases de datos. ¡El mundo de GraphQL tiene muchas más sorpresas y aplicaciones por descubrir!

Aportes 4

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

¡Rock n’ Roll! 🤟

📚 Cypress GraphQL

const query = `{
  findUser(username:"hello") {
    id
  }
}`;

cy.request({
    url: 'URL',  
    body: { query },                   
    failOnStatusCode: false            
}).then((response: any) => {
    cy.log(response);
});

GraphQL funciona sobre el protocolo REST!

```js describe('Probando graphql',()=>{ it('debe de hacer una consulta con graphql', ()=>{ const gqlQuery = `query pokemons($limit: Int, $offset: Int) { pokemons(limit: $limit, offset: $offset) { count next previous status message results { url name image } } }`; const gqlVariables ={ limit:20, offset: 0 } cy.request({ method: "POST", url: 'https://graphql-pokeapi.graphcdn.app/', body:{ query: gqlQuery, variables: gqlVariables, }, }).then((response) =>{ //cy.log(response) expect(response.body.data.pokemons.results[0].name).to.equal("bulbasaur"); }) }); }); ```describe('Probando graphql',()=>{     it('debe de hacer una consulta con graphql', ()=>{         const gqlQuery = `query pokemons($limit: Int, $offset: Int) {            pokemons(limit: $limit, offset: $offset) {            count            next            previous            status            message            results {                url                name                image            }        }        }`;         const gqlVariables ={            limit:20,            offset: 0        }                cy.request({            method: "POST",            url: 'https://graphql-pokeapi.graphcdn.app/',            body:{                query: gqlQuery,                variables: gqlVariables,            },        }).then((response) =>{            //cy.log(response)            expect(response.body.data.pokemons.results\[0].name).to.equal("bulbasaur");        })     });});