Unable to retrieve application context. Did you forget to wrap your App inside `withTRPC` HoC?

Hi, noob here. I found reference to this in a thread but it was regarding testing. I'm switching a component to "use client". The error is after getAll. Thanks Feature.tsx: "use client"; import { api } from "~/trpc/react"; import { useFilterStore } from "../_store/filterStore"; export const Feature = () => { const ageRange = api.ageRange.getAll.useQuery(); const surface = api.surface.getAll.useQuery(); full code https://github.com/mhenke/omaha-playground-collective/blob/vercel/src/app/_components/Feature.tsx
GitHub
omaha-playground-collective/src/app/_components/Feature.tsx at verc...
omaha playground collective. Contribute to mhenke/omaha-playground-collective development by creating an account on GitHub.
No description
No description
4 Replies
cje
cje7mo ago
That component is outside of the tRPC provider
mikehenke
mikehenke7mo ago
Great, next noob question. How do you recommend getting inside the tRPC provider? I'm guessing moving the file to app folder maybe
cje
cje7mo ago
look in your layout.tsx just make the provider the outermost thing
mikehenke
mikehenke7mo ago
Sweet!!! Worked. Do you recommend refactoring so I don't have to move <TRPCReactProvider> or is this common?