Learn graphql with apollo-server and node.js #1

graphql with apollo-server and node.js

What is Graphql?

It is a query language. it prioritizes giving clients exactly the data they request and no more. GraphQL is a syntax that describes how to ask for particular data for more info please visit Graphql

Why Graphql?

REST API vs GQL API

GraphQL is designed to make APIs fast, flexible, and developer-friendly. It helps to solve the over Fetching and under-fetching problem, which means graphQL only gives you a specific API according to request, In one API Call, It has only one endpoint(/gql).

A GraphQL operation is either a query (read), mutation (write), Here in this article, we’ll study the query operation.

What is Apollo?

The Apollo platform is an implementation of GraphQL that can transfer data between the cloud (server) to the UI of your app. In fact, Apollo builds its environment in such a way that we can use it to handle GraphQL on the client as well as the server-side of the application. For more information please visit Apollo-server

Required Tools:

• Node.js: To run JavaScript code on the server we will be going to use Node.js
• npm init: it can be used to set up a new 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 that type schema.

Let’s Start

In this article, we’ll be playing with userArray and quoteArray data and we’ll try to fetch data from it. Using query

here we’ll try to cover all things in just one file only that is server.js

Step 1: Create a file server.js

create server.js file

Step 2: Run the following command to create the package.json file in your project folder.

npm init --yes

executing the command

Now look at your project directory, you can see the package.json file.

Step 3: It is time to install our dependencies. Run the following command, this will install all the dependencies.

npm install apollo-server graphql

executing the command

Step 4: Now go to package.json and add following line in scripts

“start”: “node server.js”

Step 5: Now go to server.js file

Here in the server.js file first, we need to import ApolloServer and gql from the apollo-server package.

const { ApolloServer, gql } = require(‘apollo-server’);

importing apollo-server

Step 6: Now before our hands get dirty we will we define array of object for usersArr and quotesArr in server.js page itself

defining array

this is one-many relation here user can have many quotes, here we can say that usersArr.id is equal to quotesArr.by

by looking into the array we can say that user id 1 has total of two quotes.

Step 7: Now let us understand and define typeDefs

Every graph uses a schema to define the types of data, it includes typeDefs is a required argument and should be a string or array of GraphQL schema language strings or a function that takes no arguments and returns an array of GraphQL schema language strings. It represents a GraphQL query as a UTF-8 string.it has tag Template literals which are delimited with backticks (`) syntax

defining typeDefs

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. Once we define our type we need to fetch User Type.

this will be done by Query object which will be returning an array of a User Type

Here getAllUsers is the name of a Query. You can give any name as per your requirements.

defining type Query

the similar way I have defined Quote type

defining Quote type

Step 9: Now let us implement the functionality for what we have defined so far by creating resolvers.

In this same file server.js, we will define our resolvers Here we’ll have a resolver function for User and Quote which will return an array of the User and Quote. Your file should look like this.

creating resolvers

Here, you can see we have added type User in resolvers, and we are resolving it

why we are resolving it please try to understand that, in Query type getAllUsers is returning the array of User typeDefs

referring Query type

and this Array of User type contains the type Quote inside it.

An array of User type

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 that, filter the quotes according to the id of user and it will be accessed by the parent, to know more about parent please click here

step 10: let’s define our apollo server

defining server

step 11: Now time to run our server.

To start our server go to the command prompt and hit npm start. This will be running on http://localhost:4000, and we will see GraphQL Playground running.

executing command

Graphql Playground

step 12: Let’s try getting all Users details:

query GetAllUsers {
getAllUsers {
id
Name
email
quotes {
name
by
}
}
}

We will see a result as below:

result of getAllUsers

step 13: Let’s try getting all Quotes details:

query GetAllQuotes {
getAllQuotes {
name
by
}
}

We will see a result as below:

result of getallQuotes

Wrapping Up

In this article, We saw how to create a GraphQL server in Node.js with Apollo Server. We also understand typeDefs, Query, resolvers. This tutorial has covered the basics of Query.

What next?

In the next articles, I will be writing on how to improve your application using different folders and file structures, how to perform CRUD operations with JSON data without a database, etc. Stay tuned!