How to use the @aws-amplify/api.graphql function in @aws-amplify/api

countPosts = async () => {
    try {
      const graphqldata = await API.graphql(graphqlOperation(listPosts))
      this.setState({ 
        posts: graphqldata.data.listPosts.items, postContent: '' 
      })
      // console.log(this.state.posts.length)
    } 
    catch (err) {
      console.log('error: ', err)
    }
  }

async function updateNote(note) {
    const index = state.notes.findIndex(n => n.id === note.id)
    const notes = [...state.notes]
    notes[index].completed = !note.completed 
    dispatch({ type: 'SET_NOTES', notes})
    try {
      await API.graphql(graphqlOperation(UpdateNote, { input: notes[index] }))
      console.log('note successfully updated!')
    } catch (err) {
      console.log('error: ', err)
    }
  }

async function deleteNote({ id }) {
    const index = state.notes.findIndex(n => n.id === id)
    const notes = [...state.notes.slice(0, index), ...state.notes.slice(index + 1)];
    dispatch({ type: 'SET_NOTES', notes })
    try {
      await API.graphql(graphqlOperation(DeleteNote, { input: {id} }))
      console.log('successfully deleted note!') 
      } catch (err) {
        console.log({ err })
    }
  }

deleteLikePicture = async (likeUserObject) => {
    const likeId = await likeUserObject[0]['id']
    try {
      await API.graphql(graphqlOperation(DeleteLikePicture, { id: likeId }))
      await this.componentDidMount()
    } catch (err) {
      console.log('Error deleting like.', err)
    }
  }

query && API.getGraphqlOperationType(query) === 'query';
		const hasValidMutation =
			mutation && API.getGraphqlOperationType(mutation) === 'mutation';
		const hasValidSubscription =
			subscription &&
			API.getGraphqlOperationType(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;
			};
		}

}

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

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

		if (hasValidSubscription) {
			const { query: subsQuery, variables: subsVars } = subscription;

			try {
				const observable = API.graphql({
					query: subsQuery,
					variables: subsVars,
				});

				this.subSubscription = observable.subscribe({
					next: ({ value: { data } }) => {
						const { data: prevData } = this.state;
						const newData = onSubscriptionMsg(prevData, data);
						if (this.mounted) {
							this.setState({ data: newData });
						}
					},
					error: err => console.error(err),
				});
			} catch (err) {
				errors = err.errors;

useEffect(() => {
    fetchNotes()
    const subscription = API.graphql(graphqlOperation(onCreateNote))
      .subscribe({
        next: noteData => {
          const note = noteData.value.data.onCreateNote
          if (CLIENT_ID === note.clientId) return
          dispatch({ type: 'ADD_NOTE', note })
        }
      })
      return () => subscription.unsubscribe()
  }, [])

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

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