T3 App directory: can't use tRPCs useQuery hook

Even though the component is client side, any idea?
Solution:
Use /react
Jump to solution
38 Replies
Josh
Joshβ€’13mo ago
Why won't my car start? Any ideas? Without knowing literally any context to your question, this is absolutely impossible to answer. Just like you could not possibly tell my why my car won't start
West side ⁉
West side ⁉‒13mo ago
I believe I provided enough context, "App Directory" 🀫
Josh
Joshβ€’13mo ago
Give code, what have you tied, what worked, what didn't, what have you researched There is no context here Okay, I have a v6 in my car. Can you tell me why it won't start now? What errors are you getting?
West side ⁉
West side ⁉‒13mo ago
Code:
"use client"

export default function MyAmazingComponent() {
const theAmazingQuery = api.myAmazingRouter.getAll.useQuery(); <-- useQuery is not a thing!!
return <></>;
}
"use client"

export default function MyAmazingComponent() {
const theAmazingQuery = api.myAmazingRouter.getAll.useQuery(); <-- useQuery is not a thing!!
return <></>;
}
literally πŸ‘†
Josh
Joshβ€’13mo ago
Stack Overflow
How do I ask a good question? - Help Center
Stack Overflow | The World’s Largest Online Community for Developers
Josh
Joshβ€’13mo ago
There is still no context here
West side ⁉
West side ⁉‒13mo ago
Josh, sorry, I'm a dumbfuck What other context do I need to provide? the useQuery is not appearing due to being in an app directory, what's the optout here?
Josh
Joshβ€’13mo ago
I have no idea what your 'api' object is, what you're projecting looks like, etc. There are a million moving parts here Where is the file you just provided in your project?
West side ⁉
West side ⁉‒13mo ago
ah, in T3, api is the tRPC createTRPCProxyClient
Josh
Joshβ€’13mo ago
Have you tried console logging stuff? Show me directly, your code There are different versions, and I'm not doing all that work to look it up to help you
West side ⁉
West side ⁉‒13mo ago
Aight, wait a minute
Josh
Joshβ€’13mo ago
If you're asking a question, make it as easy as possible for people to help you Don't make them work (like I am) to get the information out of you they need to help you in the first place
West side ⁉
West side ⁉‒13mo ago
My bad, but one genuine question: do you use T3?
Josh
Joshβ€’13mo ago
Yes Heavily
West side ⁉
West side ⁉‒13mo ago
Then I'm fucking dumb, I apologize.
Josh
Joshβ€’13mo ago
No, your just bad at asking questions, which is fine, you just need to get better which is what I'm trying to get into your head I'm more than happy to help, I'm just trying to get you to help me help you
West side ⁉
West side ⁉‒13mo ago
I'll update the question. Thank you Josh, I really appreciate it today I realized I'm a jackass
Josh
Joshβ€’13mo ago
Again, think of it as if your a car mechanic. If I ask "why won't my car start", you don't know anything about my car, what could be wrong etc. If I tell you it's a v6 Camero, you know a bit more, but what year is it? How many miles? Was there anything wrong with it before? Did I put any mods on it? All of these could possibly contribute. You could own 3 cameos and still have no idea what my problem is if I asked "why won't my Camero start" Read this over, and give full context. Assume (because we don't) that we don't know a single thing about your project, and give as much context as possible
West side ⁉
West side ⁉‒13mo ago
This is a very valid example. Thank you, and excuse me I was a bit frustrated by the code after doing it for hours
Josh
Joshβ€’13mo ago
And please, I'm giving you this advice for future questions. I do a lot of stuff with students at my old university and the thing that frustrates us the most is when people ask bad questions Hahaha your all good Again, I will absolutely help as long as you give me the tools to help you Feel free to give me a ping when you have everything written up. If you can provide a link to the git repo, that would be awesome too.
The cokeaine is too good
Post the whole file your working in with imports
West side ⁉
West side ⁉‒13mo ago
Thank you a ton man, you're a good sport. I'll upload the entire thing later this night, although the repo is private, you can send me your email πŸ˜„ Bet
The cokeaine is too good
Youre*
Josh
Joshβ€’13mo ago
West side ⁉
West side ⁉‒13mo ago
"use client";
import { useDisclosure } from "@mantine/hooks";
import { AppShell, Burger, Group, } from "@mantine/core";
import { type ReactNode, useState } from "react";
import { LinksGroup } from "./_components/mantine_components/NavbarLinksGroup";
import { IconSchool } from "@tabler/icons-react";
import { api } from "~/trpc/server";

export const Shell = ({ children }: { children: ReactNode }) => {
const schoolQuery = api.school.getAll.useQuery(); // <--- ⚠️ Error here, method not found
const [opened, { toggle }] = useDisclosure();
return (
<AppShell
header={{ height: 60 }}
navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
padding="md"
>
<AppShell.Header>
<Group h="100%" px="md">
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
School again
</Group>
</AppShell.Header>
<AppShell.Navbar p="md">
<LinksGroup
label={"Schools"}
icon={IconSchool}
links={[
{ label: "hi", link: "/" },
]}
/>
</AppShell.Navbar>
<AppShell.Main>{children}</AppShell.Main>
</AppShell>
);
};
"use client";
import { useDisclosure } from "@mantine/hooks";
import { AppShell, Burger, Group, } from "@mantine/core";
import { type ReactNode, useState } from "react";
import { LinksGroup } from "./_components/mantine_components/NavbarLinksGroup";
import { IconSchool } from "@tabler/icons-react";
import { api } from "~/trpc/server";

export const Shell = ({ children }: { children: ReactNode }) => {
const schoolQuery = api.school.getAll.useQuery(); // <--- ⚠️ Error here, method not found
const [opened, { toggle }] = useDisclosure();
return (
<AppShell
header={{ height: 60 }}
navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
padding="md"
>
<AppShell.Header>
<Group h="100%" px="md">
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
School again
</Group>
</AppShell.Header>
<AppShell.Navbar p="md">
<LinksGroup
label={"Schools"}
icon={IconSchool}
links={[
{ label: "hi", link: "/" },
]}
/>
</AppShell.Navbar>
<AppShell.Main>{children}</AppShell.Main>
</AppShell>
);
};
The cokeaine is too good
Ok I found it
West side ⁉
West side ⁉‒13mo ago
import { api } from "~/trpc/server";?
The cokeaine is too good
Yes
West side ⁉
West side ⁉‒13mo ago
lmao
Solution
The cokeaine is too good
Use /react
West side ⁉
West side ⁉‒13mo ago
done and it works beautifully
The cokeaine is too good
Nice
West side ⁉
West side ⁉‒13mo ago
Thank you cocaieena
The cokeaine is too good
No😁 Np*
Josh
Joshβ€’13mo ago
Woop
West side ⁉
West side ⁉‒13mo ago
Josh, thank you again, a ton.
Josh
Joshβ€’13mo ago
Yepp. Now you see why / what I was asking for
West side ⁉
West side ⁉‒13mo ago
indeed now I do 😁
Want results from more Discord servers?
Add your server