graphql: Serving over HTTP

 https://www.apollographql.com/blog/graphql/examples/4-simple-ways-to-call-a-graphql-api/

https://graphql.org/learn/serving-over-http/

https://graphql.org/learn/pagination/

3. Fetch

You can make a GraphQL HTTP request in literally any programming language, as long as you can set the above 4 parts correctly. So let’s convert that curl request into some JavaScript code with fetch, the new standard for getting HTTP results with promises. This will work in modern browsers with no libraries, but will require a polyfill in Node and some browsers. Let’s check out the code:

require('isomorphic-fetch');

fetch('http://localhost:4000', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query: `
    query {
      todos {
        edges {
          node {
            completed
            id
            text
          }
	}
      }
    }` 
  }),
})
.then(res => res.json())
.then(res => console.log(res.data));

If you run this code Chrome’s DevTools, you’ll notice that the following output is printed to the console.

Neat, right? As you can see, the way we request GraphQL data using Fetch is pretty similar to the request we constructed with curl, but there are a few things here that would become pretty repetitive if we had to type them out every time. Not only that, but to effectively work with GraphQL data in most applications, you’ll likely want to cache it, display the data somehow, and re-render your view when it changes.

That sounds like something that a GraphQL client can help us with.