Cómo consumir una API GraphQL con jQuery

Publicado el 28/03/2023 por Diario Tecnología

GraphQL es una tecnología que se utiliza para crear APIs que permiten a los desarrolladores solicitar datos específicos de manera eficiente. En este artículo, veremos cómo podemos consumir una API GraphQL con jQuery.

Para empezar, necesitamos una API GraphQL que podamos utilizar. Si aún no tienes una API GraphQL, puedes utilizar una API pública de ejemplo como la API de GraphQL de GitHub.

Una vez que tengamos una API GraphQL que podamos utilizar, podemos comenzar a trabajar en el consumo de datos a través de jQuery.

Paso 1: Incluir jQuery en tu proyecto Para comenzar, debemos incluir jQuery en nuestro proyecto. Puedes descargar la última versión de jQuery desde su sitio web oficial o utilizar una CDN para cargarla en tu proyecto. Por ejemplo, para utilizar la versión 3.6.0 de jQuery, puedes incluir el siguiente código en tu archivo HTML:

Paso 2: Crear la consulta GraphQL Para consumir una API GraphQL, primero debemos crear una consulta GraphQL que especifique los datos que deseamos obtener de la API. Por ejemplo, si queremos obtener información sobre un usuario específico en la API de GraphQL de GitHub, podríamos utilizar la siguiente consulta:

query {
  user(login: "octocat") {
    name
    avatarUrl
    bio
  }
}

Paso 3: Realizar la solicitud a la API GraphQL con jQuery Una vez que tenemos nuestra consulta GraphQL, podemos enviar una solicitud a la API GraphQL utilizando jQuery. Podemos hacer esto utilizando el método $.ajax() de jQuery. Por ejemplo, podríamos enviar una solicitud a la API de GraphQL de GitHub utilizando el siguiente código:

$.ajax({
  url: 'https://api.github.com/graphql',
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_GITHUB_TOKEN'
  },
  data: JSON.stringify({
    query: `
      query {
        user(login: "octocat") {
          name
          avatarUrl
          bio
        }
      }
    `
  }),
  success: function(response) {
    console.log(response.data.user);
  },
  error: function(error) {
    console.error(error);
  }
});

En este ejemplo, estamos enviando una solicitud POST a la URL de la API de GraphQL de GitHub. También estamos incluyendo un encabezado de autorización que contiene nuestro token de acceso de GitHub. El cuerpo de la solicitud contiene nuestra consulta GraphQL como una cadena JSON.

El código anterior también incluye una función de devolución de llamada success, que se ejecuta si la solicitud se realiza correctamente. En esta función de devolución de llamada, estamos registrando los datos de usuario en la consola.

También hemos incluido una función de devolución de llamada error, que se ejecuta si la solicitud no se puede realizar correctamente. En esta función de devolución de llamada, estamos registrando cualquier error en la consola.

Paso 4: Mostrar los datos en tu aplicación Finalmente, podemos utilizar los datos que hemos obtenido de la API GraphQL en nuestra aplicación.