1. 21
    Save Data to the Server with fetch in React
    2m 30s

Save Data to the Server with fetch in React

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet

We’ll cover posting new data to the server using fetch and the POST http method. We’ll also update the UI with a success message once the save has completed successfully.

Maria
Maria
~ 4 years ago

Hi Andrew,

When I added .then(() => console.log('todo added')) to createTodo(newTodo) in App.js, this is what I got in the browser console:

localhost/:1 Uncaught (in promise) TypeError: Failed to fetch

And this is what I got in the iTerm2 console when I ran npm test:

(node:40332) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Network request failed (node:40332) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I was able to add a new todo, but it did not persist since my network request failed.

And BTW, I am on node 7.9.0.

Oh and also, when I ran npm test, no error showed up in the actual code. Only the deprecation warning error:

Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 0.886s, estimated 1s

What's interesting tho, before adding fetch, all the tests passed and showed up in the iTerm console as passing. Now only one test passes. But no errors are showing up.

Maria
Maria
~ 4 years ago

And this is my code on Github: https://github.com/interglobalmedia/todo-list-create-react-app

Andy Van Slaars
Andy Van Slaarsinstructor
~ 4 years ago

Maria,

Are you running the json-server? It was covered in one of the videos, but the readme on the course repo has some instructions for setting it up.

This project relies on a local mocked server since building a true API layer with data persistence would have been far too out of scope and would have likely tripled the length of the course.

What you're seeing with the tests is likely related to the way Jest caches tests. It will try to run tests only where code has changed. When Jest is in watch mode, you can hit a on your keyboard in the terminal to get it to run all of the tests. The code with the fetch calls wasn't included in the tests, so it shouldn't be a factor there.

Hope this helps, and if you run into issues after setting up the server and getting a full test run, let me know and I'll try to help.

Maria
Maria
~ 4 years ago

Thanks Andrew! It didn't work initially when I tried to use both npm start in one window and json-server in the other, but now I am using 7.10.0 and it worked when I tried it again. Not saying one had to do with the other, but it has been rectified. Thanks!

Kirk Burleson
Kirk Burleson
~ 4 years ago
Kirk Burleson
Kirk Burleson
~ 4 years ago
Ali Emir
Ali Emir
~ 3 years ago

I have trouble posting new todo to db. It just saves the id and name and isComplete not saved. After refreshing the page, I see blank todos.