# GraphQL Crash Course Notes
## What is GraphQL?
### Query Language:
- The "QL" in GraphQL stands for "Query Language."
- A syntax to query a server for requesting or mutating data.
### Comparison with REST APIs:
- REST is an architectural style, while GraphQL is an actual query language with defined syntax and rules.
- GraphQL still uses HTTP requests but allows more flexibility in controlling what data is fetched or mutated.
---
## Drawbacks of REST APIs
### Over-fetching:
- Receiving more data than needed.
- **Example**:
- REST endpoint: `/courses` returns all courses.
- Each course object contains fields like `id`, `title`, `author`, `price`, etc.
- Only `id`, `title`, and `thumbnail` are needed, but all fields are returned.
### Under-fetching:
- Not receiving enough data in a single request.
- **Example**:
- REST endpoint: `/courses/:id` returns a single course.
- To fetch additional details (e.g., author's other courses), multiple requests to different endpoints are required.
---
## Advantages of GraphQL
### Single Endpoint:
- GraphQL uses a single endpoint (e.g., `/graphql`) for all requests.
### Precise Data Fetching:
- Queries specify exactly what data is needed, avoiding over-fetching.
- **Example**:
```graphql
{
courses {
id
title
thumbnail
}
}
```Response:
{
"courses": [
{
"id": 1,
"title": "Course 1",
"thumbnail": "url1"
},
{
"id": 2,
"title": "Course 2",
"thumbnail": "url2"
}
]
}- Fetch related data in a single request.
- Example:
Response:
{ course(id: 1) { id title author { name courses { id title thumbnail } } } }{ "course": { "id": 1, "title": "Course 1", "author": { "name": "Author 1", "courses": [ { "id": 2, "title": "Course 2", "thumbnail": "url2" } ] } } }
- Retrieve data from the server.
- Add, update, or delete data.
- Example:
Response:
mutation { addCourse(title: "New Course") { id title } }
{ "addCourse": { "id": 3, "title": "New Course" } }
- To build a GraphQL server.
- A browser-based tool to test GraphQL queries (like Postman for REST).
Here are your notes in markdown format, based on the video transcript:
# GraphQL with Apollo Explorer
## Overview
- **Apollo Explorer** is a tool to send test queries to a GraphQL server and view responses.
- Similar to **Postman** for REST APIs, but designed specifically for GraphQL.
- Allows you to test and sync queries as you would in a frontend application without needing to actually build a frontend.
## Making Queries in Apollo Explorer
1. **Query Syntax:**
- To start a query, use the keyword `query` followed by a name (optional), and then specify the data fields you want.
- Example:
```graphql
query reviewsQuery {
reviews {
rating
}
}
```
2. **Specifying Fields:**
- Unlike REST APIs, you can specify exactly which fields you want from a resource.
- Example:
```graphql
query {
reviews {
rating
content
id
}
}
```
- The response will include only the specified fields for each review.
3. **Navigating the Graph:**
- In GraphQL, you can navigate a connected graph of resources.
- Example: Fetching related data from a connected resource like an author:
```graphql
query {
reviews {
rating
content
author {
name
}
}
}
```
- This query fetches reviews, and for each review, it also retrieves the author's name.
4. **Nested Queries:**
- GraphQL allows nested queries where related data can be fetched in a single request.
- Example: Fetching a game related to each review:
```graphql
query {
reviews {
rating
game {
title
platform
}
}
}
```
- Response:
```json
{
"reviews": [
{
"rating": 5,
"game": {
"title": "Game 1",
"platform": ["PC", "Xbox"]
}
}
]
}
```
5. **Graph Structure:**
- GraphQL API is essentially a graph, with connected data resources.
- For example, reviews, authors, and games are connected, and you can jump into the graph at any entry point (e.g., reviews or games) and navigate through related data.
## Working with Apollo Server
- To create a GraphQL API, you'll use **Apollo Server** with **Node.js**.
- **Apollo Server** is one of the libraries used to quickly set up a GraphQL server.
## Mutations in GraphQL
- In addition to querying data, you can use **mutations** to modify the data.
- Example:
```graphql
mutation {
addGame(title: "New Game", platform: "PC") {
id
title
}
}
```- This will add a new game and return the
idandtitleof the newly created game.
- GraphQL allows precise querying of data and avoids over-fetching.
- You can navigate a connected graph to fetch related data in a single request.
- Apollo Explorer is a great tool for testing GraphQL queries and mutations.
- The server can expose multiple resources (e.g., reviews, authors, games) that can be queried and mutated.