fetch-update.md

Cat Tinder Fetch for Update Functionality

Overview

It is time to update a cat in our database! We will have two applications running on our machine at the same time. The Rails app will run on localhost:3000 and the React app will run on localhost:3001.

Learning Objectives

• can make cross-origin requests from the UI to an API
• can set state with the JSON data that is returned from our fetch request

Process

• The Rails app will run on localhost:3000
• The React app will run on localhost:3001

---

Editing Cats

The frontend is going to send the Rails API information, then Rails will use Active Record to patch information in the database.

We already have a function that logs the form data for our updated cat, so we can convert that function into a patch request.

The fetch request will be made to the URL that is running the Rails API. In this case, our Rails app is running on localhost:3000. We are making a request to the update route of our Rails app. Remembering our RESTful routes, we know that we need to make a PATCH request to a route called "/cats/:id" to update an existing cat.

Since our fetch needs to send data from the frontend to the backend we need to format our request. We need to send the information in the body of the request, and specify the header to accept JSON, and specify our HTTP method.

Our fetch call will return a Promise. If the Promise is resolved successfully we can call the readCat function to reload the cats array that will include the updated cat.

/src/App.js

const updateCat = (cat, id) => {
  fetch(`http://localhost:3000/cats/${id}`, {
    // converting an object to a string
    body: JSON.stringify(cat),
    // specify the info being sent in JSON and the info returning should be JSON
    headers: {
      "Content-Type": "application/json"
    },
    // HTTP verb so the correct endpoint is invoked on the server
    method: "PATCH"
  })
    .then((response) => response.json())
    .then(() => readCat())
    .catch((errors) => console.log("Cat update errors:", errors))
}

As long as we have set up the frontend scaffolding correctly, the cat update method should be working. But now we will see the information for the updated cat.

---

Back to Syllabus