title: Geting "Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource", but only after first successful fetch request
body: <p>I am currently working on a note taking app for a class project. I didn't write any of the original front end code, as it was provided to us, though have made a number of edits to it in order to work with the routes I wrote.</p>
  <p>On page load, I am able to GET the notes (which are stored in a db.json file on the server) and display them on the page. When I add a new note, which POSTs the new note to the &quot;db&quot; and then GETs the notes from the newly updated db.json, it works fine but ONLY on the first note add. Every subsequent note add results in a <code>Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.</code></p>
  <p>The POST request comes back 200, but the GET request doesn't seem to be coming back at all. However, if I reload the page the GET request works, and the change from the previous note add is reflected.</p>
  <p>The same problem occurs with deleting notes, however the error occurs on the first delete attempt (whereas the add note function works on the first try, but not on subsequent tries.).</p>
  <p>my GET, POST, and DELETE requests:</p>
  <pre><code>app.get('/api/notes', (req, res) =&gt; {
      res.status(200).json({ message: 'success' })
  
  })
  
  app.post('/api/notes', (req, res) =&gt; {
      notes.push(req.body);
  
      updateNotes(notes);
  
      res.status(200).json({ message: 'success' })
  })
  
  app.delete('/api/notes/:id', (req, res) =&gt; {
      const idx = parseInt(req.params.id) -1;
      // ids start at 1 instead of 0
      notes.splice(idx, 1)
  
      updateNotes(notes);
  
      res.status(200).json({ message: 'success' })
  })
  </code></pre>
  <p>my updateNotes module:</p>
  <pre><code>function updateNotes(notes) {
      return fs.writeFile('./db/db.json', JSON.stringify(notes, null, 2), (err) =&gt; {
          if (err) {
              return err;
          } 
      })
  }
  </code></pre>
  <p>my fetch requests that run in browser:</p>
  <pre><code>function getNotes() {
    return fetch('/api/notes', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    });
  }
  
  function saveNote(note) {
    delete note.id
  
    return fetch('/api/notes', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(note)
    });
  }
  
  function deleteNote(id) {
    return fetch(`/api/notes/${id}`, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json'
      }
    });
  }
  </code></pre>
  <p>and the function that's called when user adds or deletes notes:</p>
  <pre><code>const getAndRenderNotes = () =&gt; getNotes().then(renderNoteList);
  </code></pre>
  <p>lastly, renderNoteList:</p>
  <pre><code>const renderNoteList = async notes =&gt; {
    noteIdCounter = 1;
    let jsonNotes = await notes.json();
    if (window.location.pathname === '/notes') {
      noteList.forEach(el =&gt; (el.innerHTML = ''));
    }
  
    let noteListItems = [];
  
    // Returns HTML element with or without a delete button
    const createLi = (text, delBtn = true) =&gt; {
      const liEl = document.createElement('li');
      liEl.classList.add('list-group-item');
  
      const spanEl = document.createElement('span');
      spanEl.classList.add('list-item-title');
      spanEl.innerText = text;
      spanEl.addEventListener('click', handleNoteView);
  
      liEl.append(spanEl);
  
      if (delBtn) {
        const delBtnEl = document.createElement('i');
        delBtnEl.classList.add(
          'fas',
          'fa-trash-alt',
          'float-right',
          'text-danger',
          'delete-note'
        );
        delBtnEl.addEventListener('click', handleNoteDelete);
  
        liEl.append(delBtnEl);
      }
  
      return liEl;
    };
  
    if (jsonNotes.length === 0) {
      noteListItems.push(createLi('No saved Notes', false));
    }
  
    jsonNotes.forEach(note =&gt; {
      //add in logic for id
      note.id = noteIdCounter;
      noteIdCounter++;
      const li = createLi(note.title);
      li.dataset.note = JSON.stringify(note);
  
      noteListItems.push(li);
    });
  
    if (window.location.pathname === '/notes') {
      noteListItems.forEach(note =&gt; noteList[0].append(note));
    }
  };
  </code></pre>
  <p>deployed heroko application: <a href="https://some-note-taker.herokuapp.com/notes" rel="nofollow noreferrer">https://some-note-taker.herokuapp.com/notes</a>
  the heroko app lags a bunch, but it seems to work. When I run app on local, its super fast but breaks on the get requests, as mentioned above. Very confusing.</p>