Purpose of the Article: In this blog, we are discussing how to perform a simple Read operation with the help of apollo server, node.js, and our query language Graphql. We will also understand and implement typedefs, Query, and resolvers.
Intended Audience: Beginner in Graphql technology
Tools and Technology: apollo server, npm,node.js, and graphql
Keywords: graphQl with apollo-server, Node.js
Introduction
Here we will focus on performing a simple Read operation with the help of the apollo server, node.js, and our query language graphQl. We will also understand and implement typedefs, Query, and resolvers.
Let’s understand GraphQl.
It is a query language. GraphQL is primarily designed to provide the client with the exact data they requested and nothing more. GraphQL is a syntax that describes how to ask for data; for more info, please visit GraphQl.
Why GraphQl?
GraphQL query language is helping us to make APIs super-fast, readable, and developer-friendly. To solve the problem of over fetching and under fetching, graphQL only gives you a specific API according to request; in one API Call, it has only one endpoint(/Graphql).
A GraphQL operation can be a query (read) or mutation (write), so we’ll study the query operation in this article.
What is Apollo?
In the Apollo platform, we can implement GraphQL, which can help to transfer data between the cloud (server) and the UI of our app. With the help of Apollo, we can use it to handle GraphQL on the client and the server side of the application.
Required Tools
- js: we plan to rely on node.js for the server side.
- npm init: it can be used to set up a newly created or existing npm package.
- Apollo-server: Apollo Server is a library that helps you connect a GraphQL schema to an HTTP server in Node.js, which helps you define the shape of your data and how to fetch it.
- GraphQl: GraphQl is the library used to build a GraphQL schema and execute queries against a GraphQL schema.
Let’s Start
We’ll be playing with userArray and quoteArray data in this article, and we’ll try to fetch data from it by Using a query. Here we’ll try to cover everything in just one file, server.js.
Step 1: Create a file server.js
Step 2: With the help of the following command, we will create the package. JSON file in your project folder.
npm init –yes
Let us look at the project directory; we can see the package. JSON file.
Step 3: It is time to install our dependencies. Run the following command.
npm install apollo-server graphql
Step 4: Now go to package. JSON and put the following line in the scripts
“start”: “node server.js”
This line tells us that when we hit npm start, it will start with this file.
Step 5: Next go to the server.js file.
Here we are importing ApolloServer and gql from the apollo-server package in the server.js file.
const {Apollo Server, gql } = require(‘apollo-server’);
Step 6: Before our hands get dirty, we will define an array of objects for usersArr and quotesArr in the server.js page itself.
This is a one-to-many relationship. Here users can have many quotes, here we can say that usersArr.id is equal to quotesArr.by.
Looking into the array, we can see that user id 1 has two quotes.
Step 7: Let us understand and define typeDefs.
To define types of data, every graph uses a schema. This schema includes typeDefs. It is (typeDefs) a required argument to provide GraphQL schema language in the form of a string or array. It could be a function that does not take arguments and returns an array of GraphQL schema. The argument is required. For GraphQL queries, UTF-8 strings are used. It has tag Template literals which are delimited with backticks (`) syntax.
const typeDefs = gql ` `;
Step 8: Now, we will work on typeDefs with Query.
Here we have a user type that looks like id, Name, email, quotes, etc. As soon as we have defined our type, we must retrieve the User Type. Query object will do this; it will be returning an array of a User Type. Here getAllUsers is the name of a Query. Here we can write any name as per our convenience.
Similarly, I have defined Quote type.
Step 9: In this step, let us implement the functionality for what we have defined so far by creating a resolver.
In this same file, server.js, we will define our resolvers. Here we have a resolver function for User and Quote which will return an array of the User and Quote. Your file should look like this.
Here, we have added the type User to the resolvers, and we are resolving it.
Please try to understand why we are resolving it.
In Query type, getAllUsers returns the array of User typeDefs.
And this Array of User type contains the type of Quote inside it.
To access this type of Quote when we call getAllUsers from graphql playground,
We first need to resolve it.
quotes:(parent)=>quotesArr.filter(x=>x.by == parent.id);
This line tells us to filter the quotes according to the user’s id, which the parent will access. To learn more about parents, please follow this link:
Step 10: Let’s define our apollo server.
Step 11: Finally, it’s time to run our server.
Let’s start our server by typing npm start in a command prompt. This will run on http://localhost:4000, and we will see GraphQL Playground running.
Step 12: Let’s try to get all user’s details:
query GetAllUsers {
getAllUsers {
id
Name
quotes {
name
by
}}}
We will see the result below:
Step 13: Let’s try to get the all-quote details:
query GetAllQuotes {
getAllQuotes {
name
by
}
}
We will see the result below:
Wrapping Up
This article will help us to create a GraphQL server in Node.js with Apollo Server. We also understand typedefs, Query, and resolvers. This tutorial covers the basics of Query.
Author Bio:
Shruti Bharat Latthe
Associate Software Developer
My professional experience is in front end technology such as React and Angular. I enjoy helping people, reading, and experimenting with new technology.
