T3 App directory: can't use tRPCs useQuery hook

West side ⁉ · 2023-10-24T16:07:39.788Z

Even though the component is client side, any idea?

J

Josh•10/24/23, 4:11 PM

Why won't my car start? Any ideas?

J

Josh•10/24/23, 4:11 PM

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

JJosh Without knowing literally any context to your question, this is absolutely impos...

W

West side ⁉OP•10/24/23, 4:12 PM

I believe I provided enough context, "App Directory"

J

Josh•10/24/23, 4:12 PM

Give code, what have you tied, what worked, what didn't, what have you researched

J

Josh•10/24/23, 4:12 PM

There is no context here

J

Josh•10/24/23, 4:12 PM

Okay, I have a v6 in my car. Can you tell me why it won't start now?

J

Josh•10/24/23, 4:12 PM

What errors are you getting?

W

West side ⁉OP•10/24/23, 4:13 PM

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 <></>;
}

"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 <></>;
}

W

West side ⁉OP•10/24/23, 4:13 PM

literally

J

Josh•10/24/23, 4:13 PM

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

J

Josh•10/24/23, 4:14 PM

There is still no context here

W

West side ⁉OP•10/24/23, 4:14 PM

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?

J

Josh•10/24/23, 4:14 PM

I have no idea what your 'api' object is, what you're projecting looks like, etc. There are a million moving parts here

J

Josh•10/24/23, 4:14 PM

Where is the file you just provided in your project?

W

West side ⁉OP•10/24/23, 4:15 PM

ah, in T3, api is the tRPC

createTRPCProxyClient

createTRPCProxyClient

J

Josh•10/24/23, 4:15 PM

Have you tried console logging stuff?

WWest side ⁉ah, in T3, api is the tRPC `createTRPCProxyClient`

J

Josh•10/24/23, 4:15 PM

Show me directly, your code

J

Josh•10/24/23, 4:15 PM

There are different versions, and I'm not doing all that work to look it up to help you

W

West side ⁉OP•10/24/23, 4:15 PM

Aight, wait a minute

J

Josh•10/24/23, 4:15 PM

If you're asking a question, make it as easy as possible for people to help you

J

Josh•10/24/23, 4:16 PM

Don't make them work (like I am) to get the information out of you they need to help you in the first place

W

West side ⁉OP•10/24/23, 4:16 PM

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

J

Josh•10/24/23, 4:16 PM

Yes

J

Josh•10/24/23, 4:16 PM

Heavily

W

West side ⁉OP•10/24/23, 4:16 PM

Then I'm fucking dumb, I apologize.

J

Josh•10/24/23, 4:16 PM

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

J

Josh•10/24/23, 4:17 PM

I'm more than happy to help, I'm just trying to get you to help me help you

W

West side ⁉OP•10/24/23, 4:17 PM

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

J

Josh•10/24/23, 4:19 PM

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"

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

J

Josh•10/24/23, 4:20 PM

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

JJosh Again, think of it as if your a car mechanic. If I ask "why won't my car start",...

W

West side ⁉OP•10/24/23, 4:20 PM

This is a very valid example. Thank you, and excuse me I was a bit frustrated by the code after doing it for hours

J

Josh•10/24/23, 4:21 PM

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

WWest side ⁉This is a very valid example. Thank you, and excuse me I was a bit frustrated by...

J

Josh•10/24/23, 4:21 PM

Hahaha your all good

J

Josh•10/24/23, 4:22 PM

Again, I will absolutely help as long as you give me the tools to help you

J

Josh•10/24/23, 4:23 PM

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.

T

The cokeaine is too good•10/24/23, 4:24 PM

Post the whole file your working in with imports

JJosh Feel free to give me a ping when you have everything written up. If you can prov...

W

West side ⁉OP•10/24/23, 4:24 PM

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

TThe cokeaine is too good Post the whole file your working in with imports

W

West side ⁉OP•10/24/23, 4:24 PM

Bet

T

The cokeaine is too good•10/24/23, 4:24 PM

Youre*

J

Josh•10/24/23, 4:24 PM

hey@imjosh.dev

W

West side ⁉OP•10/24/23, 4:26 PM

"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>
  );
};

"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>
  );
};

T

The cokeaine is too good•10/24/23, 4:27 PM

Ok

T

The cokeaine is too good•10/24/23, 4:27 PM

I found it

W

West side ⁉OP•10/24/23, 4:27 PM