T
TanStack•4mo ago
evident-indigo

Make queries reactive

When passing a query object to a component like this: 
  const dataQuery = useQuery(() => ({
    queryKey: ['price'],
    queryFn: fetchStoragePrice,
  }))
// ...
     <Match when={dataQuery.isSuccess}>
        <StoragePriceDisplay
          {...{ capacityUnit, timeUnit }}
          storagePrice={dataQuery.data!}
          bzzPrice={bzzPrice}
          unit={() => `${currency()}/${capacityUnit()}-${timeUnit()}`}
        />
  const dataQuery = useQuery(() => ({
    queryKey: ['price'],
    queryFn: fetchStoragePrice,
  }))
// ...
     <Match when={dataQuery.isSuccess}>
        <StoragePriceDisplay
          {...{ capacityUnit, timeUnit }}
          storagePrice={dataQuery.data!}
          bzzPrice={bzzPrice}
          unit={() => `${currency()}/${capacityUnit()}-${timeUnit()}`}
        />
it doesn't react to changes of the data. passing the whole object doesn't work either. do i have to wrap every single query into a signal in order for components to react to changes?
2 Replies
flat-fuchsia
flat-fuchsia•4mo ago
That should be reactive... what part isn't reactive? What do Match and StoragePriceDisplay look like?
wee-brown
wee-brown•4d ago
I seem to be having this exact issue.. when queries are invalidated/refetched and the query data changes.. the rendered UI doesn't change. I can't reproduce this since I am following exactly how solid-query is implemented in official examples I still don't get it why query data is just the query data and not an accessor to the query data for me. it was the destructuring of the query that was making it non-reactive. 
const {data} = useQuery(...);

return <div>{data}</div>
const {data} = useQuery(...);

return <div>{data}</div>
to 
const query = useQuery(...);

return <div>{query.data}</div>
const query = useQuery(...);

return <div>{query.data}</div>

Did you find this page helpful?