GraphQL 

Benefits of GraphQL

  • Less code
  • More declarative / elegant data retrieval
  • Avoids multiple REST calls
  • Backward compatible and version-free
  • Flexible
  • Performance is better
  • Powerful development tools
  • Can evolve without versions

What GraphQL offers?

Queries

Mutations

Subscriptions

This is a simple query

This is a simple mutation

Calling Mutations with Variables​

...and this is a subscription

Setting up Apollo Client in your React or React Native Project

All queried data is available in the props of the same component !!

GraphQL Clients

  • Relay: powerful GraphQL client developed by Facebook, heavily optimized for performance. It is only available on the web.

 

  • Apollo Client: community-driven effort to build a powerful, flexible and production ready GraphQL client for all major development platforms. It supports various frontend frameworks (React, Angular and Vue) and platforms (iOS, Android).

GraphQL Servers

A package that enables you to build a production-ready GraphQL.js schema using the GraphQL schema language

 

A production-ready Node.js GraphQL server library that supports Express, Connect, Hapi, Koa, and other popular Node HTTP servers, with built-in features like persisted queries, batching, and more. Apollo Server works with any GraphQL client, like Apollo, Relay, and more.

Limitations

  • GraphQL Subscriptions lag sometimes.
  • Passing variables to a query is tricky and require props to be passed from a wrapper component.
  • The official docs of Apollo Client provide simple and generic examples that ​are difficult to apply to large-scale apps.

What we used

GraphCool

Apollo Client

Native Base

For the Chat App...

QUERIES

  • Fetching all Users registered on the app
  • Fetching all Messages and filtering based on sender and receiver id's

MUTATIONS

  • Creating a new user (Sign Up)
  • User Login (Returns a token)

SUBSCRIPTIONS

  • Creating a new message
  • Listening to the websocket whenever a new user is created or whenever a new message is sent for real-time applications
  • Creating a new message

git commit -am "I am done with my tech talk"

Dedicated to Rishabh Jain and Shivraj

Questions?

Copy of Building a Chat App in GraphQL using GraphCool

By Chetan Hegde

Copy of Building a Chat App in GraphQL using GraphCool

  • 245