Add book mutation integrated

client/src/components/AddBook/index.js

@@ -1,6 +1,8 @@
-import React from 'react';
-import { gql } from 'apollo-boost';
+import React, { useState } from 'react';
 import { graphql } from 'react-apollo';
+import compose from 'lodash.flowright';
+
+import { getAuthorsQuery, addBookMutation } from '../../queries';
 
 import {
   Field,
@@ -11,40 +13,46 @@ import {
   AddButton
 } from './styledComponents';
 
-const getAuthorsQuery = gql`
-  {
-    authors {
-      id
-      name
-    }
-  }
-`;
-
 function AddBook(props) {
+  const [name, setName] = useState('');
+  const [genre, setGenre] = useState('');
+  const [authorId, setAuthorId] = useState('');
+
   const renderAuthors = () => {
-    if (props.data.loading) {
+    if (props.getAuthorsQuery.loading) {
       return <option>Loading...</option>;
     }
-    return props.data.authors.map(author => (
+    return props.getAuthorsQuery.authors.map(author => (
       <option key={author.id} value={author.id}>
         {author.name}
       </option>
     ));
   };
 
+  const addBook = e => {
+    e.preventDefault();
+    props.addBookMutation({
+      variables: {
+        name,
+        genre,
+        authorId
+      }
+    });
+  };
+
   return (
-    <StyledForm>
+    <StyledForm onSubmit={addBook}>
       <Field>
         <FieldLabel>Name</FieldLabel>
-        <StyledInput type='text' />
+        <StyledInput type='text' onChange={e => setName(e.target.value)} />
       </Field>
       <Field>
         <FieldLabel>Genre</FieldLabel>
-        <StyledInput type='text' />
+        <StyledInput type='text' onChange={e => setGenre(e.target.value)} />
       </Field>
       <Field>
         <FieldLabel>Author</FieldLabel>
-        <StyledDropdown>
+        <StyledDropdown onChange={e => setAuthorId(e.target.value)}>
           <option>Select author</option>
           {renderAuthors()}
         </StyledDropdown>
@@ -54,4 +62,7 @@ function AddBook(props) {
   );
 }
 
-export default graphql(getAuthorsQuery)(AddBook);
+export default compose(
+  graphql(getAuthorsQuery, { name: 'getAuthorsQuery' }),
+  graphql(addBookMutation, { name: 'addBookMutation' })
+)(AddBook);

client/src/components/BookList/index.js

@@ -1,17 +1,9 @@
 import React from 'react';
-import { gql } from 'apollo-boost';
 import { graphql } from 'react-apollo';
 
-import { BookListContainer, StyledBookList } from './styledComponents';
+import { getBooksQuery } from '../../queries';
 
-const getBooksQuery = gql`
-  {
-    books {
-      name
-      id
-    }
-  }
-`;
+import { BookListContainer, StyledBookList } from './styledComponents';
 
 function BookList(props) {
   const renderBooks = () => {

client/src/queries/index.js

@@ -0,0 +1,29 @@
+import { gql } from 'apollo-boost';
+
+export const getBooksQuery = gql`
+  {
+    books {
+      name
+      id
+    }
+  }
+`;
+
+export const getAuthorsQuery = gql`
+  {
+    authors {
+      id
+      name
+    }
+  }
+`;
+
+export const addBookMutation = gql`
+  mutation($name: String!, $genre: String!, $authorId: ID!) {
+    addBook(name: $name, genre: $genre, authorId: $authorId) {
+      name
+      genre
+      id
+    }
+  }
+`;

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "lodash.flowright": "^3.5.0"
+  }
+}

yarn.lock

@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+lodash.flowright@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flowright/-/lodash.flowright-3.5.0.tgz#2b5fff399716d7e7dc5724fe9349f67065184d67"