And a Chat App built using GraphCool! #REST APIs are now #RestInPeace APIs | Long live #GraphQL This was a tweet by . And I couldn’t agree with it more! Samer Buna Ever since its initial release in 2015 by Facebook, GraphQL has seen an exponential increase in its community support. Today, thousands of companies use GraphQL in its production level apps. Before getting into all of its sugary sweetness, let me beginning by defining GraphQL: GraphQL is a data query language which presents itself as a better alternative to REST API and ad-hoc webservice architectures. One of the great things about GraphQL is that it the client can define the structure of the data required, and the server will return data in exactly the same structure! In simple terms: It lets the client specify exactly what data it needs. It makes it easier to collect data from multiple sources(servers). It uses a type system to describe data. GraphQL servers are available for multiple languages, including JavaScript, Python, Ruby, Java, C#, Scala, Go, Elixir, Erlang, PHP, and Clojure. The need for GraphQL — Limits of REST API Say, you are creating a mobile app that has a list of , and under each movie, you want a list of main . movies actors Seems easy enough. But when you try to load this data into your mobile app, you will find that things start to slow down. And here I have only two movies, each with just two actors. In reality, my app may have to manage hundreds of movies, each definitely having more than two in it. actors Solution The solution to this problem is rather very simple. Instead of having multiple endpoints, have a single endpoint that can take in complex queries, and then change the data output into whatever structure the client requires. And that is exactly what GraphQL does. It stays between the client and the data source (server), receives client requests, and fetches the necessary data according to the client’s instructions. Here’s how the REST model would work in order to deliver the data to my app: GraphQL on the other hand is like having a personal assistant, that simply asks what you want, and then gets it for you! Benefits of GraphQL Lesser Code More declarative or elegant data retrieval Avoids multiple REST calls Backward compatible and version-free Flexible Better Performance Powerful development tools Can evolve with versions What does GraphQL offer? Fields At its very base, GraphQL is all about asking for specific fields on objects. So if I wanted to know the and of a , my query would be something like this: name abilities superhero GraphQL query and its response As you can notice, the result has the exact same shape as the query. By using GraphQL, you will always get back what you expect because the server knows what fields the client is asking for. In GraphQL, the fields can also refer to other objects. All you need to do is make a of fields for that object. GraphQL queries can also traverse related objects and their fields, letting clients fetch lots of related data in one request, unlike REST API where you would have to make several roundtrips. sub-selection Arguments Apart from letting us traverse objects and their fields, GraphQL also gives you the ability to pass arguments to fields. Unlike REST, where you can only pass a single set of arguments, in GraphQL, every field and nested object can get its own set of arguments. Aliases Aliases are extremely helpful in querying for the same field with different arguments. Mutations While GraphQL queries help a client fetch data in any shape that they want, a client also needs some way to modify server-side data. Any request has the potential to cause some kind of side-effects on the server. By it is usually suggested that one doesn’t use requests to modify data. Both REST and GraphQL are similar like that. GET To write / modify data on the server side, GraphQL has provided us with a special field called . Mutation Similar to queries, if a mutation field return an object type, you can ask for nested fields as well. This is very helpful in cases where you want to fetch the new state of an object after an update. The field will return the and fields a review. This will be especially helpful when you need to change existing data. createReview stars commentary Subscriptions Subscriptions allow developers to introduce new levels of interactivity to their apps with near-realtime updates. By adding subscriptions, you can keep your app updated to the latest changes between different users. The client specifies the data that they want to “subscribe” in a query like this: When something is published to the subscribed channel, the server will run the GraphQL query specified in the subscription and sends a full new result to the client. Unlike queries or mutations, subscriptions can deliver more than one result, so a long-lived connection is necessary. I suggest using a WebSocket connection. How To Setup Apollo Client in your React/React Native Project Setting up Apollo Client in your React/React Native project is fairly easy. All you need to do is write this code in your file: App.js And voila! You have successfully set up Apollo Client in your React or React Native Project. All you have to do is wrap your component inside an component. App ApolloProvider Few more things to take care of. Make sure that you have added the following dependencies to your project. Apollo-Client Preset React-Apollo By doing so, the queried data is now available in the props of the same component. Build a ChatApp with GraphQL , a software engineer at GeekyAnts built this awesome React Native ChatApp and used GraphQL for the backend. Prameet Chakraborty Dependencies is the next big step in the evolution of GraphQL. What makes it even more “cool” is that it is open-source! GraphCool GraphCool Framework is a comprehensive collection of building blocks covering the entire spectrum of developing modern, data-centric GraphQL APIs including: : A GraphQL database that allows you to query, mutate & stream data via the . It also contains a powerful database migration tool that lets you define and evolve your data model using GraphQL SDL. GraphQL database GraphQL CRUD API Protects your GraphQL API with a powerful permission system based on rules you define in terms of simple GraphQL . Powerful permission system: permission queries With the Graphcool Framework, realtime functionality (based on GraphQL subscriptions) comes for free. Your mutations automatically publish subscription events to the event gateway which forwards updates to all subscribed clients. GraphQL subscription API: is an ultra-flexible, community driven GraphQL client. It is designed from the ground up to make it easy to build UI components that fetch data with GraphQL. Apollo Client It is a community-driven effort to build a powerful, flexible and production ready GraphQL clients and supports various front-end frameworks such as React, Angular, and Vue. is an open source UI components library for React Native by GeekyAnts. NativeBase is one of the top choices for developers when it comes to UI components. NativeBase How it works GraphQL provides an easier way to build a simple yet effiecient chat app. Here’s how ’s chat app works: Prameet A is sent to the server in order to create a new user (Sign Up). mutation When a user tries to log in, a containing the user’s credentials is sent to the server. mutation Once the user logs into the chat using their credentials, the app sends a to the server to fetch all the users to the that have registered on the app. query The app also sends a fetches all the messages and filters them based on the sender’s and the receiver’s . query id When a user sends a new message, the message is registered on to the server through a . mutation All of these things are wrapped under a . subscription Subscription to listen for any new created message I am , a Technical Content Writer at . Aspiring Coder who has a long way to go. A Die-Hard DC Comics Fan who loves Marvel Movies. 😛 Follow me on to know about all the amazing things that are happening at . Rajat S GeekyAnts Twitter GeekyAnts Thanks to for helping with this post and for helping me understand everything about GraphQL and the GraphCool Framework. is a software engineer at . This post is inspired from his talk about . Prameet Chakraborty Prameet GeekyAnts GraphQL And thanks to you for reading this long post! Please do 👏 if you liked it.

Facebook

Fetch

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Everything you need to know about GraphQL

Too Long; Didn't Read

People Mentioned

Companies Mentioned

GeekyAnts

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Everything you need to know about GraphQL

Too Long; Didn't Read

People Mentioned

Companies Mentioned

GeekyAnts

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES