
### GraphQL vs REST

###### REST

- Let us see the diffrence using an example.
- With REST we send an HTTP request to /author/jack and get response as follows:

```js
[
  {
    name: "jack",
    age: 24,
    no_of_books: 300,
    books: ["/api/books/book1", "/api/books/book2", "/api/books/book3"],
  },
];
```

- If we want to grab information about the books written by the author then we have to send three seperate http request for getting all of the data.
- So we have to wait for all of the three request to be fulfilled in order to be able to load our data.
- Also when we get huge json data we have to parse, sort and filter the data on the client , turn the data into the shape we want and then use it.NO FUN RIGHT !!!
- This is where graphQL comes into picture.Lets see how we do this using graphQL.

```js
query {
    author(name:"jack") {
        no_of_books
        books {
            name
            no_of_pages
        }
    }
}
```

- The way we get data with graphQL is we send a query . This is another http request, a POST request we send to graphQL single endpoint which is usually /graphql .Now our query will tell the API what data we need and get back the json response which is exact same type as query.
- We only get the data we ask for no more no less.

```json
{
  "data": {
    "author": {
      "no_of_books": 300,
      "books": [
        { "name": "book1", "no_of_pages": 120 },
        { "name": "book2", "no_of_pages": 450 }
      ]
    }
  }
}
```

- So by using graphQL we can move most of the filtering, sorting and parsing back to the server ,transform the data into the shape we want and we can then use the client simply for rendering.

- Lets now look at how we change data with REST .
- So lets suppose we want to change no_of_books for author "jack".So we send an http put request to /author/jack and get back the response json with updated number of books.
- Now lets look at how we change data using graphQL.
- We send a http POST request to /graphql with a different type of operation (mutation) to graphql API.

```js
mutation {
    setNoOfBooks(name:"jack",newNoOfBooks:305){
        name
        newNoOfBooks
        oldNoOfBooks
    }
}
```

- and get the response which is the exact same shape as the mutation :

```json
{
  "data": {
    "setNoOfBooks": {
      "name": "jack",
      "newNoOfBooks": 305,
      "oldNoOfBooks": 300
    }
  }
}
```

- We are sending request to API , the API collect all the data and then send it to us in a single response.
- Each of the fields that is being asked in the query is backed by a function and that fundtion can ask for data required from API or database and then return it. These are called **resolver** functions and then can collect data from multiple places at the same time.

