Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago
epsilon42

useQuery in NextJS app router client components

I have started a project using create t3 app and app router and noticed that in the template application I can no longer use: api.tableName.functionName.useQuery() (see attached image of T3 app router vs non-app router homepage templates).

I realise in the T3 app router example, the index page is a server component so it doesn't need 
useQuery
, but I was planning on having a client component that are 2 tabs with different content for each tab (see attached image).

Here are some requirements:
  • I would prefer to load the data for the "Loaded List" tab server side
  • I don't want to load the data of the "Unloaded List" tab until the user clicks it (it's an expensive query)
  • No route change when clicking between tabs
How would I achieve this?

I'm basically looking to leverage something like isLoading from useQuery and thought it would still be baked into the T3 app for usage in client components but I guess it's not there for a reason. I'm quite new to app router so there's a very real possibility I'm missing something obvious here.

Thanks.
image.png
image.png
Solution
You’re importing the server stuff, need to import from ~/trpc/react instead
Jump to solution
Was this page helpful?