#Solid.js rendering issue

8 messages · Page 1 of 1 (latest)

fallen briar
#

Recently I have been exploring solid.js and I am not clear about the rendering mechanism

for data querying, I am using Tanstack query, and inside the component, I am calling the same function fetchUserData but what createQuery I am storing into a state variable and rendering the data into UI, which is working. But when I directly distract the data from the state and try to render it into UI and now it is not working. I am really not clear with the concept

import { createQuery } from "@tanstack/solid-query";


const fetchUserData = () => createQuery(()=> ({
  queryKey: ['users'],
  queryFn : async () => {
    const res = await fetch(`https://jsonplaceholder.typicode.com/users`)
    return await res.json()
  }
}))


const Home = () => {
  const state = fetchUserData()

  const {data} = fetchUserData()
  return (
    <div>
      {/* working */}
       {
        state?.data?.map(item => <h1> {item.name} </h1>)
       }

  
      {/* not working */}
      {data?.map(item => <h1> {item.name} </h1> )}
    </div>
  );
};

export default Home;
2025-02-08_19-17.png
sharp stone
#

You aren't allowed to destructure objects in Solid. This breaks reactivity. You have to use state.data

fallen briar
sharp stone
#

yeah that's something that you have to get used to first

#

but after a while it'll feel natural

fallen briar
#

Okay but it feels terrible

sharp stone
#

you can also do

const data = () => state.data

and then use data() in your jsx. But there is no way around this

fallen briar