T3 App directory: can't use tRPCs useQuery hook

Even though the component is client side, any idea?

Solution:

Use /react

38 Replies

Josh•8mo 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 ⁉•8mo ago

I believe I provided enough context, "App Directory" 🤫

Josh•8mo 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 ⁉•8mo 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•8mo ago

https://stackoverflow.com/help/how-to-ask

Stack Overflow

How do I ask a good question? - Help Center

Stack Overflow | The World’s Largest Online Community for Developers

Josh•8mo ago

There is still no context here

West side ⁉•8mo 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•8mo 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 ⁉•8mo ago

ah, in T3, api is the tRPC createTRPCProxyClient

Josh•8mo 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 ⁉•8mo ago

Aight, wait a minute

Josh•8mo 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 ⁉•8mo ago

My bad, but one genuine question: do you use T3?

Josh•8mo ago

Yes Heavily

West side ⁉•8mo ago

Then I'm fucking dumb, I apologize.

Josh•8mo 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 ⁉•8mo ago

I'll update the question. Thank you Josh, I really appreciate it today I realized I'm a jackass

Josh•8mo 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 ⁉•8mo 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•8mo 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•8mo ago

Post the whole file your working in with imports

West side ⁉•8mo 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•8mo ago

Youre*

Josh•8mo ago

hey@imjosh.dev

West side ⁉•8mo 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>
  );
};