GraphQL – You need to know it in 2017

What is GraphQL?

  • Type system for your data
  • Define query language for your API
  • Sever-side runtime for executing queries.

Why GraphQL?

REST API versioning

  1. URI:  ../map/version/2/buildings
  2. Accept header:   Accept: application/vnd.myapi.v2 + json
  3. Customer request header:  x-myAPIVersion-Header: 2
  4. URL parameter: ../maps/buildings?version=2


GraphQL versioning

Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single evolving version, GraphQL APIs give apps continuous access to new features and encourage cleaner, more maintainable server code.

GraphQL API versioning


Apollo or Relay – GraphQL Client

What is GraphQL client?

Implement query and data caching to further optimize requests to GraphQL server. For new beginner, I recommend using Apollo first, short learning-curve and well documented.

Below image is some main comparison between Apollo and Relay.

Apollo and Relay comparison


Why using Apollo Client:

In general, we usually add “proxy” server (Nginx, nodeJs) for frontend application to send request and avoid CORS problem. But by using Apollo, it take over the proxy job and could interact with the GraphQL server directly.

General frontend structure
GraphQL and Apollo Client structure


React Component – Apollo Client example

  1. Using Apollo Client is so easy and fun when writing an react component. As example below, we define our channelsListQuery and pass it as parameter for graphql HOC component.

React component with Apollo Client – Channel list example

2. Then bootstrap your app. We need to create network interface for remote server and create an                 instance of ApolloClient. Then add a wrapper component of ApolloProvider.

Useful links:


Last words:

2018 will be the GraphQL year, just give a try!


Please follow and like us:

2 Replies to “GraphQL – You need to know it in 2017

Leave a Reply

Your email address will not be published. Required fields are marked *