Apollo Does not want to read a variable

[AmoDinho]

I have a mutation that has an image variable that is not reading the value from state. I'm sending an image to AWS' s3 and then getting the url of the image and trying to set it to state. The variable is set in then state with the URL from S3 but Apollo is not reading it.

All the other variables are being read though.

Here is my code:

import React, { useState } from 'react'
import styled from 'styled-components'
import { Storage } from 'aws-amplify'
import { useMutation, Mutation } from '@apollo/react-hooks';
import { Alert, Textarea, HeadingOne, HeadingTwo, HeadingFive, Input, LinkButton, BodyText, DarkPinkButton, HeadingFour } from 'umqombothi-component-library'
import SuccessImage from './fogg-success-1.svg'
import { addBookMutation } from '../graphql/Mutations'
import { s3Upload } from '../lib/awsLib'

const AddBook = () => {
    const [posted, setPosted] = useState(false)
    const [title, setTitle] = useState("")
    const [description, setDescription] = useState("")
    const [author, setAuthor] = useState("")
    const [grade, setGrade] = useState("")
    const [price, setPrice] = useState("")
    const [edition, setEdition] = useState("")
    const [image, setImage] = useState("")
    const [location, setLocation] = useState("")
    const [ISBN, setISBN] = useState("")
    const [degree, setDegree] = useState("")
    const [course, setCourse] = useState("")
    const [univeristy, setUniveristy] = useState("")
    const [addBook] = useMutation(addBookMutation)
    const FormGrid = styled.div`
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
    grid-gap: 30px;
    `

    //File upload state
    let [file, setFile] = useState(null)

    const handleFileChange = async event => {
        file = event.target.files[0]

        try {

            window.LOG_LEVEL = 'DEBUG';
            const attachment = file ? await s3Upload(file) : nul
            const s3URI = await Storage.get(`${attachment}`, { level: 'public' })
            setImage(`${s3URI}`)

        } catch (e) {
            alert(e)
        }

    }

    const renderPostBook = () => {

        return (
            <>
                <div
                    className="flex mt-5 justify-center">
                    {error &&
                        <Alert
                            message={error.message}
                            error />
                    }
                </div>
                <div className="flex justify-center mb-20">
                    <form
                        onSubmit={e => {
                            e.preventDefault()
                            addBook({
                                variables: {
                                    input: {
                                        price: price,
                                        description: description,
                                        image: image,
                                        edition: edition,
                                        title: title,
                                        author: author,
                                        ISBN: ISBN,
                                        grade: grade,
                                        location: location,
                                        univeristy: univeristy,
                                        course: course,
                                        degree: degree,
                                    }
                                }
                            })
                            setPosted(true)

                        }}
                        className=" xl:h-500  mt-10"
                    >
                        <HeadingOne
                            className="text-center s:text-left s:ml-5"
                            text="Lets sell your book"
                        />

                        <hr
                            className="border-greyDark"
                        />
                        {/* Start of top form container */}
                        <FormGrid
                            className="s:ml-10 mb-5"
                        >
                            <HeadingFive
                                text="Starter Info"
                                className="text-left"
                            />
                            <div>
                                {/* Grade*/}
                                <div>
                                    <BodyText
                                        text="Grade"
                                    />
                                    <Input
                                        type="text"
                                        required
                                        value={grade}
                                        onChange={e => setGrade(e.target.value)}
                                        placeholder="A"
                                    />

                                </div>
                                {/* Price*/}
                                <div>
                                    <BodyText
                                        text="Price"
                                    />
                                    <Input
                                        type="text"
                                        required
                                        value={price}
                                        onChange={e => setPrice(e.target.value)}
                                        placeholder="R4566"
                                    />

                                </div>
                                {/* Location*/}
                                <div>
                                    <BodyText
                                        text="Where is your book? "
                                    />
                                    <Input
                                        type="text"
                                        required
                                        value={location}
                                        onChange={e => setLocation(e.target.value)}
                                        placeholder="Cape Town"
                                    />

                                </div>
                                {/* Description*/}
                                <div>
                                    <BodyText
                                        text="Describe your book"
                                    />
                                    <Textarea
                                        type="text"
                                        required
                                        value={description}
                                        onChange={e => setDescription(e.target.value)}
                                        placeholder="Used it for subject made me fail"
                                    />

                                </div>
                            </div>
                        </FormGrid>

                        {/* End of top form container */}
                        <hr
                            className="border-greyDark"
                        />
                        {/* start of bottom form container */}
                        <FormGrid
                            className="s:ml-10"
                        >
                            <HeadingFive
                                text="Book Info"
                            />
                            {/* start of account form elements */}
                            <div>
                                {/* Title*/}
                                <div>
                                    <BodyText
                                        text="Title "
                                    />
                                    <Input
                                        type="text"
                                        required
                                        value={title}
                                        onChange={e => setTitle(e.target.value)}
                                        placeholder="How On Earth?"
                                    />

                                </div>

                                {/* Author */}
                                <div>
                                    <BodyText
                                        text="Author "
                                    />
                                    <Input
                                        type="text"
                                        required
                                        value={author}
                                        onChange={e => setAuthor(e.target.value)}
                                        placeholder="Terence McCathy"
                                    />

                                </div>

                                {/* ISBN*/}
                                <div>
                                    <BodyText
                                        text="ISBN"
                                    />
                                    <Input
                                        type="text"
                                        required
                                        value={ISBN}
                                        onChange={e => setISBN(e.target.value)}
                                        placeholder="978177074859"
                                    />

                                </div>

                                {/* Edition */}
                                <div>
                                    <BodyText
                                        text="Edition"
                                    />
                                    <Input
                                        type="text"
                                        required
                                        value={edition}
                                        onChange={e => setEdition(e.target.value)}
                                        placeholder="4th"
                                    />

                                </div>

                                {/* Picture URL */}
                                <div>
                                    <BodyText
                                        text="URL"
                                    />
                                    <Input
                                        type="file"

                                        value={image}
                                        onChange={handleFileChange}
                                        placeholder="IMAGE"
                                    />

                                </div>

                                {/* end  of book form elements */}
                            </div>
                        </FormGrid>
                        {/* end of bottom form container */}

                        {/* End of top form container */}
                        <hr
                            className="border-greyDark"
                        />
                        {/* start of bottom form container */}
                        <FormGrid
                            className="s:ml-10"
                        >
                            <HeadingFive
                                text="Academic Info"
                            />
                            {/* start of Academic form elements */}
                            <div>
                                {/* univeristy*/}
                                <div>
                                    <BodyText
                                        text="Select univeristy "
                                    />
                                    <Input
                                        type="text"
                                        required
                                        value={univeristy}
                                        onChange={e => setUniveristy(e.target.value)}
                                        placeholder="UCT"
                                    />

                                </div>

                                {/* cOURSE */}
                                <div>
                                    <BodyText
                                        text="Course "
                                    />
                                    <Input
                                        type="text"
                                        required
                                        value={course}
                                        onChange={e => setCourse(e.target.value)}
                                        placeholder="CTV 109"
                                    />

                                </div>

                                {/* dEGREE*/}
                                <div>
                                    <BodyText
                                        text="Degree"
                                    />
                                    <Input
                                        type="text"
                                        required
                                        value={degree}
                                        onChange={e => setDegree(e.target.value)}
                                        placeholder="BSC Chem"
                                    />

                                </div>

                                {/* Buttons*/}
                                <div className="flex flex-col w-48 mt-3">
                                    <DarkPinkButton
                                        type="submit"
                                        text="Create account"
                                    />

                                </div>

                                {/* end  of accademic form elements */}
                            </div>
                        </FormGrid>
                        {/* end of bottom form container */}
                    </form>

                </div>

            </>
        )
    }

    return (
        <>
            {renderPostBook() }
        </>
    )
}

