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

<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-2" 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-2 <h1>What Will I Learn? <ul> <li>You will learn the type of GraphQLSchema in graphql <li>You will learn how to create the query in graphql and you will create a root query. <li>You will learn the resolve function in graphql <li>You will learn how to install and use lodash packages. <li>You will learn to use the find () function in lodash. <li>You will learn the type of GraphQLID in graphql. <li>You will learn how to install GraphiQL to test the application <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 continue to create graphql objects. We did not perform the installation of the previous tutorial <code>graphiql, did not have the opportunity to test. In this section, we will test the process of installing graphiql and accessing the data. <p dir="auto">We will learn <code>root query and <code>resolve function creation in graphql so we can basically create the first book data and get the data on the books array. <p dir="auto">In this tutorial we will also examine the type of <code>GraphQLID in graphql. <p dir="auto">Sections of in this tutorial: <ul> <li>Creat Root Query <li>Use Resolve Function <li>Test With GraphiQL <li>Create GraphQLID Type <h3>1- Creat Root Query <p dir="auto">In this section, we will learn how to create root queries for graphql. <p dir="auto">Since grapqhl works on queries, we have to create a root query that contains all the queries. Since the schema has a query, we create a root query, and we define all the other queries in this root query. <p dir="auto">We need to use the <code>GraphQLObjectType type to create a query with graphql and we need to set the <code>name and <code>fields properties in the query. <h4>In schema.js <pre><code>const RootQuery=new GraphQLObjectType({ //query fields }); <p dir="auto"><br /><br /> With the <code>name property, we can specify the name of the query so that when we use the query again we will be able to access it with the name field. We can set the types and properties of these types with the <code>fields field.<br /> Let's create a field definition that we can use the type of books we created earlier. <pre><code>const RootQuery=new GraphQLObjectType({ //query name name:'RootQueryType', //query fields fields:{ //first type for book use bookType book:{ type:bookType, args:{id:{type:GraphQLString}}, resolve(parent,args){ //Data coming from database } } } }); <p dir="auto"><br /><br /> Thus, we created the necessary fields for root query and placed it in our first type. Then we need to create a schema so that the server can use this type and use this root query in the schema. <pre><code>//we export the schema with root query. module.exports=new GraphQLSchema({ query:RootQuery }); <p dir="auto"><br /><br /> We need to use the <code>GraphQLSchema type to export the schema. We must define GraphQLSchema in graphql. <pre><code>//for book type and book fields const {GraphQLObjectType,GraphQLString,GraphQLSchema}=graphql; <p dir="auto"><br /><br /> So the server application can use the schema.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmYatgBzBJgpsVf96t2TWFMSFND3brG1GR2Nowbwztu2DQ/graphql1.gif" alt="graphql1.gif" /><br /> <br /><br /> Although we create a root query, we still get the error. Let's create the solution of this error. <h3>2- Use Resolve Function <p dir="auto">In this section we will create book data to use the book type and we will access this data with the <code>resolve function that we create. <p dir="auto">Let's start by creating fake book data. <p dir="auto">We create an array called books and create the id, name and tour properties of each data in <code>schema.js. <pre><code>//dummy datas var books=[ {name:'Harry Potter',type:'fantastic',id:'1'}, {name:'Lord of the Rings', type:'fantastic',id:'2'}, {name:'Sherlock Holmes', type:'detective',id:'3'}, ]; <p dir="auto"><br /><br /> We will create this data for testing. Since we will use <code>mongoDB, we will keep our original data in mongoDB. When we start using mongoDB, all we have to do is use mongoDB reference instead of this fake data. <p dir="auto">We need to write functions to get and post with these data. Instead of dealing with writing these functions, we will use the functions written in the ready. Which has ready functions for get and post operations, we will do our job with <code>lodash library. <p dir="auto">Let's use <code>yarn to download lodash. <pre><code>yarn add lodash <p dir="auto"><br /><br /> After downloading the `lodash, library, let's import to use it. <h4>In schema.js <pre><code>//for lodash library const _=require('lodash'); <p dir="auto"><br /><br /> We have said that we can access the database with the <code>resolve function. We can use lodash's <code>find () function to bring all the books in resolve function. <pre><code>resolve(parent,args){ //Data coming from database return _.find(books,{id:args.id}); } <p dir="auto"><br /><br /> The <code>find () function takes two parameters. The first parameter is given an array of data to be processed. The second parameter determines which data will be brought to the data. <p dir="auto">We have brought the data according to the id property and we are accessing these ids with <code>args.id. The resolve function takes two parameters and can access the object with the first parameter. It will access to the arguments of the field defined by the second parameter. <p dir="auto"><img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmNS5JC2hteDbXobUNuZQwrZXe1oYmzTYRZrJ7F9g3SvwJ/graphql1.png" alt="graphql1.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmNS5JC2hteDbXobUNuZQwrZXe1oYmzTYRZrJ7F9g3SvwJ/graphql1.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmNS5JC2hteDbXobUNuZQwrZXe1oYmzTYRZrJ7F9g3SvwJ/graphql1.png 2x" /><br /> <br /><br /> Thus we can now access books data. <h3>3- Test With GraphiQL <p dir="auto">In this section we will perform the graphiql installation and get the data according to the book id. <p dir="auto"><img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmQ4cd7ZsiBjb4CPF2LkozBCgfBugy5cJL7TsQo6jTzyTy/graphql2.png" alt="graphql2.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmQ4cd7ZsiBjb4CPF2LkozBCgfBugy5cJL7TsQo6jTzyTy/graphql2.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmQ4cd7ZsiBjb4CPF2LkozBCgfBugy5cJL7TsQo6jTzyTy/graphql2.png 2x" /><br /> <br /><br /> <code>Must provide query string error is an error that occurs because there is no structure to perform graphql operations. With the installation of <code>graphiql we can eliminate this error. <p dir="auto">Within the <code>app.js file, we defined schema within the <code>app.use () function. After this specification, let's do the installation by making the graphiql property <code>true. <h4>In app.js <pre><code>app.use('/graphql',graphqlHTTP({ schema:schema, graphiql:true //graphiql installation })); <p dir="auto"><br /><br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmU6u5RdmFyN6NTjAC5cDn1TuC88ZVawqQhFVfwSdLgJRk/graphql2.gif" alt="graphql2.gif" /><br /> <br /><br /> Let's test book data.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmbwdDvQDFFCBrGz1DedWFXt97zF2KC9ZVcPK1EUNbbqRg/graphql3.gif" alt="graphql3.gif" /><br /> <br /> <h3>4-Create GraphQLID Type <p dir="auto">In this section we will see the operations of creating the type of <code>GraphQLID. <p dir="auto">We defined the id property of the books as string. Therefore we wrote the book id as a string in the testing phase. We doing so can create a number of problems. <p dir="auto">Using the <code>GraphQLID type, we can create the id property with a string or another type so we don't just depend on the type of string. <p dir="auto">We must first define to use the GraphQLID type. <h4>In schema.js <pre><code>//for book type and book fields const {GraphQLObjectType,GraphQLString,GraphQLSchema,GraphQLID}=graphql; <p dir="auto"><br /><br /> Then we will change the types where we set the id. <pre><code>id:{type:GraphQLID}, … args:{id:{type:GraphQLID}}, <p dir="auto"><br /><br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmVKZRPEH9asvwo4jqoqvMEqHULX8e8X6QccxM5CJiVzJT/graphql3.png" alt="graphql3.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmVKZRPEH9asvwo4jqoqvMEqHULX8e8X6QccxM5CJiVzJT/graphql3.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmVKZRPEH9asvwo4jqoqvMEqHULX8e8X6QccxM5CJiVzJT/graphql3.png 2x" /><br /> <br /><br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmNgmWs5gQaXVwABS7Hs82p3bXpwdyPepF6LeS5jkhLfNZ/graphql4.gif" alt="graphql4.gif" /><br /> <br /> <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 <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-2" 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-2