T
TanStack•3y ago
optimistic-gold

SolidJS component prop not reactive to change in solid-query query data

Running into a case where a prop I'm passing to a component isn't reactive to changes in its computed function 
<MealCard meal={{id: option.id, name: option.name, ingredients: []}} isWinningMeal={option.id === winningMealId()} votesComponent={<Votes option={option} />} />


  const winningMealId = () => {
    if (pollQuery.isSuccess) {
      let pollOptionsSlice = pollQuery.data.options;
      pollOptionsSlice = pollOptionsSlice.slice();
  
      pollOptionsSlice.sort((a, b) => b.voteCount - a.voteCount);
      if (pollOptionsSlice[0].voteCount > 0) {
        return pollOptionsSlice[0].id;
      }
    }
  }
<MealCard meal={{id: option.id, name: option.name, ingredients: []}} isWinningMeal={option.id === winningMealId()} votesComponent={<Votes option={option} />} />


  const winningMealId = () => {
    if (pollQuery.isSuccess) {
      let pollOptionsSlice = pollQuery.data.options;
      pollOptionsSlice = pollOptionsSlice.slice();
  
      pollOptionsSlice.sort((a, b) => b.voteCount - a.voteCount);
      if (pollOptionsSlice[0].voteCount > 0) {
        return pollOptionsSlice[0].id;
      }
    }
  }
If the pollQuery.data.options change the winningMealId rendered by the MealCard component doesn't update. I cloned the options array because calling sort was giving me an error saying stores can't be mutated directly (pollQuery is a tanstack/solid-query query). I'm assuming something is getting lost here or I'm approaching it wrong I understand this issue is probably more solidjs than solid-query but wanted to also ask here in case anyone had any insight.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?