SolidJS: “Unrecognized value”

I am able to receive the JSON value from the API path just fine.

Flask Code

app = Flask(__name__)
CORS(app)

@app.route("/cats-matches", methods=['POST'])
def cats_matches():
    person = {"name": "John"} #Does not work
    #person = [{"name": "John"}] #This works

    return person

if __name__ == "__main__":
    app.run(host="0.0.0.0",debug=True)

SolidJS

• The “Go” button sets the web_orders signal to an object with the name data
• That triggers the cats_matches resource to run fetchCatsMatches()
• I call {cats_matches()} on the page just to dump the data
• This shows correctly “[Object object]” if I return a List from the Flask route
• Returning a Dict from Flask shows nothing on the page and has the console error: Unrecognized value. Skipped inserting {name: ‘John’}

import { createSignal, createResource } from "solid-js";

const fetchCatsMatches = async (web_orders) =>
  (await fetch('http://127.0.0.1:5000/cats-matches', {
    method: "POST",
    body: JSON.stringify(web_orders),
    headers:{
      "Content-type": "application/json; charset=UTF-8",
      "Accept": "application/json"
    }
  })).json();

const CatsCustomerMatches = () => {
  const [web_orders, setWebOrders] = createSignal([]);

  const [cats_matches, { mutate, refetch }] = createResource(web_orders, fetchCatsMatches);

  const getCatsMatches = () => {
    setWebOrders([{'po': 123}]);
  };

  return (
    <>
      <button onClick={() => getCatsMatches()} >Go</button>
      <p>{cats_matches()}</p>
    </>
  );
}

function App() {
  return (
    <div class="grid grid-cols-1">
      <CatsCustomerMatches />
    </div>
  );
}

export default App;

Answer

That is because you are using an object directly in your rendering logic and jsx can not render objects directly. So, rather than outputting the resource, try stringifying it, so that you can avoid rendering errors:

<p>{JSON.stringify(cats_matches()}</p>

Solid somehow is more permissive with using array values directly than using object values. Either way you have error, [Object object] does not mean you are printing the value. In the case of an array, the value somehow gets converted into a string when the DOM element getting created and you see [Object object].

You can observe this easily:

import { render } from 'solid-js/web';

const App = () => {
  const getValue = () => {
    return {"name": "John"};
  }
  
  return (
    <>
      <p>{getValue()}</p>
    </>
  );
}

render(App, document.body);

You will get:

Unrecognized value. Skipped inserting 
Object {name: "John"}

Try wrapping the value in an array, you will see the error is gone and the paragraph content becomes [Object object].

As a side note, you can wrap your application in an error boundary to get bettor error results:

const fallback = (err) => {
  console.log(err);
  return err.message;
}

<ErrorBoundary fallback={fallback}>
<App>{/* App content */}</App>
<ErrorBoundary