I've been using useQuery without a queryFn but say query key to get the data and status information about the query in a components outside where I supply the queryFn [I thought this was supported behavior, let me know if it isn't]. If I have a path like reports/$reportId I have the useQuery with the queryFn at the "reports" level, but then useQuery without queryFn at the "$reportId" level. When I navigate from /reports to /reports/$reportId this all works fine, but if I go directly to /reports/$reportId the queryFn is never called. If I avoid rendering the outlet in /reports until after the query is finished it does work. Is this expect? Is there a way to do this without the conditional rendering of the outlet? Is there another setup that is more correct?
#useQuery to get data in nested route
hushed island
mighty fog
Maybe show some code, specifically your 'useQuery'.
unborn walrus
I think if you are just using queryKey, unless it's also got a default query function set it won't know what function to call if you don't supply it to useQuery
I understand your using tanstack router so I'd go with bundling the query and key with queryOptions and preceeding the cache with prefetchQuery or ensureQueryData
hushed island
in /reports: const { isSuccess, data } = useQuery({ queryKey: [ALL_REPORTS], queryFn: () => getAllReports() })
and in /reports/$reportId: const { isSuccess, data } = useQuery<Report[]>({ queryKey: [ALL_REPORTS] });
since /reports renders first, it should have a queryFn associated with the key
hushed island
I'm just using useQuery wrong
unborn walrus
Yeah just define the options object outside the component
https://tkdodo.eu/blog/the-query-options-api has more examples
stark vault
Hi