Vibhor Grover
DIVING INTO
GRAPHQL ALONG
WITH REACT &

WHAT IS GRAPHQL ?
GraphQL is the new frontier in APIs (Application Programming Interfaces) design, and in how we build and
consume them.
It’s a query language, and a set of server-side runtimes (implemented in various backend languages) for
executing queries. It’s not tied to a specific technology, but you can implement it in any language.
It is a methodology that directly competes with REST (REpresentational State Transfer) APIs, much like
REST competed with SOAP at first.
GraphQL was developed at Facebook, like many of the technologies that are shaking the JavaScript world
lately, like React and React Native, and it was publicly launched in 2015 - although Facebook used it
internally for a few years before.

GRAPHQL - CORE PRINCIPLE
• GraphQL exposes a single endpoint.
• You send a query to that endpoint by using a special Query Language syntax. That query is just a string.
• The server responds to a query by providing a JSON object.
• The Schema Definition Language (SDL)
• GraphQL has its own type system that’s used to define the schema of an API. The syntax for writing schemas
is called Schema Definition Language (SDL).
• Here is an example how we can use the SDL to define a simple type called Person
• This type has two fields, they’re called name and age and are respectively of type String and Int. The !
following the type means that this field is required.

CONTINUED..
Example of a query based on schema definition language
The allPersons field in this query is called the root field of the query. Everything that follows the root
field, is called the payload of the query. The only field that’s specified in this query’s payload is name.
This query would return a list of all persons currently stored in the database. Here’s an example
response:

WHY GRAPHQL ? (WHEN WE ALREADY
HAVE REST)
•While REST is built on top of an existing architecture, which in the most common scenarios is HTTP, GraphQL on the other hand is building its
own set of conventions. Which can be an advantage point or not, since REST benefits for free by caching on the HTTP layer.
A single endpoint
GraphQL has only one endpoint, where you send all your queries. With a REST approach, you create multiple endpoints and use
HTTP verbs to distinguish read actions (GET) and write actions (POST, PUT, DELETE). GraphQL does not use HTTP verbs to determine the
request type.
Tailored to your needs
With REST, you generally cannot choose what the server returns back to you, unless you have an API maintainer, otherwise,
The API will usually return you much more information than what you need, unless you control the API server as well, and you tailor your
responses for each different request.

Access nested data resources
GraphQL allows to generate a lot less network calls.
Let’s do an example: you need to access the names of the friends of a person. If your REST API exposes a
/person endpoint, which returns a person object with a list of friends, you generally first get the person
information by doing GET /person/1 which contains a list of ID of its friends.
Unless the list of friends of a person already contains the friend name, with 100 friends you’d need to do 101
HTTP requests to the /person endpoint, which is a huge time cost, and also a resource intensive operation.
With GraphQL, you need only one request, which asks for the names of the friends of a person.
CONTINUED..

WHICH ONE IS BETTER ..?
• GraphQL is a perfect fit when you need to expose complex data representations, and when clients might
need only a subset of the data, or they regularly perform nested queries to get the data they need.
• As with programming languages, there is no single winner, it all depends on your needs

TEXT
THE BIG PICTURE (ARCHITECTURE)
A standard greenfield architecture with one GraphQL Server that connects to a single database.
Client
GraphQl Server
Database

QUERIES..
▸It is a way of fetching data at the client side from the graphQl server by
specifying the fields in the query to fetch the specific data.

MUTATIONS..
• GraphQL mutations are types of GraphQL queries that may result in the
state of your backend "mutating" or changing, just like
typical 'POST', 'PUT', 'PATCH', 'DELETE' APIs.

SUBSCRIPTIONS
• Subscriptions are like GraphQL queries but instead of returning data in
one read, you get data pushed from the server.
• This is useful for your app to subscribe to "events" or "live results" from
the backend, but while allowing you to control the "shape" of the event
from your app.
• subscriptions are great because they allow you to build great
experiences without having to deal with websocket code!

