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.

Solution:

You’re importing the server stuff, need to import from ~/trpc/react instead

Jump to solution