![GraphQL](https://dev-to-uploads.s3.amazonaws.com/i/6svn6onmn0gufdp01utt.jpg)

#### GraphQL spec supports

- **Queries**
  - Get some data
- **Mutation**
  - Update some data
- **Directives**
  - Modify query(eg: skip/include fields)
- **Introspection**
  - Get the schema

##### Queries

REST equivalent : GET

- Arguments
- Variables
- Fragments
- Aliases
- Unions

###### Arguments

- We can pass different arguments to different fields in order to affect what that field returns.
- Arguments are also used for sorting,filtering,pagination,etc.
- We can think of each field in our request as a function and arguments change what that function returns.

```js
//Request
{
    user(login:"jack"){
        name
        age
        location
    }
}

//Response
{
    "data":{
        "user":{
            "name": "jack",
            "age":24,
            "location":"Assam"
        }
    }
}
```

###### Variables

- Sometimes when we want to pass arguments ,but don't want to hard code them , we use variables as sometimes query can be a big string.

- Variables are also checked when the types are being checked.We use ! i.e important when we don't want variables to be null.

```js
//Request
query($username:String!){
    user(login:$username){
        name
        age
        location
    }
}

//Variables
{
    "username":"jack"
}

//Response
{
    "data":{
        "user":{
            "name": "jack",
            "age":24,
            "location":"Assam"
        }
    }
}
```

###### Fragments

- Fragments are used when we want to inset some block of code at different places without repeating it again and again

- Suppose we want to use same fields in query every time we use a user , we can have a user fragment and use it whereever we want and in the server its going to take each of these fields and insert them where the fragment is being called

```js
//Request
query($username:String!){
    user(login:$username){
        ...UserFragment
    }
}

fragment UserFragment on User {
    name
    age
    location
}

//Variables
{
    "username":"jack"
}

//Response
{
    "data":{
        "user":{
            "name": "jack",
            "age":24,
            "location":"Assam"
        }
    }
}
```

###### Aliases

- Aliases can be usefull for the client actually dictating what form of data it wants back.

- In the below example client needs the location data as place because place is used on client side and not location .So we provide an alias place which contains location data.

- This can also be used when we want to call fields with different filters.

```js
//Request
query($username:String!){
    user(login:$username){
        name
        age
        place:location
    }
}

//Variables
{
    "username":"jack"
}

//Response
{
    "data":{
        "user":{
            "name": "jack",
            "age":24,
            "place":"Assam"
        }
    }
}
```

###### Unions

Unions and interfaces are abstract GraphQL types that enable a schema field to return one of multiple object types.

The following schema defines a SearchResult union type that can return either a Book or an Author:

```js
union SearchResult = Book | Author

type Book {
  title: String!
}

type Author {
  name: String!
}

type Query {

  search(contains: String): [SearchResult!]
}
```

The SearchResult union enables Query.search to return a list that includes both Books and Authors.

GraphQL clients don't know which object type a field will return if the field's return type is a union. To account for this, a query can include the subfields of multiple possible types.

Here's a valid query for the schema above:

```js
query GetSearchResults {
  search(contains: "Shakespeare") {
    // Querying for __typename is almost always recommended,
    // but it's even more important when querying a field that
    // might return one of multiple types.
    __typename
    ... on Book {
      title
    }
    ... on Author {
      name
    }
  }
}

```

###### What is the \_\_typename field?

This query uses inline fragments to fetch a Result's title (if it's a Book) or its name (if it's an Author).

Here's a valid result for the above query:

```json
{
  "data": {
    "search": [
      {
        "__typename": "Book",
        "title": "The Complete Works of William Shakespeare"
      },
      {
        "__typename": "Author",
        "name": "William Shakespeare"
      }
    ]
  }
}
```

##### Mutations

REST equivalent : POST,PUT,DELETE

- Type validation
- Return query

###### Types validation

Any inputs we send are going to be validated against the type that it'd expect and if it fails type validation it doesn't update any data.

###### Return query

When we say change that data , we can also ask our data to be returned back when the change has been done.

Here's what a mutation looks like:

```js
//Request
mutation update($questionList: QuestionListInput!){
    updateSurvey(id:1,questions:$questionList){
        questions {
            question
            id
        }
    }
}

{
    "questionList":[
        {"question":"1"},
        {"question":"3"},
        {"question":"2"},
    ]
}

//Response
{
    "data":{
        "questions":[
            {"question":"1","id":201},
            {"question":"3","id":203},
            {"question":"2","id":202},
        ]
    }
}
```

##### Directives and Introspection

###### Directives

- @skip
- @include

```js
//Request
query($username:String!,$admin: Boolean!){
    user(login:$username){
        name
        age
        email @skip(if:$admin) // if this is false this field will be returned
        location @include(if:false) // if this is true then this field is included in response
    }
}

//Variables
{
    "username":"jack",
    "admin":true
}

//Response
{
    "data":{
        "user":{
            "name": "jack",
            "age":24,
        }
    }
}
```

###### Introspection

Introspection is special type of query where we are not querying for the data the service provides,but we are quering for the schema of that service.
This is how graphiQL creates docs,type checking and autocompletes.

We designed the type system, so we know what types are available, but if we didn't, we can ask GraphQL, by querying the \_\_schema field, always available on the root type of a Query.

Lets take a star war schema example [starWarsIntrospection-test.ts](https://github.com/graphql/graphql-js/blob/main/src/__tests__/starWarsIntrospection-test.ts)

Grouping Types

- Query, Character, Human, Episode, Droid - These are the ones that we defined in our type system.
- String, Boolean - These are built-in scalars that the type system provided.
- \_\_Schema, \_\_Type, \_\_TypeKind, \_\_Field, \_\_InputValue, \_\_EnumValue, \_\_Directive - These all are preceded with a double underscore, indicating that they are part of the introspection system.

```js
//Request
{
  __schema {
    queryType {
      name
    }
  }
}
//Response
{
  "data": {
    "__schema": {
      "queryType": {
        "name": "Query"
      }
    }
  }
}

//Request
{
  __type(name: "Droid") {
    name
    kind
  }
}
//Response
{
  "data": {
    "__type": {
      "name": "Droid",
      "kind": "OBJECT"
    }
  }
}
```

Next we will discuss how to get started with Apollo Server and running an Express graphQL server and how to use Apollo Client to get benefit of its normalized cache apart from other data management solutions.
