GraphQL Queries: GraphQL Essentials Part 1

In my previous blog“ Introduction to GraphQL ”, we learned about the basics of GraphQL. Now we will see more features and get experience building a real-world application.
Please go through the introduction if you are a beginner in the world of GraphQL.

Introduction to GraphQL

Note: In this article, we will learn about GraphQL’s Queries with an example of the real-world application.

Introduction

As seen in the diagram above, we have a blog application that consists of users, posts, and comments. In this application, we will see:

1. GraphQL API
2. Scalar Type & Custom Type
3. Queries — Arguments
4. Relational data
5. Creating queries

The above diagram shows all the properties/attributes of the users, posts, and comments for this application. It also shows the relationship between users and posts, users and comments, posts and comments.

Getting started

Create a package.json file into the root of our project folder “graphql_nodejs”:


mkdir graphql_nodejs
npm init


If you want to skip all the question asked during the creation of package.json with the above command, run:


npm init -y


Let’s Install the latest version of the packages needed to develop our application.


npm install babel-cli babel-preset-env transform-object-rest-spread graph-yoga uuid


babel-cli

babel-cli will helps to pass our code through babel and run it once the code is compiled.

babel-cli

babel-preset-env

It allows running a command to compile babel and allows us to run the latest Javascript in the browser without micromanaging the syntax transforms.

babel-preset-env

transform-object-rest-spread

It’s a plugin which allows babel to transform rest properties for object destructuring assignment and spread properties for object literals

babel-plugin-transform-object-rest-spread

graphql-yoga

graphql-yoga is the fully featured GraphQL server with great user experience and performance

graphql-yoga

Manage the application with Nodemon

Install Nodemon to reload/restart our server automatically when any of the application code is saved. This will be one of the development dependency and won’t be used in the production environment.


npm install nodemon --save-dev


Set up Babel

Create a .babelrc file into the root of our project folder “graphql_nodejs” and the following code:


touch .babelrc


This is how our package.json file will look:

Get the GrapQL server up and running

Create an index.js file in the root folder and insert the following code:
Now, run


npm run start


You will be able to see the screen in your browser as shown in the below image:
GraphQLServer
GrapQLServer will be able to create a new server for our GraphQL instance
Typedefs (Schemas) — operations and data structures
We need to model the schemas for our GraphQL application, graphql-yoga provides the way to construct the GraphQL Schema by defining the type definitions which defines the operation to be performed by the API and it defines how the data of users, posts, and comments will look.
Resolvers
This is the set of functions which is run for each operation that can be performed on our API.
As seen in the above code, we have defined the query type definition which contains all the Scalar Type of GraphQL ** for each operation it has. Resolvers will contain the set of functions which will run operation that needs to be executed by the API.

More on Scalar Types and Custom Types

As seen in the above code, there are five scalar types of GraphQL we have used: Int, String, Float, Boolean, ID.
Custom Type: We have a user type which defines its attributes.
Now define the custom type and resolvers for users and posts. We will also define the relationship between the users and posts
As you can see in the above code, we have defined the User and Post type. The User type contains the Posts as the custom type which will have an array of all the posts and the Post type has users which will have an array of all the users.
The Query type will get all the posts and the users, and the Query object in resolvers will set the function to get all the result.

Note: ! indicates that the fields on the types are mandatory

Query in resolvers

If there are no optional arguments, the users function will return all the users provided to query from GraphQL UI.
If the optional argument is provided, it will return the specific users mentioned in the query.

Post resolvers

The Post object which is related to the Post type definition defines the function which needs to be performed on the root resolver. In this case, the author function will return the post’s author and the comment function will return the comments of the post.
The * User object * is related to the User type which has the posts field. Here the posts function will return all the posts which are written by the specific user.

Resources

GraphQL — The official website
Learn GraphQL — GraphQL tutorials
Prisma – The official prisma website

Conclusion

In this article, we have learned the practical way of implementing GraphQL queries with GraphQL server in action .
In the next article , we shall discuss more on GraphQL Mutations
I have created a repository of our app on my Github , please feel free to fork the code and try to run all the commands/code which I have mentioned above

If you liked it please leave some claps to show your support. Also, leave your responses below and reach out to me if you face any issues.

Follow me on Twitter | Check out my LinkedIn | See my GitHub

Learn GraphQL – Best GraphQL Tutorials (2019) | gitconnected