Burhan
Burhan10mo ago

How to access isLoading if a Query is inside a component

I am having trouble in accessing isLoading from a query, the problem is that the Query is placed inside a component
2 Replies
Burhan
Burhan10mo ago
const LayoutName = ({ layoutId }) => {
const { data: layoutApiData, isLoading } = trpc.layout.get.useQuery(
{ id: layoutId },
{
refetchOnWindowFocus: false,
enabled: layoutId ? true : false,
},
);

return <>{layoutApiData?.name}</>;
};
const LayoutName = ({ layoutId }) => {
const { data: layoutApiData, isLoading } = trpc.layout.get.useQuery(
{ id: layoutId },
{
refetchOnWindowFocus: false,
enabled: layoutId ? true : false,
},
);

return <>{layoutApiData?.name}</>;
};
This is where I want to use it
{isLoading ? (
<Skeleton height='15px'/>
) : (
<p className=" text-md font-semibold tracking-tight ">
{option.page_name} (Layout:{' '}
<LayoutName layoutId={option.layout_id} />)
</p>
)}
{isLoading ? (
<Skeleton height='15px'/>
) : (
<p className=" text-md font-semibold tracking-tight ">
{option.page_name} (Layout:{' '}
<LayoutName layoutId={option.layout_id} />)
</p>
)}
But I am getting isLoading is undefined
Nick
Nick10mo ago
React query does export useIsFetching, but you might also consider lifting up this query to the component above if that’s what you want to use You can even put it in a custom hook and then call that hook at both levels with the same layoutId since react query will hit the cache the second usage