How to use the aws-amplify.API.graphql function in aws-amplify

pageHtml = getPageHtml(newComponents)

        const slug = slugify(pageTitle)
        const input = {
          name: pageTitle,
          slug,
          content: pageHtml,
          components: JSON.stringify(newComponents),
          published: publishingState === 'publish' ? true : false
        }
        if (pageId) {
          operation = updatePage
          input['id'] = pageId
        }

        const newPageData = await API.graphql(graphqlOperation(operation, { input }))
        const { createPage } = newPageData.data

        baseComponents = JSON.parse(baseComponents)

        // worst hack ever. couldn't figure another way, so for now doing this:
        // stringifying state, then parsing and updating because state was being mutated somehow.
        baseComponents = baseComponents.map((c, i) => {
          c.component = newComponents[i].component
          if (c.type === 'image') {
            c.content = {
              ...c.content,
              src: newComponents[i].content.src
            }
          } else {
            c.content = newComponents[i].content
          }

async function createTalk(talk, toggle, CLIENT_ID, navigate) {
  if (talk.title === '' || talk.speakerName === '') {
    return
  }
  const ID = uuid()
  toggle()
  let talkWithId = {
    ...talk,
    id: ID,
    clientId: CLIENT_ID
  }
  navigate(`/talk/${ID}/${talk.title}`)
  
  try {
    await API.graphql(graphqlOperation(CreateTalk, { input: talkWithId }))
    console.log('talk successfully created!')
    let talks = window.localStorage.getItem(KEY)
    talks = [...JSON.parse(talks), talkWithId]
    setToStorage(talks)
  } catch (err) {
    console.log('error creating talk...', err)
  }
}

createNote = async note => {
    const notes = [note, ...this.state.notes]
    const newNotes = this.state.notes
    this.setState({ notes })
    try {
      const data = await API.graphql(graphqlOperation(createNote, { input: note }))
      this.setState({ notes: [data.data.createNote, ...newNotes] })
    } catch (err) {
      console.log('error creating note..', err)
    }
  }
  updateNote = async note => {

async function deleteComment(comment, dispatch) {
  dispatch({
    type: 'delete', comment
  })
  let commentsFromStorage = window.localStorage.getItem(`${KEY}${comment.talkId}`)
  commentsFromStorage = JSON.parse(commentsFromStorage)
  var index = commentsFromStorage.findIndex(c => c.id === comment.id)
  const comments = [...commentsFromStorage]
  comments.splice(index, 1)
  setToStorage(comment.talkId, comments)
  try {
    await API.graphql(graphqlOperation(DeleteComment, { input: {
      id: comment.id
    } }))
    console.log('deleted comment')
  } catch (err) {
    console.log('error deleting comment: ', err)
  }
}

async function blockDevice(id) {
    try {
      await API.graphql(graphqlOperation(createBannedId, { id }))
      alert('Device successfully blocked')
    } catch (err) {
      console.log('error blocking device: ', err)
    }
  }

async function createDrumMachine(machine, setSteps) {
  try {
    await API.graphql(graphqlOperation(CreateDrumMachine, { input: machine }))
    console.log('successfully created drum machine!')
  } catch (err) {
    console.log('error creating drum machine...: ', err)
    const { errors } = err
    const beats = errors[0].data.beats
    setSteps(JSON.parse(beats))
  }
}

async createUser() {
    try {
      await API.graphql(graphqlOperation(createUser, { username: this.username }))
    } catch (err) {
      console.log('Error creating user! :', err)
    }
  }
}

export default async function deletePicture(section, fileName, item) {
    //Delete from S3 stoarge
    var objectPath = `${section}/${fileName}`
    let unPublishedItem = await new removeFromStorage(objectPath);
    switch(unPublishedItem) {
        case 'Success':
            console.log(`Succesfully removed ${fileName} from ${section}`);
            //Delete from DB
            const deleteInput = { id: item }
            var removeFromDB = await API.graphql(graphqlOperation(DeletePicture, deleteInput))
            .then (result => {
                console.log(`Successfully deleted the item ${result.data.deletePicture.title} from the Pictures table. reference:`, result.data.deletePicture.id)
                return 'Success'
            })
            .catch(err => {
                console.log('error: ', err)
                return 'err'
            });
            switch(removeFromDB) {
                case 'Success':
                    //Create Index
                    let addIndex = await new createGallery();
					switch(addIndex) {
                        case 'Success':
                            //Copy the new index
                            const galleryVars = {

const hasValidQuery = query && getOperationType(query) === 'query';
		const hasValidMutation =
			mutation && getOperationType(mutation) === 'mutation';
		const hasValidSubscription =
			subscription && getOperationType(subscription.query) === 'subscription';

		if (!hasValidQuery && !hasValidMutation && !hasValidSubscription) {
			console.warn('No query, mutation or subscription was specified');
		}

		if (hasValidQuery) {
			try {
				data = null;

				const response = await API.graphql({ query, variables });

				data = response.data;
			} catch (err) {
				data = err.data;
				errors = err.errors;
			}
		}

		if (hasValidMutation) {
			mutationProp = async variables => {
				const result = await API.graphql({ query: mutation, variables });

				this.forceUpdate();
				return result;
			};
		}

async function fetchComments(talkId, dispatch) {
  try {
    getFromStorage(talkId, dispatch)
    const commentData = await API.graphql(graphqlOperation(listCommentsForTalk, { talkId }))
    const comments = commentData.data.listCommentsForTalk.items
    setToStorage(talkId, comments)
    dispatch({ type: 'set', comments })
  } catch (error) {
    console.log('error:', error)
    dispatch({ type: 'error', error })
  }
}