How to fetch from graphql server using XMLHttpRequest?

Question

How I can get response from graphql server using pure js without libraries?

For example how I can do that using XMLHttpRequest? Query and serverUrl are below:

const serverUrl = 'http://example.com/graphql/'
const query = {
    query: `{
        viewer {
            date
        }
    }`
};

Answer 1

Use POST request with 'Content-Type', 'application/json'

const yourServerUrl = 'http://example.com/graphql'
const yourQuery = {
    query: `{
        users {
            firstName
        }
    }`
};

// below ordinary XHR request with console.log
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open('POST', yourServerUrl);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function () {
    console.log('data returned:', xhr.response);
};

xhr.send(JSON.stringify(yourQuery));

source