04-fetch

Step 4 - Fetching from server

The goal of this step is to move away from the hard-coded EMAILS const to fetching "real" data from the server using the Fetch API and ES6 Promises. We'll retrieve the data in the App components lifecyle methods and store in its state.

As always, if you run into trouble with the tasks or exercises, you can take a peek at the final source code.

Restart Setup

If you didn't successfully complete the previous step, you can jump right in by copying the step and installing the dependencies.

Ensure you're in the root folder of the repo:

cd react-workshop

Remove the existing workshop directory if you had previously started elsewhere:

rm -rf workshop

Copy the previous step as a starting point:

cp -r 03-lists workshop

Change into the workshop directory:

cd workshop

Install all of the dependencies (yarn is preferred):

# Yarn
yarn

# ...or NPM
npm install

Start the app:

# Yarn
yarn start

# ...or NPM
npm start

After the app is initially built, a new browser window should open up at http://localhost:3000/, and you should be able to continue on with the tasks below.

API Setup

If you successfully completed the previous step, you just need to start the API server. In a separate terminal window/tab, making sure you're still in the workshop directory, start API server (running at http://localhost:9090/):

# Yarn
yarn run start:api

# NPM
npm run start:api

Verify that you receive a JSON response from http://localhost:9090/emails.

Tasks

In the App component add the componentDidMount() lifecycle method and make a GET fetch request to http://localhost:9090/emails:

export default class App extends PureComponent {
  componentDidMount() {
    // Retrieve emails from server once we know DOM exists
    fetch('//localhost:9090/emails');
  }

  render() {
    return (
      <main className="app">
        <EmailList emails={EMAILS} />
        <EmailView />
        <EmailForm />
      </main>
    );
  }
}

Store the result of the fetch call in the App component's state, use it in render() instead of the EMAILS const, and remove the EMAILS const altogether:

export default class App extends PureComponent {
  state = {
    // Initialize emails state to an empty array.
    // Will get populated with data in `componentDidMount`
    emails: []
  }

  componentDidMount() {
    // Retrieve emails from server once we know DOM exists
    fetch('//localhost:9090/emails')
      .then(res => res.json())
      // update the state with the emails fetched from the server
      .then(emails => this.setState({emails}))
      .catch(ex => console.error(ex));
  }

  render() {
    let {emails} = this.state;

    return (
      <main className="app">
        <EmailList emails={emails} />
        <EmailView />
        <EmailForm />
      </main>
    );
  }
}

You should now see a list of 50 emails instead of the original 3. Our app is slowly coming to life.

Exercises

• Add long polling by adding call to setInterval in componentDidMount() & clearInterval in componentWillUnmount()
• Add pollInterval prop to App (with the appropriate prop type defined) that defaults to 2000 (using defaultProps), but index.js overrides passing in 5000 to <App />
• Try modifying or deleting entries from data/emails.json and watch the EmailList update appropriately

Next

Go to Step 5 - Email View.

Resources

• State and Lifecycle
• setState() documentation
• Fetch API & Github's fetch polyfill
• Learning ES6: Promises
• Lifecycle Methods
• Postman

Questions

Got questions? Need further clarification? Feel free to post a question in Ben Ilegbodu's AMA!