GraphQL Queries

A GraphQL query is just an instruction for traversing the graph in a specific way, resulting in a tree.

        {
            posts(count: 2) {
                title,
                comments(count: 5) {
                    content
                }
            },
            authors {
                name
            }
        }
    

posts & authors: root query fields

count: argument

Alias or result in variables

        #GraphQL query
        {
            postTitles: posts {
                name
            },
            postIds: posts {
                _id
            }
        }
    

        #GraphQL result
        {
            "data": {
                "postTitles": [
                    {
                        "title": "My first post"
                    },
                    {
                        "title": "My second post"
                    }
                ],
                "postIds": [
                    {
                        "_id": "1"
                    },
                    {
                        "_id": "2"
                    }
                ]
            }
        }
    

GraphQL query variables

        #GraphQL query
        query getPosts($postCount: Int!) {
            posts(count: $postCount) {
                title
            }
        }
    

This is the full syntax to write a GraphQL querie and it's necessary if you want to use query variables.

• Can use variable anywhere in query even in fragments or mutations
• Only some types can be use in query variable: Input Types

GraphQL Fragments

        #GraphQL query
        {
            post1: post(_id: "1") {
                ...postInfo,
                date
            },
            post2: post(_id: "2") {
                ...postInfo
            }
        }

        fragment postInfo on Post {
            _id,
            title,
            category
        }
    

        #GraphQL result
        {
            "data": {
                "post1": {
                    "_id": "1",
                    "title": "My first post",
                    "category": "IT",
                    "date": "2018-05-20T09:00:00"
                },
                "post2": {
                    "_id": "2",
                    "title": "My second post",
                    "category": "JS"
                }
            }
        }
    

postInfo is a fragment defined on the Post type and including: _id, title, date, category => fields
"...": simply use ES6 spread operator syntax in order to use fragments into queries

• Can mix fragments and fields
• Can use fragments with nested fields
• Can use fragments with mutations

GraphQL Inline Fragments

        #GraphQL query
        posts {
            title
            ... on ComputerScience {
                languages
            }
            ... on ComputerGraphic {
                media
            }
        }
    

        #GraphQL result
        {
            "data": {
                "posts": [
                    {
                        "title": "My second post",
                        "languages": [
                            {
                                "Angular",
                                "NGRX"
                            }
                        ]
                    },
                    {
                        "title": "My first post",
                        "media": [
                            {
                                "Sculpture"
                            }
                        ]
                    }
                ]
            }
        }
    

In this exemple on a traditional selection way, you can only ask for fields that exist on the posts interface type

To ask for a field on a concrete type, you need to use an inline fragment with a type condition. Here, the first fragment is labeled as ... on ComputerScience, the primary function field: languages will only be executed if the Post returned is a type of ComputerScience.

Actually it's like a condition.

GraphQL introspection with meta fields

        #GraphQL query
        {
            search(text: "o") {
                __typename
                ... on Post {
                    title
                }
                ... on User {
                    username
                }
            }
        }
    

        #GraphQL result
        {
            "data": {
                "search": [
                    {
                        "__typename": "Post",
                        "title": "My first Post"
                    },
                    {
                        "__typename": "User",
                        "username": "root"
                    }
                ]
            }
        }
    

All introspection type begin with: "__"

GraphQL directives

    #GraphQL query
    query Post($withComments: Boolean!) {
        posts {
            title
            comments @skip(if: $withComments) {
                author,
                content
            }
        }
    }
    

        #GraphQL variables
        {
            "withComments": false
        }
    

        #GraphQL result
        {
            "data": {
                "posts": [
                    {
                        "title": "My first post"
                    },
                    "post2": {
                        "title": "My second post"
                    }
                ]
            }
        }
    

Directives can be useful to cope of specific situations that avoid string manipulation of query (add and remove fields in your query).
Default directive:

• @include(if: Boolean) Only include this field in the result if the argument is true.
• @skip(if: Boolean) Skip this field if the argument is true.