T
tRPC

❓-help

How to access isLoading if a Query is inside a component

BBurhan12/30/2023
I am having trouble in accessing isLoading from a query, the problem is that the Query is placed inside a component
BBurhan12/30/2023
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
Nnlucas12/30/2023
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

Looking for more? Join the community!

Recommended Posts
tRPC and vite serverless, are there any exmaples?Now that tanstack router is out I would want to move out of nextjs, but keep the convenience of hostHow can i use inferprocedureoutput?I'd like to write this code type-safely:```ts const handleQuery = (query: /* ? */) => {} const MyCoCan a URL be formatted with dashes, such as "user-list" in the context of trpc?Can a URL be formatted with dashes, such as "user-list" in the context of trpc? ``` const appRouter Incorrect type inference with discriminated unions.Hey folks, I am having a really weird issue. Here is a minimal reproducible example: **https://tsplGet Query Key on ServerI'm following some recommended practices from one of the react query maintainers `@tkdodo` and want ReferenceError: Cannot access 'appRouter' before initializationHi friends im having trouble implementing a "protected" or "private" procedure in TRPC using Next.jstrpc openapi does not work on app routerhttps://github.com/jlalmes/trpc-openapi Can i just know if trpc open api for next is also applicableSubscription types are not inferred while queries and mutations are working fineI am NOT working with a monorepo but while query and mutation types are being inferred out of the boHow are thrown (unhandled) exceptions safe to pass?Hi, I started looking into error handling more and understand that all errors get wrapped in a TRPCECanary useUtils and createTRPCQueryUtils type not callableTrying to access utils object in my application after using `useUtils` or `createTRPCQueryUtils` andtRPC run express under the hood?tRPC run `expressjs` under the hood?Modify mutation error messages?We occasionally get timeouts from cloudfront which gives the user an error about how the cloudfront server-side helpers doesnt work with `Hydrate` and `QueryClient`environtment: node v20.9.0, npm Hi i tried to implement server-side helpers but somehow it just doesUnable to mock unstable_batchStreamLink network responseHi there! I have a couple API endpoints that call third party dependencies and would like to mock a Using trpc with fastify server and nextjs clientHello, is it possible to use fastify for server and have a nextjs client and make use of the SSG / SI can't mutate or query in SvelteKitEnvironment: Node 20 with Yarn I'm not getting any specific errors but I don't get the "mutate" or "