The Significance of GraphQL — Part 4 (How to serve GraphQL over HTTP?)

Prerequisites

Run and Start

  • Open up a terminal and issue the following command to start mongod:
sudo service mongod start
  • Navigate to the repository which you cloned from the Git, open up a terminal and type the following in order to up the GraphQL backend.
mvn jetty:run
  • The terminal should be like below when the GraphQL server has started successfully.

What is this HackerNews API?

  • As an example for the demonstration, I am going to use the HackerNews API which has the following functionality.
  • What HackerNews normally does is, it stores the details like URL, description about particular links.
  • Using HackerNews API you can add new links and retrieve data about the stored links.

Using GraphQL Mutations

  • Assume you want to send the below mutation with data.
mutation createLink {
createLink(url: "https://medium.com", description:"Medium Website"){
url
Description
}
}
  • The purpose of this mutation is to create a new link with the URL: “https://medium.com and the description: “Medium Website”.
  • Open up the Postman Application.
  • Select POST as the method and enter the URL http://localhost:8080/.
  • Navigate to the Body tab in Postman and set as raw — JSON (application/json). Type the following as the body.
{
"query": "mutation createLink { createLink(url: \"https://medium.com\", description:\"Medium Website\"){ url, description } }",
"variables": null,
"operationName": "createLink"
}
Postman interface after you enter the details correctly
  • In here the query is passed, along with the operationName.
  • Now click the Send button. It will give you the below result.
Result after sending the POST request
  • In here what you have done is, inserted a new link to the MongoDB database which consists the URL and description as above. Likewise, you can add more links to the database.
  • Add another link as below.
Send the query like above
After clicking the Send button — The result

Fetching Data using GraphQL Queries

1. Fetching data through GET method

  • First, assume you want to send a query like below to your GraphQL server. (when calling the GraphQL API)
{
allLinks {
url,
description
}
}
  • The purpose of this query is to retrieve the URLs and descriptions of all the links stored in the database.
  • Open up the Postman Application.
  • Select GET as the method.
  • Enter the URL as below.
http://localhost:8080/?query={allLinks {url,description}}
Postman interface after you enter the details correctly
  • Now click the Send button. It will give you the below result.
Result after sending the GET request
  • In here you can see all the links which are in the database are retrieved.

2. Fetching data through POST method

  • Assume you want to send the same query which we sent earlier.
{
allLinks {
url,
description
}
}
  • The purpose of this query is to retrieve the URLs and descriptions of all the links stored in the database. (explained in the previous section too)
  • Open up the Postman Application.
  • Select POST as the method and enter the URL http://localhost:8080/.
  • Navigate to the Body tab in Postman and set as raw — JSON (application/json). Type the following as the body.
{ 
"query": "{ allLinks { url, description } }",
"variables": null,
"operationName": null
}
Postman interface after you enter the details correctly
  • In here only the query is passed, nothing else. You can find more details about the syntax of the payload in Method 2.
  • Now click the Send button. It will give you the below result.
Result after sending the POST request
  • Assume you want to send the same query but with different syntax.
query links {
allLinks {
url
description
}
}
  • The purpose of this query is the same as the previous query we used in Method 1 which is to retrieve the URLs and descriptions of all the links stored in the database.
  • Open up the Postman Application.
  • Select POST as the method and enter the URL http://localhost:8080/.
  • Navigate to the Body tab in Postman and set as raw — JSON (application/json). Type the following as the body.
{
"query": "query links{ allLinks { url description } }",
"variables": null,
"operationName": "links"
}
Postman interface after you enter the details correctly
  • In here the query is passed, along with the operationName. That is because we have given a specific name for the query as “links”. So we should pass it as the operationName. Still, we did not pass variables.
  • Now click the Send button. It will give you the below result. (which is similar to the response we got in Method 1)
Result after sending the POST request

Special Note

  • Assume you have a payload like below.
{
query”: “query aTest($arg1: String!) { test(who: $arg1) }”,
operationName”: “aTest”,
variables”: { “arg1”: “me” }
}
  • In here you can see that the variables field is not null. It contains the variable $arg (which has the type string) which has passed to the query and it's valued as “me”.
  • This type of queries can also exist, depending on the situation.

More Example Queries

Query:{
allLinks(filter: {description_contains: "back", url_contains: "cool"}) {
url
description
}
}
Payload:
{
"query":"{ allLinks(filter: {description_contains: \"back\", url_contains: \"cool\"}) { url, description } }",
"variables":null,
"operationName":null
}
Query:{
allLinks(first: 1) {
url
description
}
}
Payload:{
"query":"{ allLinks(first: 1) { url, description } }",
"variables":null,
"operationName":null
}
Query:query links {
allLinks(first: 1) {
url
description
}
}
Payload:{
"query":"query links { allLinks(first: 1) { url, description } }",
"variables":null,
"operationName":"links"
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Noisy World  — Obsidian Server’s Minecraft-Like World Generation Pt. 1

Building a Desktop Application from Scratch

Reducing “huh??” Moment From Your Code With Clean Code

Technology & Emotional Intelligence?

Design Patterns continued: Structural Patterns

AWS Serverless Services and their Use-Cases — Part 1

A Backend’s Nightmare Before Christmas

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Wasura Wattearachchi

Wasura Wattearachchi

More from Medium

Jest: Does It Test Funny to You?

Properly Setting up a Scheduled Cloud Function in Firebase

Docker Compose

An overview of message brokers