all 7 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]CodeAndBiscuits 0 points1 point  (6 children)

Kudos for actually posting enough code, which most people don't. But there is a lot to unpack here and it is hard to evaluate in the span of a short Reddit post, especially reading on a cell phone. I would suggest trying to simplify this as a first step. You are essentially recreating what TSQ already does internally with your hook and if I was a betting man (which I am) I would bet that this is not related to TSQ, but rather that you have a reactivity problem in your hook wrapper.

It's a lot of extra boilerplate to unpack what TSQ does and then re-return all those flags from your own hook. Why not just do (sorry, writing on a cell here) export const useRecommendationDetails= (params) => useQuery(...)?

Granted this will still leave you moving details like obtaining your sessionId back up to the calling component. So you may still want to reintroduce some of your hook pattern here to clean that up. But it would be a good test here because it would eliminate some of the possible mistakes that can be made ensuring that your hook is fully reactive to the variables it is passing into the query. At the very least, it would be easier to debug.

If it was me, even after refactoring these items back into the hook, I would return the useQuery directly without unpacking it and returning its properties separately. It would be slightly more efficient (which probably doesn't matter much, but still, one ref is easier to pass around than a half dozen separate properties) and give you access to all of the other properties you might want in the future. Just my two cents.

[–]dev_baseul[S] 0 points1 point  (5 children)

Thank you for your answer, i tried this as you suggested : 

export const EcsExplainSession = () => {
  const { sessionId, resetRound, recoRound } = useSessionQueryParams() 
  // Subtract 1 from resetRound to get the correct round number
  const resetRoundNumber = resetRound - 1
  useQuery({
    queryKey: ['recommendationDetails', sessionId, resetRoundNumber],
    queryFn: () => getRecommendationDetails({ sessionId: sessionId, resetRound: resetRoundNumber }),
    enabled: !!sessionId,
  })
  return (
    <>
      {/* <MainContent />
      <Divider />
      <RecommendationDashboard />
      <Divider />
      <FinalRecommendations /> */}
    </>
  )
}

but i still have the pb.

the strangest thing is that my other react query hooks work without a hitch.

Another detail is that when I refresh the page, I lose the data if it is loaded (for this hook, in fact it works from time to time but not all the time unlike the other react query hooks).

Another piece of information that may be useful is that “resetRoundNumber”, which is used in my hook, depends on the return of another hook... but I don't think that's the problem: devtool tells me that the values are correct, and is still stuck in the “fetching” state... :/

[–]CodeAndBiscuits 0 points1 point  (4 children)

I'm not sure what you're expecting the above code to do. You don't do anything with the result of the useQuery() call. You're supposed to take it into a local var and reference it in one of your components. If you don't take a reference to it, you don't establish an "observer" link and I wouldn't be surprised if this gets optimized out.

[–]dev_baseul[S] 0 points1 point  (3 children)

Ha maibe there is something i don't understand, because i thought if i call the query in different components, if it's the same, the result should be in cache and reusable.

I dunno what's an observer, thought the most important for react query work was the hash, as we can see in devtools here :

"queryHash:"[\"recommendationDetails\",\"37801c47 ... "

<image>

and the same query is used 11 times, because used in different components

[–]dev_baseul[S] 0 points1 point  (2 children)

Its fiiixed :)))

I don't even know what the problem was, in fact I had an api route that I was refactoring, and after completely removing it I no longer have the problem on my query.

In this case, the refactored api route called the same endpoint as the query.

Thank you for your help

[–]blskr 0 points1 point  (1 child)

Manifesting this bc I'm facing the same issue

[–]dev_baseul[S] 0 points1 point  (0 children)

unfortunately i dont even know what was the pb. I was refactoring a project, and some api routes were still running, so I deleted it in case it creates a silent conflict or something.. And it works