GraphQL Queries - Getting Started

GraphQL Queries

Getting started on GraphQL can look like a lot of effort to learn a new syntax and start integrating with backend and frontend but when you learn that the syntax is very easy and familiar, all there is to do is to just jump in and start your first project with GraphQL

Fields

Fields are the individual data retrieved from the query. Once you have formed the query with fields needed, structure of the data returned follows the same structure as the input which makes it easy to map the fields

{
    user {
        name
        id
        dateofbirth
    }
}

Returns:

{
    "data": {
        "user": {
            "name": "Name 1",
            "id": "uniqueid124",
            "dateofbirth" : "23/10/1995"
        }
    }
}

Pulling specific fields

There will be scenarios where you just want a specific data from a list or fields being transformed based on the business logic of your application. Luckily all the fields can have arguments passed which can simplify the data fetched from the backend and remove the need to have filter logic in the frontend

Consider the scenario where you have the search filter and each user input is sending a backend api call to your server which filters the list and sends it back. Now you can send the GraphQL query based on the search input and make it easier to display the list in the UI

{
    allusers(name: "nam") {
        name
        dateofbirth
    }
}

Returns:
{
    "data": {
        "allusers": [{
            "name" : "name lastname",
            "dateofbirth": "23/03/1997"
        }. {
            "name" : "name middlename",
            "dateofbirth": "03/07/2003"
        }]
    }
}

Fragments

When building a real world application, we tend to follow standard patterns when displaying similar data throughout the application. Fragment help in following the DRY pattern (Don't Repeat Yourself) when it comes to GraphQL.

When there is blog site and displaying each blog as a card in your application might follow the same pattern.

{
    mostViewedBlog: blog(id: "1234") {
        ...blogFields
    }
    mostRecentBlog: blog(id: "43243") {
        ...blogFields
    }
    relatedBlog: blog(idL "323") {
        ...blogFields
    }
}

fragment blogFields on Blog {
  name
  description
  image_url
}

We have made our query easier to read and also removed repetition in the query using fragment. When declaring the fragment on keyword defines on which fields you are going to use the fragment. GraphQL then allows to define those fragments on those fields which prevent errors and making sure that fragment fields are present.

Bonus: Keen observers would have noticied the last query having some name on the left separated by :. Those are aliases and you can use them to rename the result of the field

Result:
{
    "data": {
        "mostViewedBlog" : {
            "name": "GraphQL Queries",
            "description" : "Description of GraphQL Queries",
            "image_url": "blogimage.png"
        },
        "mostRecentBlog" : {
            "name": "What is GraphQL",
            "description" : "Description of GraphQL",
            "image_url": "blogimage.png"
        },
        "relatedBlog" : {
            "name": "GraphQL Mutation",
            "description" : "Description of GraphQL Mutation",
            "image_url": "blogimage.png"
        }
    }
}

Practical Exercise

Start learning these concepts better, you can start a quick project in Hasura and learn GraphQL queries by building api of the feed with a search input

Here is an simple design to spark your creativity