Welcome to Part 8 of the COVIDiary project! If you’re just joining us or missed a post, here’s what we’ve done so far:
- Part 1: Project Introduction
- Part 2: Initial Setup
- Part 3: Building the Database
- Part 4: Frontend Setup
- Part 4.5: Database Fixes
- Part 5: Backend Routing
- Part 6: Formatting Data
- Part 7: A Little More Action
This week, we’re going to shift focus to the front end. By the end of today, we will be able to retrieve data from our API!
Before we write any code, make sure your backend server is running. In CD-api, run rails s to fire it up. Leave that running and open your CD-Client repository in another window.
Write Fetch Requests
We’ll be working solely in /src/App.js today. We will write two separate, but extremely similar, fetch requests. Write your code in the App class but before the render() method.
// test fetch
// the fetch requests will run when the App.js component mounts
componentDidMount() {
// fetch all the public entries
fetch('http://localhost:3000/api/entries')
// take the response and convert it to json
.then(response => response.json())
// take the resulting json and log it to the console
.then(data => {
console.log("All public entries:", data);
})
// if there is an error, log an error message to the console
.catch((error) => {
console.error('Public Entries Error:', error);
});
// fetch the first user's entries
fetch('http://localhost:3000/api/users/1/entries')
.then(response => response.json())
.then(data => {
console.log("single user's entries:", data);
})
.catch((error) => {
console.error('Single User Entries Error:', error);
});
}
We can now test our connection to our backend server! Start your server using yarn start and open it in the browser. Open the browser console so you can see the fetch results!
Coming Up
Eureka! The front and back ends are communicating with one another! Next week, we’ll shift our focus to building out the front end so we can actually see something.