There are a bunch of GraphQL clients that exist. How do you know which one is right for you?

I'm going to discuss some of your options, but let's cut to the chase:

If you're building a front-end web-app, I recommend you use Apollo Client. If you want to take my recommendation, you can just skip this  and move on with your life.

For those of you who are making a years-long, fundamental architectural decision for your team - you might want to read below to better understand the tradeoffs between a few of the popular GraphQL client libraries.

GraphQL is just JSON over HTTP (well, usually)

Because GraphQL servers are typically over HTTP, you don't 

 to use a client library at all. You can just use whatever HTTP request library you were already using and it will "work".

GraphQL is in this sense, more of a language/protocol pair than a specific library and it will work fine in any language where you can form queries and parse JSON - making it suitable for mobile apps, compiled clients, etc.

{
  query: "query MyQuery { viewer {name} }",
  variables: {},
  operationName: "MyQuery"
}

curl \
  -X POST \
  -H "Authorization: Bearer $AUTH_TOKEN" \
  -H "Content-Type: application/json" \
  --data '...' \
  https://github.com/graphql

 is replaced by the JSON string from above

Why You Might Want a Dedicated GraphQL Client

Because our data is typed, and has a specific schema, intelligent clients can leverage that to cache data in clever, optimized ways.

For example, an object that is loaded by one query may 

 by a previous, completely different query. And in these cases, the client can read from the cache instead of fetching from the server - resulting in a snappier user experience.

There are lots of other nice features a dedicated client might have, too. Such as:

All of the above can add up to a real-world advantage in programming time compared to just forming manual HTTP requests every time.

So if you want to use a dedicated client, what are your options?

 is a JavaScript library that, as it's namesake, makes it easy to make GraphQL requests.

Here's what the code looks like, taken straight from 

import { request, gql } from "graphql-request";

const query = gql`
  {
    Movie(title: "Inception") {
      releaseDate
      actors {
        name
      }
    }
  }
`;

request(
  "https://api.graph.cool/simple/v1/movies",
  query
).then((data) => console.log(data));

It is super minimal - it doesn't have any caching or most of the advanced features you'd get out of any of the clients below.

It's a great fit if you just want to make some quick requests without a lot of fuss.

 gives you solid, lightweight choices in the default configuration, but is build to expand as you grow.

Here's an example of making a query in a React app, 

