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

<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-3" 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-3 <h1>What Will I Learn? <ul> <li>You will learn the type of GraphQLList in graphql <li>You will learn the type of GraphQLInt in graphql <li>You will learn the type of _.filter() in lodash <li>You will learn how to associate data with graphql <li>You will learn the parameters of the resolve() function <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 develop a library application with graphql and I'm here with 3rd part to develop the application. <p dir="auto">In this tutorial we will create the authors of the books and establish a relationship between the authors and the books. We will examine the <code>GraphQLList property to access lists that will result from this relationship, and the <code>GraphQLInt property to access the authors' ages. <p dir="auto">We used the resolve () function to access the data with Graphql. In this tutorial we will examine the parent and args parameters that we use in the resolve () function. <p dir="auto">We will use the <code>_.filter () function to access the fake data we generate through graphql types. <p dir="auto">I've divided it into sections for a better understanding of the tutorial. <ul> <li>Create Author Type <li>Relationship Between Types <li>Graphql List <li>List Authors And Books <p dir="auto">Let’s start. <h3>1- Create Author Type <p dir="auto">In this section we will create author types for the authors of the books for the library application. <p dir="auto">When creating author types, we will create an array and store the author's <code>name, <code>age and <code>id information in this array. In the future we will associate the books with the authors, but for now, let's just create the authors and create author types to use graphql. <p dir="auto">Let's first create an array called authors. <h4>In scheme.js <pre><code>//dummy authors datas var authors=[ {name:'pc kurdu 1',age:25,id:'1'}, {name:'pc kurdu 2',age:67,id:'2'}, {name:'pc kurdu 3',age:36,id:'3'} ]; <p dir="auto"><br /><br /> Here we have created an array of authors like create an array of books but there is one difference. We have not defined the age property of each object in the authors array as a string because the age property can only be a numeric value.<br /> We can create the author type by looking at this author array but we must define the GraphQLInt module to define the age property that was previously integer as <code>GraphQLInt. <pre><code>const {…,GraphQLInt}=graphql; <p dir="auto"><br /><br /> So let's create the author type. <h4>In scheme.js <pre><code>//create a author type const authorType=new GraphQLObjectType({ name:'Author', fields:()=>({ id:{type:GraphQLID}, name:{type:GraphQLString}, age:{type:GraphQLInt} }) }); <p dir="auto"><br /><br /> we can now define them in graphql to access these authors query. We need to do in <code>RootQuery in the fields to create a query and write the necessary code for the query. <h4>In scheme.js <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:GraphQLID}}, resolve(parent,args){ //Data coming from database return _.find(books,{id:args.id}); } }, //first type for author use authorType author:{ type:authorType, args:{id:{type:GraphQLID}}, resolve(parent,args){ //Data coming from database return _.find(authors,{id:args.id}); } } } }); <p dir="auto"><br /><br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmSsMcZQDNH1khEHfZX69SkSxRj3Au9i6jgYM31zEEofGx/graphql1.gif" alt="graphql1.gif" /><br /> <br /><br /> Using the <code>_.find () method in the resolve function we can call a known author id with <code>graphiQL. Below is a visual showing how to call.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmYVMGSz3tYe1Vb4YgCpHemixxnFWNQLyWgwXFPAn5YdUT/graphql2.gif" alt="graphql2.gif" /><br /> <br /> <h3>2- Relationship Between Types <p dir="auto">If we want to keep the data, we need to pay attention to the relationships between the data. We must establish good relationships between them to access the data. Otherwise, we may have trouble accessing data. <p dir="auto">We keep books and author information in this library example. We must keep the author of each book in a series of books because each book has one author but one author can write more than one book. <p dir="auto">Then let's edit the array of books. <pre><code>//dummy datas var books=[ {name:'Harry Potter',type:'fantastic',id:'1',authorId:'1'}, {name:'Lord of the Rings',type:'fantastic',id:'2',authorId:'2'}, {name:'Sherlock Holmes',type:'detective',id:'3',authorId:'3'}, {name:'Harry Potter 2',type:'fantastic',id:'4',authorId:'1'}, {name:'Lord of the Rings 2',type:'fantastic',id:'5',authorId:'2'}, {name:'Sherlock Holmes 2',type:'detective',id:'6',authorId:'3'}, ]; <p dir="auto"><br /><br /> We can now establish a relationship between books and authors. We have already created a type called <code>bookType, which is referenced by books. Let's create a field named <code>author to get authors here. <pre><code>//create a book type const bookType=new GraphQLObjectType({ name:'Book', fields:()=>({ id:{type:GraphQLID}, name:{type:GraphQLString}, type:{type:GraphQLString}, //Let's associate with the author. author:{ type:authorType, resolve(parent,args){ return _.find(authors,{id:parent.authorId}) } } }) }); <p dir="auto"><br /><br /> We can access author information using <code>bookType.With the <code>parent property populated in the <code>resolve () method, we can access all the author's information associated with the book.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmWmA6edFn5unuNRnzpm6TaPem43NAy86XNZyFA1eJSZZa/graphql3.gif" alt="graphql3.gif" /><br /> <br /> <h3>3- Graphql List <p dir="auto">We are now ready to list all the authors' boks. We will use <code>GrapQLList to perform this operation so we can list the books. We will also use the <code>_.filter () function in this section. <p dir="auto">Then let's start by defining the GraphQLList type. <h4>In schema.js <pre><code>//for book type and book fields const {…,GraphQLList}=graphql; <p dir="auto"><br /><br /> We have created an object named authorType to access the authors, and we have defined the data we will access for fields. Since we want to access all of the authors' books, let's add a field called books. <pre><code>//create a author type const authorType=new GraphQLObjectType({ name:'Author', fields:()=>({ id:{type:GraphQLID}, name:{type:GraphQLString}, age:{type:GraphQLInt}, //all author books books:{} }) }); <p dir="auto"><br /><br /> Since we will list books in this field, we must create a <code>GraphQLList type bookType and use the <code>_.filter () function.<br /> The <code>_.filter () function can return the matching data to us based on a specific criterion. Here we need to access the books array and list them according to the <code>authorId criteria. <pre><code>//all author books books:{ type:new GraphQLList(bookType), resolve(parent,args){ return _.filter(books,{authorId:parent.id}); } } <p dir="auto"><br /><br /> Now we can list all the books of a particular author.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmbCWT817PawwSHNvBpytcHBeVv9o3DQKJvSGgZZxWqrbr/graphql4.gif" alt="graphql4.gif" /><br /> <br /><br /> and<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmUNuLGq76fpX2C1wyhCMF7i5M6i5JeNYqXwZQvKXhhUBi/graphql5.gif" alt="graphql5.gif" /><br /> <br /> <h3>4- List Authors And Books <p dir="auto"><code>RootQuery was our basic query and we used it to access the book and author. We defined the book and author in the field property. If we want to access the list of authors and books, we must define it here. <h4>In schema.js <pre><code>//for book list books:{ type:new GraphQLList(bookType), resolve(parent,args){ return books } }, //for author list authors:{ type:new GraphQLList(authorType), resolve(parent,args){ return authors } } <p dir="auto"><br /><br /> So we can now access the list of books and the list of authors. <p dir="auto">Let's test the process of invoking a list of books. <p dir="auto"><img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmYLBnFr1AQKthKsk28Q26E8uZNrRMNbi1LHu4tE4eQ8CR/graphql6.gif" alt="graphql6.gif" /><br /> <br /> <p dir="auto">Let's test the process of invoking a list of authors.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmWANzjxFuwCWdgJArCsaVFsCgtpY6zRMsrTMShALzkLeE/graphql7.gif" alt="graphql7.gif" /><br /> <br /><br /> See you at the next tutorials. <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 <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-3" 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-3