5 Maneras de consumir una API GraphQL

2 min readOct 7, 2020

Ahora veremos las alternativas que hay para consumir una API GraphQL ¡Tu decides cual usar!

Curl

Es una librería que se utiliza bajo comandos en consola o terminal. El trabajo se realiza con formato URL. Es decir, sirve para realizar acciones sobre archivos que hay en URLs de Internet, soportando los protocolos más comunes, como http, ftp, https

Ejemplo con GraphQL

curl -X POST \
-H "Content-Type: application/json" \
-d '{"query": "{ hello }"}' \
http://localhost:4000/graphql

Fetch

documentación de fetch

le permite realizar solicitudes de red similares a XMLHttpRequest (XHR). La principal diferencia es que Fetch API usa Promises

fetch('http://localhost:4000/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  body: JSON.stringify({query: "{ hello }"})
})
  .then(r => r.json())
  .then(data => console.log('data returned:', data));

Axios

Cliente HTTP basado en promesas para el navegador y node.js

documentación de axios

axios.post('http://localhost:4000/graphql', {
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  body: JSON.stringify({query: "{ hello }"})
})
  .then(r => r.json())
  .then(data => console.log('data returned:', data));

Apollo Client

Es una biblioteca de administración de estado integral para JavaScript que le permite administrar datos tanto locales como remotos con GraphQL.
Úselo para buscar, almacenar en caché y modificar los datos de la aplicación, todo mientras actualiza automáticamente su interfaz de usuario.

documentacion de apollo client

Este es un ejemplo con React JS pero puedes utilizarlo con Vue JS , Angular , Svelte, etc.

import { gql, useQuery } from '@apollo/client';

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;function Dogs({ onDogSelected }) {
  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <select name="dog" onChange={onDogSelected}>
      {data.dogs.map(dog => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}

Relay

El cliente GraphQL listo para producción para React.

import {fetchQuery, graphql} from 'relay-runtime';

const query = graphql`
  query ExampleQuery($pageID: ID!) {
    page(id: $pageID) {
      name
    }
  }
`;

const variables = {
  pageID: '110798995619330',
};

fetchQuery(environment, query, variables)
  .then(data => {
    // access the graphql response
  });