Most web applications communicate with servers through APIs.
The most common API architecture today is:
Another popular alternative is:
GraphQL is a modern API query language that allows clients to request exactly the data they need, reducing unnecessary network traffic.
Popular GraphQL clients include:
Note: Throughout this course, we will briefly introduce all three GraphQL clients, but our primary focus will be Apollo Client, as it is the most widely used and beginner-friendly.
GraphQL is a query language and runtime for APIs.
It was developed by Meta Platforms (formerly Facebook) to solve many of the limitations of traditional REST APIs.
Unlike REST, GraphQL allows clients to specify exactly what data they want.
REST typically exposes multiple endpoints.
Example:
GET /users
GET /posts
GET /comments
Each resource has its own endpoint.
GraphQL usually exposes a single endpoint.
POST /graphql
Instead of changing endpoints, you send different queries to the same endpoint.
Request:
GET /users/1
Response:
{
"id": 1,
"name": "Samir",
"email": "samir@gmail.com",
"address": {},
"settings": {}
}
Even if the application only needs the user's name, the server still returns every field.
This is called overfetching.
Request:
query {
user(id: 1) {
name
email
}
}
Response:
{
"data": {
"user": {
"name": "Samir",
"email": "samir@gmail.com"
}
}
}
Only the requested fields are returned.
This reduces unnecessary data transfer.
GraphQL provides several advantages over traditional REST APIs.
Benefits include:
These features make GraphQL especially useful for applications with complex data requirements.
A typical GraphQL request follows this flow:
React App
│
▼
GraphQL Query
│
▼
GraphQL Server
│
▼
Database
│
▼
Response
Unlike REST, the client defines exactly which data should be returned.
GraphQL supports three main operations:
Each serves a different purpose.
Queries are used to retrieve data.
Example:
query {
users {
id
name
}
}
This requests a list of users containing only the id and name fields.
Mutations are used to create, update, or delete data.
Example:
mutation {
createUser(
name: "Samir"
) {
id
}
}
This creates a new user and returns its ID.
Subscriptions provide real-time updates.
Example:
subscription {
newMessage {
text
}
}
Whenever a new message arrives, the client automatically receives the update without sending another request.
Apollo Client is the most popular GraphQL client for React applications.
It simplifies working with GraphQL APIs by providing:
npm install @apollo/client graphql
Create an Apollo Client:
import {
ApolloClient,
InMemoryCache
}
from "@apollo/client";
const client =
new ApolloClient({
uri:
"/graphql",
cache:
new InMemoryCache()
});
Wrap the application with ApolloProvider.
<ApolloProvider
client={client}
>
<App />
</ApolloProvider>
This makes Apollo available throughout the application.
import {
gql,
useQuery
}
from "@apollo/client";
const GET_USERS =
gql`
query {
users {
id
name
}
}
`;
const {
data,
loading,
error
} = useQuery(
GET_USERS
);
The useQuery() hook automatically:
Apollo Client provides many useful features:
These features make it the default choice for many GraphQL projects.
Many modern GraphQL applications are built using:
React
+
Apollo Client
+
GraphQL
This combination offers a smooth developer experience and excellent tooling.
Relay is another GraphQL client developed by Meta Platforms.
It is designed for large-scale applications where performance and scalability are critical.
Relay provides:
Relay offers:
Relay also has some drawbacks:
Because of its complexity, Relay is generally used in very large applications.
Relay is commonly used for:
urql is a lightweight GraphQL client.
It focuses on simplicity, flexibility, and a small bundle size.
npm install urql graphql
import {
useQuery
}
from "urql";
const [
result
] = useQuery({
query:
GET_USERS
});
The useQuery() hook sends the GraphQL request and returns the result.
urql provides:
Compared to Apollo, urql has:
It is a great choice when keeping bundle size small is important.
| Feature | Apollo | Relay | urql |
|---|---|---|---|
| Popularity | Very High | Medium | Medium |
| Learning Curve | Easy | Hard | Easy |
| Ecosystem | Large | Medium | Smaller |
| Performance | Excellent | Excellent | Excellent |
| Setup | Easy | Complex | Easy |
| Enterprise Support | Good | Excellent | Good |
Best for:
Best for:
Best for:
| REST | GraphQL |
|---|---|
| Multiple Endpoints | Single Endpoint |
| Fixed Responses | Custom Responses |
| Overfetching Possible | Exact Data |
| Simpler Backend | More Flexible |
Although GraphQL is growing in popularity, most applications today still use:
REST APIs
+
Axios
+
React Query
GraphQL is commonly chosen when applications involve:
You should understand the basics of:
However, if you are just starting React development, focus first on:
These technologies are more common and easier to learn.
When working with GraphQL, our primary focus will be Apollo Client, as it is the most popular and beginner-friendly solution.
Before learning GraphQL, become comfortable with:
These concepts also apply to GraphQL.
Apollo provides:
making it the easiest GraphQL client for beginners.
One of GraphQL's biggest advantages is avoiding overfetching.
Instead of requesting an entire object, request only the fields your component actually needs.
Organize GraphQL queries for better maintainability.
Example:
src/
│
├── graphql/
│ ├── queries.js
│ ├── mutations.js
│ └── subscriptions.js
| Technology | Purpose |
|---|---|
| GraphQL | API Query Language |
| Query | Fetch Data |
| Mutation | Modify Data |
| Subscription | Real-Time Updates |
| Apollo Client | Popular GraphQL Client |
| Relay | Enterprise GraphQL Client |
| urql | Lightweight GraphQL Client |
Several GraphQL clients exist:
However, the most important GraphQL client for React developers is:
Apollo Client
because it provides:
A typical GraphQL workflow looks like this:
React
│
▼
Apollo Client
│
▼
GraphQL Server
│
▼
Database
While GraphQL is an important technology to understand, most React applications today still rely on REST APIs with Axios and React Query. Once you're comfortable with REST, learning GraphQL and Apollo Client becomes much easier.