Build A Library Application With Graphql ExpressJs React-Apollo and MongoDB (Part 4)

<h1>Repository <h3>React <p dir="auto"><span><a href="https://github.com/facebook/react" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/facebook/react <h3>Graphql <p dir="auto"><span><a href="https://github.com/graphql/graphql-js" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/graphql/graphql-js <h3>Apollo <p dir="auto"><span><a href="https://github.com/apollographql/apollo-client" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/apollographql/apollo-client <h3>Express <p dir="auto"><span><a href="https://github.com/expressjs/express" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/expressjs/express <h3>My Github Address <p dir="auto"><span><a href="https://github.com/pckurdu" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/pckurdu <h3>This Project Github Address <p dir="auto"><span><a href="https://github.com/pckurdu/Build-A-Library-Application-With-Graphql-ExpressJs-React-Apollo-and-MongoDB-Part-4" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/pckurdu/Build-A-Library-Application-With-Graphql-ExpressJs-React-Apollo-and-MongoDB-Part-4 <h1>What Will I Learn? <ul> <li>You will learn how to create a database and database user on mlab. <li>You will learn how to make mlab connection with graphql application. <li>You will learn how to use Mongoose packages. <li>You will learn the concept of mutation in Graphql. <li>You will learn how to add data to the mongoDB database with Graphql mutation. <h1>Requirements <ul> <li>text editor (I used visual studio code editor) <li>Basic javascript information <li>Basic react information <h1>Difficulty <ul> <li>Basic <h1>Tutorial Contents <p dir="auto">Hello to everyone. <p dir="auto">In this tutorial, we will contact the library application with <code>mLab, the cloud system of the mongodb database. <p dir="auto">We will create a database using mLab and add users to this database for use in the application.We will install mongoose packages after making the connection. We will produce mongoose models to access the database from the application and send the book and author data to the database with the help of these models. <p dir="auto">We will use mutation types in graphql and we will add the authors to the database with mutation. So we will add our first data to the mongodb database with GraphiQL <p dir="auto">I have divided this tutorial into sections as follows: <ul> <li>Make A mLab Connection <li>Mongoose Model Creation <li>Adding Authors With Mutation <h3>1- Make A mLab Connection <p dir="auto">We are ready to connect mLab with our library application. In this section we will talk about what <code>mLab is and build a database on mLab. We will also connect the database we created on mLab with the application. <p dir="auto"><code>mLab is a cloud system that provides <code>mongoDB database online and provides the necessary transactions automatically. In fact mLab is a mongoDb that we can use anywhere on the internet and not on local devices. <p dir="auto">In order to use mLab in our application, we must first enter the mLab website and become a member. After signing up, we can use the mLab tools and perform database operations. <p dir="auto"><img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmYK9FvnmYbRZ8FN6hQ1431QCPWJcYe1xWpMMu6TweFhQx/graphql1.gif" alt="graphql1.gif" /> <p dir="auto">We can create the database after performing the membership process. The following gif shows how to create a database. <p dir="auto"><img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmSrDmmtSDrapY8WtYdmg2XQYBBjC72HkKdsbHaHtY2VnX/graphql2.gif" alt="graphql2.gif" /> <p dir="auto">After creating the database, we need to define user in order to use this database. We will identify this user's information within the application and link the application to the database. <p dir="auto"><img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmRicrT1rBuUvhvzzbh3kFo3M5vVcC4ce3ezsNCX6PjC2b/graphql3.gif" alt="graphql3.gif" /> <p dir="auto">Now that we have created a database and a user, we can proceed to the application process. In order to use mongoDB tools in the application, we must use <code>mongoose packages. <p dir="auto">First download these <code>mongoose packages for use in the application. Here we have to remember that we need to download mongoose packages into the server folder. <pre><code>npm install mongoose <p dir="auto"><br /><br /> After downloading the packages, we need to enable mongoose in the <code>app.js file. <pre><code>//for mongoose packages const mongoose=require('mongoose'); <p dir="auto"><br /><br /> We will connect to the database using the <code>connect() function. The connect () function allows us to check whether there are permissions required to connect to the database. We need to use the information of the user we created here. <pre><code>//generated user information is used. mongoose.connect('mongodb://<dbuser>:<dbpassword>@ds139037.mlab.com:39037/pckurdu'); <p dir="auto"><br /><br /> You must type the user name that you created in the <code>dbuser field and the user's password in the <code>dbpassword field.<br /> If the entered values are correct, we can now make the connection. Using <code>connection.once (), let's manage the connection and print the mLab connection to the console for success. <pre><code>//Connecting with mLab. mongoose.connection.once('open',()=>{ console.log('mLab conncetion success'); }) <p dir="auto"><br /><br /> Console picture is as follows <p dir="auto"><img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmcAaVc1e5pFkj5FM53FDPUpjXGTWd8BkKPxLWVibfGmn2/graphql1.png" alt="graphql1.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmcAaVc1e5pFkj5FM53FDPUpjXGTWd8BkKPxLWVibfGmn2/graphql1.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmcAaVc1e5pFkj5FM53FDPUpjXGTWd8BkKPxLWVibfGmn2/graphql1.png 2x" /><br /> <br /> <h3>2- Mongoose Model Creation <p dir="auto">Now that we have created the database we can create models that we will use. <p dir="auto">In this section we will create book and author models for the library application using mongoose. We will perform database operations with these models and we will not need the fake data we have created because we will bring the book and author data from the database we created in mLab. <p dir="auto">Let's create a separate folder to create mongoose models. We will create a folder named <code>models under the server folder and create the <code>author.js and <code>book.js files under the models folder. <p dir="auto"><img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmY5DGmMtZQHpiCQwd33BoitERsMf2HXsgNy5Bt8SLUntv/graphql2.png" alt="graphql2.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmY5DGmMtZQHpiCQwd33BoitERsMf2HXsgNy5Bt8SLUntv/graphql2.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmY5DGmMtZQHpiCQwd33BoitERsMf2HXsgNy5Bt8SLUntv/graphql2.png 2x" /> <p dir="auto">We can now create our models. Let's create the book model. <h4>In models>book.js <pre><code> //for mongoose tools const mongoose=require('mongoose'); //for create mongoose schema const Schema=mongoose.Schema; //create schema const bookSchema=new Schema({ name:String, type:String, authorId:String }); //export the schema module.exports=mongoose.model('Book',bookSchema); <p dir="auto"><br /><br /> We should use <code>Schema to create mongoose model with schema, we can set which fields to use in the model. We need the name of the book, the type of book, and the authorId of the book to create a book model, we set them as a string.<br /> After creating schema, we need to export this schema to use it as a model. We can export using the <code>model() function in mongoose. <p dir="auto">Let's do the same in the author and create the author model. <pre><code>//for mongoose tools const mongoose=require('mongoose'); //for create mongoose schema const Schema=mongoose.Schema; //create schema const authorSchema=new Schema({ name:String, age:Number, }); //export the schema module.exports=mongoose.model('Author',authorSchema); <p dir="auto"><br /><br /> So we created models and we don't need fake data because we'll access the data using the model. <p dir="auto">Then let's delete all the fake data we have created. We can no longer access fake data using lodash because we have deleted the fake data. Since we will use a model, delete all lodash functions. <p dir="auto">After performing deletions, let us define the models we created in <code>schema.js file. <pre><code>//models const Book=require('../models/book'); const Author=require('../models/author'); <p dir="auto"><br /> <h3>3- Adding Authors With Mutation <p dir="auto">In this section, we will create <code>mutation and and add authors to the database with mutation. So what is this mutation? <p dir="auto">We use mutation structure in graphql to add, update and delete data. Let's create one mutation and write the code for the adding author process. <h4>In schema.js <pre><code>//Creating a mutation using GraphQLObjectType const Mutation=new GraphQLObjectType({ }); <p dir="auto"><br /><br /> We use <code>GraphQLObjectType to create the mutation. In order for our query to see this type as mutation, we must enter the name we defined in the mutation field when exporting the schema. <pre><code>//we export the schema with root query. module.exports=new GraphQLSchema({ query:RootQuery, mutation:Mutation }); <p dir="auto"><br /><br /> Thus we have created the first mutation. What we need to do now is to define the area we want this mutation to do. <pre><code>//Creating a mutation using GraphQLObjectType const Mutation=new GraphQLObjectType({ name:'Mutation', fields:{ //field required to add author addAuthor:{ //author add operations } } }); <p dir="auto"><br /><br /> In the addAuthor field, we must set the fields that we will make changes using the author type. <pre><code>//field required to add author addAuthor:{ //author add operations type:authorType, args:{ name:{type:GraphQLString}, age:{type:GraphQLInt} }, resolve(parent,args){ //mongoDB codes } } <p dir="auto"><br /><br /> We can access the author's fields using the args field we created. When we create the author object to add to the mongodb field and run the author.save () command, we add the author to the database. <pre><code>resolve(parent,args){ //mongoDB codes let author=new Author({ name:args.name, age:args.age }); return author.save(); } <p dir="auto"><br /><br /> Then let's test the mutation field and add the first author. <p dir="auto">The GraphiQL field now includes the mutation field in the schema <p dir="auto"><img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmYg65ppiDTRBGvpMLFZbZRZh2HSqKm5uxGFcnFnfi2SJc/graphql4.gif" alt="graphql4.gif" /> <p dir="auto">Let's add author using mutation in GraphiQL field. <p dir="auto"><img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmeciea9bRudhjhu98tAJZQuNiGrV9SkZ5HYggdqLKnoyD/graphql5.gif" alt="graphql5.gif" /> <p dir="auto">Now we have added our first author. Let's look at the mLab page.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmd22yx8zBHR1WoAb6feAcbsZUWNyhcwPaCZHQ5kzVG1NP/graphql6.gif" alt="graphql6.gif" /> <h1>Curriculum <p dir="auto"><a href="https://steemit.com/utopian-io/@pckurdu/build-a-library-application-with-graphql-expressjs-react-apollo-and-mongodb-part-1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 1 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-library-application-with-graphql-expressjs-react-apollo-and-mongodb-part-2" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 2 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-library-application-with-graphql-expressjs-react-apollo-and-mongodb-part-3" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 3 <h1>Proof of Work Done <p dir="auto"><span><a href="https://github.com/pckurdu/Build-A-Library-Application-With-Graphql-ExpressJs-React-Apollo-and-MongoDB-Part-4" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/pckurdu/Build-A-Library-Application-With-Graphql-ExpressJs-React-Apollo-and-MongoDB-Part-4