api_App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { withAuthenticator } from 'aws-amplify-react'
import { API, graphqlOperation } from 'aws-amplify' // dodajemy komunikację z API na froncie

// Pytamy API o listę wszystkich notatek
const ListNotes = ` 
  query { 
    listNotes {
      items { 
        id title description importance 
      }
    }
  }
`

class App extends Component {
  state = { notes: [] }  // listę notatek trzymamy w stanie komponentu

  async componentDidMount () {
    const noteDate = await API.graphql(graphqlOperation(ListNotes)) // pobieramy notatki
    this.setState({ notes: noteData.data.listNotes.items })  // i zapisujemy do stanu
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        {
          this.state.notes.map((note, i)) => (  // wyświetlamy wszystkie notatki
            <div>
              <h3>{note.title}</h3>
              <p>{note.description}</p>
              <p>{note.importance}</p>
            </div>
          ))
        }
      </div>
    );
  }
}

export default withAuthenticator(App, { includeGreetings: true});