Tutorials on Http

Learn about Http from fellow newline community members!

  • React
  • Angular
  • Vue
  • Svelte
  • NextJS
  • Redux
  • Apollo
  • Storybook
  • D3
  • Testing Library
  • JavaScript
  • TypeScript
  • Node.js
  • Deno
  • Rust
  • Python
  • GraphQL
  • React
  • Angular
  • Vue
  • Svelte
  • NextJS
  • Redux
  • Apollo
  • Storybook
  • D3
  • Testing Library
  • JavaScript
  • TypeScript
  • Node.js
  • Deno
  • Rust
  • Python
  • GraphQL

Picking a GraphQL Client

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. But. 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. Because GraphQL servers are typically over HTTP, you don't have 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. You can query a GraphQL server using curl , The operationName here is the name of your query. With curl, it would look like this: where the ... is replaced by the JSON string from above So why bother with a dedicated client? The big reason is because of caching . 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 already have been cached 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? Here's a few: Let's look a little closer at each one: graphql-request 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 the documentation What's good: The drawbacks: 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. Summary: It's a great fit if you just want to make some quick requests without a lot of fuss. urql gives you solid, lightweight choices in the default configuration, but is build to expand as you grow. They have a nice page on the philosophy of urql where they say: Here's an example of making a query in a React app, taken from their documentation : Above, you can see that they call the useQuery hook to load the TodosQuery and then use that result in the rendered JSX. What's good: The drawbacks: Summary: A solid library, with critical community mass, from a great team. It's a good option. Relay Modern a full-featured GraphQL client library and the original inspiration for Apollo. What's good: What's good: The drawbacks: Summary: 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 would use Relay is using Apollo instead. 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. Like I mentioned above, Apollo Client today's de-facto standard GraphQL library - works w/ React, Angular, Vue, etc. What's good: The drawbacks: It's relatively "heavy". If you run into trouble, it's a bit of a black box. Summary: 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. Hope this helps! -- Nate

Deep dive into the Node HTTP module

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. Let's import the module and create a basic HTTP server with it 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 official docs . In the example below, let's use the callback function to handle HTTP requests and respond to them. req : shorthand for request, is an object from the class   IncomingMessage  that includes all the request information. Some interesting properties are: It's also good to remember that the IncomingMessage extends the <stream.Readable> class, so each request object is, indeed, a stream. res : 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: 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 IncomingMessage class which extends the <stream.Readable> class, in post request we can access the body as a stream of data like this: You could use an application like Postman , 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 'content-type' headers as 'application-json' To handle HTTPS requests, Node.js has the core module https , 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 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 .createServer() to create our new shiny HTTPS server. 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 .request() function. In the following example, we will be calling the postman-echo API which returns whatever we send them. But I would suggest instead of using the core HTTP module for sending requests, you use something more sophisticated and user friendly as Axios . 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. 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 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. Have fun and keep coding! 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 our community Discord . See you there!

Thumbnail Image of Tutorial Deep dive into the Node HTTP module

I got a job offer, thanks in a big part to your teaching. They sent a test as part of the interview process, and this was a huge help to implement my own Node server.

This has been a really good investment!

Advance your career with newline Pro.

Only $30 per month for unlimited access to over 60+ books, guides and courses!

Learn More