Querying a GraphQL API with Variables and Error Handling

async function queryGraphQL(endpoint, query, variables = {}) {
  try {
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        // Add authorization headers if needed, e.g., 'Authorization': 'Bearer YOUR_TOKEN'
      },
      body: JSON.stringify({
        query,
        variables
      })
    });

    if (!response.ok) {
      // Handle HTTP errors (e.g., 401, 403, 500)
      const errorBody = await response.text();
      throw new Error(`HTTP error! Status: ${response.status}, Body: ${errorBody}`);
    }

    const result = await response.json();

    if (result.errors) {
      // Handle GraphQL errors (e.g., validation errors, resolver errors)
      console.error('GraphQL errors:', result.errors);
      // You might want to throw a specific error or process them differently
      throw new Error(`GraphQL query failed: ${result.errors.map(err => err.message).join(', ')}`);
    }

    return result.data;

  } catch (error) {
    console.error('Failed to query GraphQL API:', error);
    throw error; // Re-throw to allow caller to handle
  }
}

// --- Example Usage ---
const GRAPHQL_ENDPOINT = 'https://countries.trevorblades.com/'; // Public GraphQL API example

const GET_COUNTRY_DETAILS_QUERY = `
  query GetCountry($code: ID!) {
    country(code: $code) {
      name
      continent {
        name
      }
      languages {
        name
      }
    }
  }
`;

const GET_ALL_CONTINENTS_QUERY = `
  query {
    continents {
      code
      name
    }
  }
`;

// Example 1: Query with variables
queryGraphQL(GRAPHQL_ENDPOINT, GET_COUNTRY_DETAILS_QUERY, { code: 'US' })
  .then(data => {
    console.log('Country Details for US:', data);
  })
  .catch(error => {
    console.error('Error fetching country details:', error.message);
  });

// Example 2: Query without variables
queryGraphQL(GRAPHQL_ENDPOINT, GET_ALL_CONTINENTS_QUERY)
  .then(data => {
    console.log('All Continents:', data);
  })
  .catch(error => {
    console.error('Error fetching continents:', error.message);
  });

// Example 3: Simulating a bad query to see error handling (e.g., missing variable)
const BAD_QUERY = `
  query GetCountry($code: ID!) { 
    country(code: $code) { 
      nonExistentField 
    } 
  }
`;
queryGraphQL(GRAPHQL_ENDPOINT, BAD_QUERY, { code: 'US' })
  .then(data => {
    console.log('Bad Query result:', data); // This should not execute if errors are handled
  })
  .catch(error => {
    console.error('Error with bad query:', error.message);
  });