title: "Cannot PUT /mytable" when running `UPDATE` SQL command from react-postgres "React App" localhost:MYPORT on PostgreSQL / node.js backend
body: <p>I am following the guide at <a href="https://github.com/nsebhastian/react-node-postgres" rel="nofollow noreferrer">https://github.com/nsebhastian/react-node-postgres</a>. Against the comments in below that blog, I can confirm that the full tutorial is working, see this documented at <a href="https://stackoverflow.com/a/69085149/11154841">TypeError: Cannot read property 'rows' of undefined</a>.</p>
  <p>The <code>ADD</code> and the <code>DELETE</code> command work, and the <code>SELECT</code> to show the table <code>merchant</code>.</p>
  <p>The blog ends with:</p>
  <blockquote>
  <p>I’ll leave you the implementation of the UPDATE query as an exercise.</p>
  </blockquote>
  <p>And I thought, why not try that? This was hours ago...</p>
  <p>I just took the exact files provided in the GitHub repository.</p>
  <p>In the &quot;/node-postgres&quot; directory, I changed:</p>
  <ul>
  <li>&quot;index.js&quot; by adding at the bottom:</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>app.put('/merchants', (req, res) =&gt; {
    merchant_model
      .updateMerchant(req.body)
      .then((response) =&gt; {
        res.status(200).send(response);
      })
      .catch((error) =&gt; {
        res.status(500).send(error);
      });
  });
  </code></pre>
  <ul>
  <li>&quot;merchant_model.js&quot; by adding and changing at the bottom, almost copying the <code>createMerchant</code> function of the guide.</li>
  </ul>
  <p>The original <code>createMerchant</code> function:</p>
  <pre class="lang-js prettyprint-override"><code>const createMerchant = (body) =&gt; {
    return new Promise(function (resolve, reject) {
      const { name, email } = body;
  
      pool.query(
        'INSERT INTO merchants (name, email) VALUES ($1, $2) RETURNING *',
        [name, email],
        (error, results) =&gt; {
          if (error) {
            reject(error);
          }
          resolve(
            `A new merchant has been added added: ${JSON.stringify(
              results.rows[0]
            )}`
          );
        }
      );
    });
  };
  </code></pre>
  <p>Now the new <code>updateMerchant</code> function:</p>
  <pre class="lang-js prettyprint-override"><code>const updateMerchant = (body) =&gt; {
    return new Promise(function (resolve, reject) {
      const { id, name } = body;
      pool.autoCommit = true;
  
      pool.query(
        'UPDATE merchants SET name = &quot;$2&quot; WHERE id = $1',
        [id, name],
        (error, results) =&gt; {
          if (error) {
            reject(error);
          }
          resolve(
            `A merchant has been updated: ${JSON.stringify(results.rows[0])}`
          );
        }
      );
    });
  };
  
  module.exports = {
    getMerchants,
    createMerchant,
    deleteMerchant,
    updateMerchant,
  };
  </code></pre>
  <p>In the /node-postgres/react-postgres directory, I changed (using <code>PUT</code> method for <code>UPDATE</code> because of <a href="https://stackoverflow.com/a/34500462/11154841">Need help about @Get @Post @Put @Delete in Restful webservice</a> or <a href="https://stackoverflow.com/a/47831350/11154841">Explain and example about 'get', 'delete', 'post', 'put', 'options', 'patch', 'head' method?</a>):</p>
  <ul>
  <li>&quot;App.js&quot; by adding and changing at the bottom:</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>function updateMerchant() {
    let id = prompt('Enter merchant ID');
    let name = prompt('Enter merchant name');
  
    fetch('http://localhost:3001/merchants', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ id, name }),
    })
      .then((response) =&gt; {
        return response.text();
      })
      .then((data) =&gt; {
        alert(data);
        getMerchant();
      });
  }
  
  return (
    &lt;div&gt;
      {merchants ? merchants : 'There is no merchant data available'}
      &lt;br /&gt;
      &lt;button onClick={createMerchant}&gt;Add&lt;/button&gt;
      &lt;br /&gt;
      &lt;button onClick={deleteMerchant}&gt;Delete&lt;/button&gt;
      &lt;br /&gt;
      &lt;button onClick={updateMerchant}&gt;Update&lt;/button&gt;
    &lt;/div&gt;
  );
  </code></pre>
  <p>When I click on <code>Update</code> in the React app in the browser at <code>localhost:3000</code>, I get the right questions for <code>id</code> and <code>name</code>, running <code>... 'UPDATE merchants SET name = &quot;$2&quot; WHERE id = $1', [id, name] ...</code>:</p>
  <p><a href="https://i.stack.imgur.com/bfmF1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bfmF1.png" alt="enter image description here" /></a></p>
  <p>and:</p>
  <p><a href="https://i.stack.imgur.com/pKWsw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pKWsw.png" alt="enter image description here" /></a></p>
  <p>which then throws the error:</p>
  <p><a href="https://i.stack.imgur.com/CTNBp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CTNBp.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Error&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;pre&gt;Cannot PUT /merchants&lt;/pre&gt; &lt;/body&gt; &lt;/html&gt;
  </code></pre>
  <p>which is nothing but this error message in html (I only need to format it as a markdown quote here to get this):</p>
  <blockquote>
     
  Error   <pre>Cannot PUT /merchants</pre>
   
  </blockquote>
  <p>The error stays the same when I run the <code>UPDATE</code> without parametrisation:</p>
  <pre><code>... 'UPDATE merchants SET name = &quot;test&quot; WHERE id = 2', [id, name] ...
  </code></pre>
  <p>I have tried switching from <code>PUT</code> method to <code>POST</code>, but then every <code>UPDATE</code> just adds a new merchant with a new id and a <code>null</code> value for the <code>email</code>, see the screenshot above. The record in SQL is not updated by the <code>UPDATE</code> command, you see the change in the table in the first lines in real-time.</p>
  <p>What should I do to get the <code>UPDATE</code> to work?</p>
  <h4>UPDATE:</h4>
  <p>As answer + comment show, using &quot;&quot; makes a field. But that does not solve the issue, I changed the code to <code>'UPDATE merchants SET name = $2 WHERE id = $1'</code> since quotation marks are not needed for parameters and I get the error in in &quot;node.js&quot; terminal, stopping the &quot;node.js&quot; service:</p>
  <pre><code>my_user@MY_PC:~/my_project/node-postgres$ node index.js
  App running on port 3001.
  /home/my_user/my_project/node-postgres/merchant_model.js:61
        resolve(`A merchant has been updated: ${JSON.stringify(results.rows[0])}`)
                                                                       ^
  
  TypeError: Cannot read property 'rows' of undefined
      at pool.query (/home/my_user/my_project/node-postgres/merchant_model.js:61:70)
      at Query.client.query [as callback] (/home/my_user/my_project/node-postgres/node_modules/pg-pool/index.js:387:18)
      at Query.handleError (/home/my_user/my_project/node-postgres/node_modules/pg/lib/query.js:128:19)
      at Client._handleErrorMessage (/home/my_user/my_project/node-postgres/node_modules/pg/lib/client.js:335:17)
      at Connection.emit (events.js:198:13)
      at parse (/home/my_user/my_project/node-postgres/node_modules/pg/lib/connection.js:114:12)
      at Parser.parse (/home/my_user/my_project/node-postgres/node_modules/pg-protocol/dist/parser.js:40:17)
      at Socket.stream.on (/home/my_user/my_project/node-postgres/node_modules/pg-protocol/dist/index.js:11:42)
      at Socket.emit (events.js:198:13)
      at addChunk (_stream_readable.js:288:12)
  </code></pre>
  <h4>UPDATE2:</h4>
  <p>As I has been asked for in the comments, I switched on the log for this test database. Here are the last queries before it worked:</p>
  <pre><code>2021-09-20 23:33:09.071 CEST [2637] my_user@my_database LOG:  statement: SELECT * FROM merchants ORDER BY id ASC
  2021-09-20 23:33:44.346 CEST [2641] my_user@my_database ERROR:  bind message supplies 2 parameters, but prepared statement &quot;&quot; requires 0
  2021-09-20 23:33:44.346 CEST [2641] my_user@my_database STATEMENT:  UPDATE merchants SET name = 'test' WHERE id = 2
  2021-09-20 23:37:37.465 CEST [2674] my_user@my_database LOG:  statement: SELECT * FROM merchants ORDER BY id ASC
  2021-09-20 23:37:38.586 CEST [2674] my_user@my_database LOG:  statement: SELECT * FROM merchants ORDER BY id ASC
  2021-09-20 23:37:46.853 CEST [2674] my_user@my_database ERROR:  bind message supplies 2 parameters, but prepared statement &quot;&quot; requires 1
  2021-09-20 23:37:46.853 CEST [2674] my_user@my_database STATEMENT:  UPDATE merchants SET name = '$2' WHERE id = $1
  2021-09-20 23:41:16.399 CEST [2704] my_user@my_database LOG:  statement: SELECT * FROM merchants ORDER BY id ASC
  2021-09-20 23:41:31.879 CEST [2706] my_user@my_database ERROR:  bind message supplies 2 parameters, but prepared statement &quot;&quot; requires 1
  </code></pre>