Nov
26
2 days ago
Activity icon
fork

rjsmith25 forked reactjs/server-components-demo

⚡ Demo app of React Server Components.
rjsmith25 MIT License Updated
fork time in 1 day ago
Activity icon
fork

rayuzaki83 forked reactjs/server-components-demo

⚡ Demo app of React Server Components.
rayuzaki83 MIT License Updated
fork time in 1 day ago
Activity icon
issue

rgbkids issue comment reactjs/server-components-demo

rgbkids
rgbkids

fix: JSON.parse fails in react-fetch

JSON.parse fails in react-fetch

JSON.parse (empty data) doesn't work properly when I get empty data. In react-fetch, I get Uncaught Syntax Error.

fetch(`http://localhost:4000/notes/-1`)
  • api.server.js
    • GET: /notes/:id

res.json(rows[0]);

Just escape it like this

res.json(rows[0] || "null");

https://stackoverflow.com/questions/9158665/json-parse-fails-in-google-chrome

pull request

rgbkids pull request reactjs/server-components-demo

rgbkids
rgbkids

fix: JSON.parse fails in react-fetch

From: https://github.com/reactjs/server-components-demo/pull/50

gaearon commented 11 hours ago why is the data empty?

gaearon commented 6 hours ago i'll close because it's not supposed to be empty. if there's some case where it's empty let's figure out why.


About empty data: We are testing the RSC demo as a team.

I got a SyntaxError when testing with two people. The operation is as follows.

  • Operations
User
Operation 1 (User-A): User-A show the initial page. 01_Operator-A_01
Operation 2 (User-B): User-B show the initial page. 02_Operator-B_01
Operation 3 (User-B): User-B delete the first record. 03_Operator-B_02
Operation 4 (User-B): User-B finished deleting the first record. 04_Operator-B_03
Operation 5 (User-A): The first record is still visible on the screen of User-A. 05_Operator_A_02
Operation 6 (User-A): An error occurs when User-A taps the first record. 06_Operator_A_03
  • Operation 6 (User-A): An error occurs when User-A taps the first record.

The logs are as follows.

Application Error
SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at Response.json (/opt/notes-app/node_modules/react-fetch/cjs/react-fetch.node.development.js:133:21)
    at Note (/opt/notes-app/src/Note.server.js:65:60)
    ...

When I looked into it, I found the cause of the error in react-fetch.

  • react-fetch.node.development.js
  json: function () {
    if (this._json !== null) {
      return this._json;
    }

    var buffer = readRecordValue(this._bufferRecord);
    var json = JSON.parse(buffer.toString());
    this._json = json;
    return json;
  },

Passing an empty character to JSON.parse will cause a SyntaxError.

let json1 = JSON.parse(""); // => SyntaxError
let json2 = JSON.parse([]); // => SyntaxError
let json3 = JSON.parse(null); // OK
let json4 = JSON.parse("null"); // OK

The problem is that the caller of react-fetch cannot catch SyntaxError. The application will go down before I can catch it.

For example:

  try {
    let result = fetch(`http://localhost:4000/notes/${selectedId}`);
    console.log(result);  // => ERROR:  invalid input syntax for type integer: "null"  STATEMENT:  select * from notes where id = $1
  } catch (error) {
    // SyntaxError is not caught.
    console.log(error);
  }

So we proposed a change in api.server.js.

  • api.server.js
    • GET: /notes/:id

res.json(rows[0]);

Just escape it like this

res.json(rows[0] || null);

This way, the caller of react-fetch can make the decision. Note.server.js does not need to be changed.

Nov
25
3 days ago
Activity icon
issue

gaearon issue reactjs/server-components-demo

gaearon
gaearon

How does react decide to rerender search result?

First of all, thank you for a great example 🙂️. And thank you for keeping in touch with what React dev team is working on. That's a great thing!

For example, when I create a new note with the title test and I already have search input with test, how react decide that the search result should be rerendered on the server? This thing is not clear to me 🤔️

Activity icon
issue

gaearon issue comment reactjs/server-components-demo

gaearon
gaearon

How does react decide to rerender search result?

First of all, thank you for a great example 🙂️. And thank you for keeping in touch with what React dev team is working on. That's a great thing!

For example, when I create a new note with the title test and I already have search input with test, how react decide that the search result should be rerendered on the server? This thing is not clear to me 🤔️

gaearon
gaearon

The search field updates a piece of context:

https://github.com/reactjs/server-components-demo/blob/9285cbd2624c6838ebd2d05df1685df2c0f2f875/src/SearchField.client.js#L31-L34

Our root client shell component reads a (cacheable) server response according to that piece of context:

https://github.com/reactjs/server-components-demo/blob/9285cbd2624c6838ebd2d05df1685df2c0f2f875/src/Root.client.js#L26-L31

So when you change the field, effectively you tell React to refetch the server tree. Similar to navigating to another page.

So there are no subscriptions involved, it's more like refreshing the page. (But because it's built with React, the page doesn't "reset" during a refresh.)

Hope that helps.

Activity icon
issue

gaearon issue reactjs/server-components-demo

gaearon
gaearon

Webpack 5 Support

Seems there is a new chunk graph API and you'll need to utilize it to support webpack 5.

Error: Module.id: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)
Activity icon
issue

gaearon issue comment reactjs/server-components-demo

gaearon
gaearon

Webpack 5 Support

Seems there is a new chunk graph API and you'll need to utilize it to support webpack 5.

Error: Module.id: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)
Activity icon
issue

gaearon issue comment reactjs/server-components-demo

gaearon
gaearon

fix: JSON.parse fails in react-fetch

JSON.parse fails in react-fetch

JSON.parse (empty data) doesn't work properly when I get empty data. In react-fetch, I get Uncaught Syntax Error.

fetch(`http://localhost:4000/notes/-1`)
  • api.server.js
    • GET: /notes/:id

res.json(rows[0]);

Just escape it like this

res.json(rows[0] || "null");

https://stackoverflow.com/questions/9158665/json-parse-fails-in-google-chrome

gaearon
gaearon

i'll close because it's not supposed to be empty. if there's some case where it's empty let's figure out why.

pull request

gaearon pull request reactjs/server-components-demo

gaearon
gaearon

fix: JSON.parse fails in react-fetch

JSON.parse fails in react-fetch

JSON.parse (empty data) doesn't work properly when I get empty data. In react-fetch, I get Uncaught Syntax Error.

fetch(`http://localhost:4000/notes/-1`)
  • api.server.js
    • GET: /notes/:id

res.json(rows[0]);

Just escape it like this

res.json(rows[0] || "null");

https://stackoverflow.com/questions/9158665/json-parse-fails-in-google-chrome

Previous