Arguing about technology choices is a huge thing, the RESTful and GraphQL debate is an example. But sometimes there methods to unite the different ways. Sofa is one of them that tries to united REST and GraphQL.


REST and GraphQL are different approaches to build HTTP based APIs, but the opinions on which is best suited for a problem differ from developer to developer.

I don’t know if one of them is superior to the other, but sometimes it can be a dealbreaker if we only provide one type of API to our customers.

Sofa allows us to automatically generate…

When we create a Single Page Application (SPA), we often need to integrate APIs. Sometimes third-party APIs, but at least our own back-ends to get the data we need to display. These APIs are based on the HTTP or WebSocket protocol, each having its requirements for connection setup and tear down.

In this article, I explain the basic integration of HTTP APIs.


HTTP is a stateless protocol. It’s the simplest way to get data from the server.

  • call the fetch function
  • get a promise
  • wait until the promise resolves
  • update the application with the new data

Sometimes HTTP requests fail…


First, what is a context?

A context is a way to store and pass down data a React element tree without writing it into a prop every layer of the hierarchy. It consists of two components, a Provider and a Consumer.

A Provider stores some data that can be accessed via the Consumer somewhere in the tree below the Provider. So the Consumer has to be a descendant of the Provider.

A Consumer accesses the Provider data and makes it available to its children via a render prop. …

Image for post
Image for post
Photo by James Thomas Thomas on Unsplash


First, what is a render prop (RP)?

A RP is simply a prop that takes a function which returns elements that will be used in render().

You can pass an element directly into a prop and use it in render() which would make the whole thing a RP by name, but generally, when people speak about RPs, they mean the first definition.

Also, since the children of a component are also a prop, you can use them instead of other/named props, which is also called function as children.

const C = props => props.renderProp(); // or const C = props…


Author and Software Consultant

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store