export default AddBook

[AmoDinho]

[
  {
    "name": "State",
    "value": true,
    "subHooks": []
  },
  {
    "name": "State",
    "value": "A Raisin in the Sun",
    "subHooks": []
  },
  {
    "name": "State",
    "value": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,",
    "subHooks": []
  },
  {
    "name": "State",
    "value": " Hansberry, L",
    "subHooks": []
  },
  {
    "name": "State",
    "value": "A",
    "subHooks": []
  },
  {
    "name": "State",
    "value": "342",
    "subHooks": []
  },
  {
    "name": "State",
    "value": "3",
    "subHooks": []
  },
  {
    "name": "State",
    "value": "https://pmb-plus-backend-dev-attachmentsbucket-jd0uqhf65247.s3.amazonaws.com/public/1570791280609-download%20%286%29.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIARMGU3NNVGHD4R4M4%2F20191011%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20191011T105444Z&X-Amz-Expires=900&X-Amz-Security-Token=AgoJb3JpZ2luX2VjEOv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJGMEQCIFpL621jla%2FXOqqgCLTdZwIXkz%2BBvTdLNNLStqCG8KOEAiBH8LmFknD3ALDLNE6x2c9OTgm37LLQLHwzVbugNVB5eyqvBQjU%2F%2F%2F%2F%2F%2F%2F%2F%2...",
    "subHooks": []
  },
  {
    "name": "State",
    "value": "Queenstown",
    "subHooks": []
  },
  {
    "name": "State",
    "value": "9780679755333",
    "subHooks": []
  },
  {
    "name": "State",
    "value": "BCOM:Supply Chain",
    "subHooks": []
  },
  {
    "name": "State",
    "value": "RUY093",
    "subHooks": []
  },
  {
    "name": "State",
    "value": "NMU",
    "subHooks": []
  },
  {
    "name": "Mutation",
    "subHooks": [
      {
        "name": "Context",
        "value": {
          "client": "Object"
        },
        "subHooks": []
      },
      {
        "name": "State",
        "value": {
          "called": true,
          "loading": false,
          "data": {
            "addBook": {
              "price": "342",
              "description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,",
              "image": "",
              "edition": "3",
              "title": "A Raisin in the Sun",
              "author": " Hansberry, L",
              "ISBN": "9780679755333",
              "grade": "A",
              "location": "Queenstown",
              "univeristy": "NMU",
              "course": "RUY093",
              "degree": "BCOM:Supply Chain",
              "__typename": "Book"
            }
          },
          "client": "Object"
        },
        "subHooks": []
      },