Burhan•12mo 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

BurhanOP•12mo 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•12mo 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