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.
As seen in the diagram above, we have a blog application that consists of users, posts, and comments. In this application, we will see:
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.
Create a package.json file into the root of our project folder “graphql_nodejs”:
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 will helps to pass our code through babel and run it once the code is compiled.
It’s a plugin which allows babel to transform rest properties for object destructuring assignment and spread properties for object literals
graphql-yoga is the fully featured GraphQL server with great user experience and performance
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
Create a .babelrc file into the root of our project folder “graphql_nodejs” and the following code:
This is how our
package.json file will look:
index.js file in the root folder and insert the following code:
npm run start
You will be able to see the screen in your browser as shown in the below image:
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.
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.
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
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.
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
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 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.
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.
GraphQL — The official website
Learn GraphQL — GraphQL tutorials
Prisma – The official prisma website
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
This content was originally published here.