HOW DOES SUBSCRIPTIONS WORK ..?
• GraphQL queries and mutations are strings sent to a POST endpoint. What
is a GraphQL subscription? That can't happen over a POST endpoint,
because a simple HTTP endpoint would just return the response and the
connection would close.
• A GraphQL subscription is a subscription query string sent to a websocket
endpoint. And whenever data changes on the backend, new data is
pushed over websockets from the server to the client.

WHAT IS GRAPHQL - CLIENT ?
consider some “infrastructure” features that you probably want to have in your
app:
• directly sending queries and mutations without constructing HTTP requests
• view-layer integration
• caching
• validating and optimizing queries based on the schema
But GraphQL provides the ability to abstract away a lot of the manual
work you’d usually have to do during that process and lets you focus
on the real important parts of your app!

CONTINUED..
There are two major GraphQL clients available at the moment.
•The first one is Apollo Client, which is a community-driven effort to build a powerful and flexible
GraphQL client for all major development platforms.
•The second one is called Relay and it is Facebook’s homegrown GraphQL client that heavily
optimizes for performance and is only available on the web.
A major benefit of GraphQL is that it allows you to fetch and update data in a declarative manner. Put
differently, we climb up one step higher on the API abstraction ladder and don’t have to deal with low-
level networking tasks ourselves anymore.
When you previously used plain HTTP (like fetch in Javascript or NSURLSession on iOS) to load data
from an API, all you need to do with GraphQL is write a query where you declare your data
requirements and let the system take care of sending the request and handling the response for you.
This is precisely what a GraphQL client will do.

WHAT IS REACT - GRAPHQL - APOLLO -
CLIENT• React renders, updates, and destroys components of the user interface
• Apollo defines the ways we fetch and send data and provides interfaces to store it
• GraphQL is the query language for fetching and updating our data
• To be precise, you should use a GraphQL client for tasks that are repetitive and agnostic to the app you’re building. For example,
being able to send queries and mutations without having to worry about lower-level networking details or maintaining a local cache.
This is what GraphQ-Apollo-Client is created for.

GRAPHQL-APOLLO-CLIENT OVERVIEW
Here’s an overview of the packages you would install:
• apollo-boost offers some convenience by bundling several packages you need when working with Apollo Client:
• apollo-client: Where all the magic happens
• apollo-cache-inmemory: Our recommended cache
• apollo-link-http: An Apollo Link for remote data fetching
• apollo-link-error: An Apollo Link for error handling
• apollo-link-state: An Apollo Link for local state management
• graphql-tag: Exports the gql function for your queries & mutations
• react-apollo contains the bindings to use Apollo Client with React.
• graphql contains Facebook’s reference implementation of GraphQL - Apollo Client uses some of its functionality as
well.

HOW TO GET STARTED ..
Frontend
Creating the app
•First, you are going to create the React project! As mentioned in the beginning, you’ll use create-
react-app for that, In any terminal, type npm create-react-app application-react-apollo
This will create a new directory called application-react-apollo that has all the basic configuration
setup.
Navigate to directory and start the application with npm start
This will open a browser and navigate to http://localhost:3000 where the app
is running. If everything went well, you will see a react welcome page on the
screen.

CONTINUED..
▸Your project structure should look like
• Prepare styling
This tutorial is about the concepts of GraphQL and how you can use it from within a React application, so
we want to spend the least time possible on styling. To reduce the usage of CSS in this project, you can
use the Tachyons library which provides a number of CSS classes.
• Install Apollo Client
Next, you need to pull in the functionality of Apollo Client (and its React bindings) which comes in
several packages:

▸In terminal, type npm install apollo-
boost react-apollo graphql
•Configure ApolloClient
Apollo abstracts away all lower-level networking
logic and provides a nice interface to the
GraphQL server. In contrast to working with
REST APIs, you don’t have to deal with
constructing your own HTTP requests any
more - instead you can simply write queries
and mutations and send them using
an ApolloClient instance.
The first thing you have to do when using
Apollo is configure
your ApolloClient instance. It needs to know
the endpoint of your GraphQL API so it can
deal with the network connections.
That’s it, you’re all set for the frontend to to start
for loading some data into your app! 😎
/application-react-graphql/src/index.js

CONCLUSION
We’ve just scratched the surface of what the abstractions and capabilities of
GraphQL can provide.

TEXT
Thank you