import { useQuery } from "urql";
const TodosQuery = `
  query {
    todos {
      id
      title
    }
  }
`;
const Todos = () => {
  const [result, reexecuteQuery] = useQuery({
    query: TodosQuery,
  });
  const { data, fetching, error } = result;
  if (fetching) return <p>Loading...</p>;
  if (error)
    return <p>Oh no... {error.message}</p>;
  return (
    <ul>
      {data.todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

 and then use that result in the rendered JSX.

A solid library, with critical community mass, from a great team. It's a good option.

 a full-featured GraphQL client library and the original inspiration for Apollo.

An inspirational, tightly-React-integrated library with many good characteristics, but generally not used as widely as you'd expect.

I imagine that Relay Modern will ship a version that gets broader community adoption. Almost everyone I know in the industry that 

But if you're new to GraphQL and you're trying to decide between Relay and Apollo, and you don't know the difference, 9-times-out-of-10 you want Apollo.

 standard GraphQL library - works w/ React, Angular, Vue, etc.

It's relatively "heavy". If you run into trouble, it's a bit of a black box.

I use Apollo for newline and I've been incredibly happy. As often happens in open-source, there's ecosystem benefits with going with the leader.

There are more tutorials, bugs are fixed faster, and it's an overall pleasant experience.

Apollo also has tooling for building servers, so it's a bit of a one-stop-shop for GraphQL services.

It's pretty obvious that I'm an Apollo fan. While there might be better choices for certain scenarios, if you're building a straightforward web app, my recommendation is Apollo client.

AUTHOR

Nate Murray

Picking a GraphQL Client

An in-depth look at the Node HTTP module, and how to use it to scale up!

The HTTP module is a core module of Node.js, it is fair to say it's one of the biggest responsible for Node's initial rise in popularity.

HTTP is the veins of the internet, this website, any site you explore, you use the HTTP protocol to request it from a server, and the server uses the same HTTP protocol to send you back the data you requested.

Your first HTTP server using the HTTP module

Let's import the module and create a basic HTTP server with it

// We import the http module
const http = require('http');

// we create a new server instance
const Server = http.createServer((request, response) => {
  // This function will be triggered on each request
});

// We set our server to listen for requests in port 3000
Server.listen(3000);

We just created an HTTP Server object, some of its methods are:

For a complete list of HTTP server class properties and methods, check out the 

Handling HTTP requests with the node http module

 function to handle HTTP requests and respond to them.

: shorthand for request, is an object from the class  

 that includes all the request information. Some interesting properties are:

 class, so each request object is, indeed, a stream.

: shorthand for "response", is an object from the class ServerResponse, which contains a collection of methods to send back an HTTP response. Some of the methods are:

Each time we write response data with .write(), the chunk of data we passed gets immediately flushed to the kernel buffer. If we try to .write() after .end() has been called, we will get the following error:

Handling POST requests with the http module

In an HTTP post request, we usually get a body as part of the request. How do we access it using the Node HTTP module?

Remember the request object is an instance of the 

 class, in post request we can access the body as a stream of data like this:

, to launch the HTTP request to our application, and you would end up with something like this:

While you are in Postman, be sure that you are firing POST request. You will also need to set the following configuration in order to set the 

To handle HTTPS requests, Node.js has the core module 

, but first, we need some SSL certificates, for the purpose of this example let's generate some self-signed certificates

In your command line (use GitBash if you are on windows) lets run

openssl genrsa -out key.pem
openssl req -new -key key.pem -out csr.pem
openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem
rm csr.pem

Now let's use the HTTPS module to create an HTTP server

The main difference is we now have to read the key files and load them into an options object, that we pass to 

Sending a request using the node HTTP module

Sometimes we would like to do an HTTP request in order to gather data from a third-party HTTP server. We can achieve this by using the Node HTTP module 

In the following example, we will be calling the postman-echo API which returns whatever we send them.

const http = require("http")

// The body object we will be sending
let body = JSON.stringify({
  title: "Sending data!"
})

http
  .request(
  	// Configuration object with request details
    {
      hostname: "postman-echo.com",
      path: "/post",
  	  method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Content-Length": Buffer.byteLength(body)
  	  }
    },
    res => {
      let response = ""

      res.on("data", chunk => {
        response += chunk
      })
      res.on("end", () => {
        console.log(response)
      })
    }
  )
  // here we attach our body to be sent
  .end(body)

But I would suggest instead of using the core HTTP module for sending requests, you use something more sophisticated and user friendly as 

The pros of using something like Axios, is promise abstraction, easier to manage errors on requests, and support for really valuable plugins, like Axios retry.

Use Express don't reinvent the wheel with 

In a lot of situations, we can use a framework like Express to create a server instead of doing directly to the HTTP module.

Install express using npm in your command line

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Express will give you a more elegant way to handle all your API routes, handle session data, and will provide you some plugins for authentication, Express is gonna make your life way easier! 

We've been through a lot, within this short post, but with these few examples, you should have a good grasp on the core functionalities of the HTTP Node core module.

It's ideal to understand the inner functionalities of the HTTP module, but for more complex tasks is recommended to use an abstraction library, such as express in the case you are building servers, or Axios in the case you are creating HTTP requests.

Check out the documentation of the modules we used in this post:

If you have any questions - or want feedback on your post - come join 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Http

Picking a GraphQL Client

Deep dive into the Node HTTP module

This has been a really good investment!

Advance your career with newline Pro.

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript