title: How to do a simple GraphQL query in JavaScript
body: <p>If I do a GraphQL query usinge <code>node-fetch</code> or <code>curl</code> I get back the expected results. For example, if I have a file <em>gquery.js</em> with the following code:</p>
  
  <pre><code>const fetch = require("node-fetch")
  fetch('https://api.example.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'X-Api-Service-Key': '123456789077',
    },
    body: JSON.stringify({query: "query($fruitId: String!) { fruit(id: $fruitId) { id, name } }",
    variables: { "fruitId": "ikttwwwbvn7" }})
  })
    .then(r =&gt; r.json())
    .then(data =&gt; console.log('data returned:', data));
  </code></pre>
  
  <p>And on my Ubuntu machine I just run <code>$node gquery.js</code> I get back a result. I'll also get a result if I use plain curl, e.g.:</p>
  
  <pre class="lang-sh prettyprint-override"><code>curl -H 'Content-Type: application/json' -X POST -H "X-Api-Service-Key: 123456789077" https://api.example.com/graphql -d '{ "query": "query($fruitId: String!) { fruit(id: $fruitId) { id, name } }", "variables": { "fruitId": "ikttwwwbvn7" }}'
  </code></pre>
  
  <p>However, if I just use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch" rel="nofollow noreferrer">fetch</a> on Chrome, e.g.:</p>
  
  <pre><code>fetch('https://api.example.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'X-Api-Service-Key': '123456789077',
    },
    body: JSON.stringify({query: "query($fruitId: String!) { fruit(id: $fruitId) { id, name } }",
    variables: { "fruitId": "ikttwwwbvn7" }})
  })
    .then(r =&gt; r.json())
    .then(data =&gt; console.log('data returned:', data));
  </code></pre>
  
  <p>I get an error:</p>
  
  <blockquote>
    <p>Access to fetch at '<a href="https://api.example.com/graphql" rel="nofollow noreferrer">https://api.example.com/graphql</a>' from origin 'chrome-search://local-ntp' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.</p>
  </blockquote>
  
  <p>Note: My endpoint is actually different, but otherwise this example is essentially the same as what I have.</p>
  
  <p>I had a look at a <a href="https://stackoverflow.com/q/36878255/5362795">related question</a>, but answers seem to suggest that this cannot be resolved on the client side only. But the fact that I can use <code>curl</code> and <code>node</code> successfully tells me that I just don't have the right code.</p>
  
  <p>To be clear, I don't really care about <code>fetch</code>. I'm happy to use any standalone Javascript solution that does not require the use of a client like apollo or relay.</p>