GraphQL and its components
What is GraphQL?
GraphQL is a query language for APIs. Quabbly's GraphQL API is the primary way users can send or get data from Quabbly's database.
As a side note, GraphQL acts as an application layer that parses any query you send for you to receive or post data in different types.
GraphQL allows users to interact with one endpoint with the utmost ability to determine the structure of an expected data. That would come from the way users structure their query. No need for for an aggregate number of endpoints based on different actions you need to perform on a database.
Check this site to learn more about GraphQL
However, let's have a quick look into the different components of GraphQL.
GraphQL Operations
Query
Query allows to fetch data from your Quabbly account in a Read format. Here, there's no modification or changes on data or its structure within your account.
Here's an example of a query
query{
board(boardId:"614cc5198d57e60001e17963"){
id
boardSecret{
name
description
boardSize
}
colour
icon
createdBy
}
}
Mutation
Unlike Query, Mutation modifies data in the database and returns a response value in turn.
Mutation query allows you to create, update and delete data.
Here's an example of Mutation query that allows you create a board.
mutation {
board(
createBoardDTO: {
name: "Example Board"
description: "This is an example board"
size: "SMALL"
icon: "uil-apps"
colour: "#ffb703"
}
) {
id
boardSecret {
name
description
boardSize
colour
icon
}
}
Objects
An object in GraphQL is a collection of fields. For instance, boards in the query example below is an object comprising of name, description, size, icon and colour as fields under board object. The fields within the board object are known as sub-fields.
mutation {
board(
createBoardDTO: {
name: "Example Board"
description: "This is an example board"
size: "SMALL"
icon: "uil-apps"
colour: "#ffb703"
}
) {
id
boardSecret {
name
description
boardSize
}
}
Fields
Fields are used to return specific properties in a data response when a query is passed. In the query below, id and BoardSecret are the fields whose properties we want to see in our response.
mutation {
board(
createBoardDTO: {
name: "Example Board"
description: "This is an example board"
size: "SMALL"
icon: "uil-apps"
colour: "#ffb703"
}
) {
id
boardSecret {
name
description
boardSize
}
}
Arguments
An argument should be passed in a query to determine the returned data. For mutation, argument helps you specify how you want to modify data in your account. In the case of query, argument determines the returned data and helps with specificity.
query{
boards{(boardId:"612364738392029")
id
boardSecret{
name
description
}
}
}
BoardId in the Query above is an argument as it fetches a specfic board from Quabbly account with that unique identifier.
Nested Queries
Some sample queries do come with nested values. Like an argument having sub-arguments and fields having subfields.
HTTP Headers
This is where extra request is passed to a GraphQL URL through a server or client to the API url. This usually comes in the form of domain or API key.
mutation{
updateBoard(
id:"612364738392029"
dto:{
name:"example2"
size:"SMALL"
}
){
id
boardSecret{
id
name
boardSize
}
}
Updated almost 3 years ago