Simple util for querying a GraphQL service using the fetch API

fetchGraphQL.js

const fetchGraphQL = async ({ url, query, variables, headers }) => {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      ...headers,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ query, variables })
  });

  // Get the response as JSON
  return response.json();
};

usage.js

const COUNTRY_CAPITAL_QUERY = `
  query countryCapital($code: ID!) {
    country(code: $code) {
      capital
    }
  }
`;

fetchGraphQL({
  url: "https://countries.trevorblades.com/",
  query: COUNTRY_CAPITAL_QUERY,
  variables: { code: "GB" },
})
  .then((response) => {
    const { data } = response;
    console.log(data.country.capital);
  })
  .catch((error) => {
    console.error(error);
  });