Learn graphql with apollo-server and node.js #1
--
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?
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
Step 2: Run the following command to create the package.json file in your project folder.
npm init --yes
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
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’);
Step 6: Now before our hands get dirty we will we define array of object for usersArr and quotesArr in server.js page itself
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
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.
the similar way I have defined 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.
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
and this Array of User type contains the type 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 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
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.
step 12: Let’s try getting all Users details:
query GetAllUsers {getAllUsers {idNameemailquotes {nameby}}}
We will see a result as below:
step 13: Let’s try getting all Quotes details:
query GetAllQuotes {getAllQuotes {nameby}}
We will see a result as below:
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!