TTC
Theo's Typesafe Cultgxp91

tRPC Error: Invalid hook call.

Sorry for the noob question I just cant figure out how to do this I have the following tRPC route: export const appsRouter = createTRPCRouter({ search: publicProcedure.input(z.string()).query(async ({ input, ctx }) => { console.log("input", input); return await ctx.prisma.app.findMany({ where: { name: { search: input, }, }, }); }), getAll: publicProcedure.query(async ({ ctx }) => { return await ctx.prisma.app.findMany(); }), }); I am trying to call the search route from a function in my home page but it keeps throwing Invalid Hook call. I tried wrapping it in React.useEffect but still get the same error: const data = api.appsRouter.getAll.useQuery().data; const [apps, setApps] = React.useState<Array<AppType>>(); const [searchTerm, setSearchTerm] = React.useState<string>(""); React.useEffect(() => { if(data){ setApps(data); } }, [data]); React.useEffect(() => { if(searchTerm){ const filteredData = api.appsRouter.search.useQuery(searchTerm).data; if(filteredData){ setApps(filteredData); } } else { setApps(data); } }, [searchTerm, data]);
const [showLimit, setShowLimit] = React.useState(8); const handleSearch = (search: string) => { setSearchTerm(search); }
W
whatplan•378d ago
hooks must only be called at the top level and never conditionally (they should run every time, in the same order) also you shouldnt be creating local proxy state that just shadows the query just use data from the query and derive whatever you need from it just in a variable 
function foo({id}) {
  const { data } = api.appsRouter.search.useQuery(searchTerm);

  const filteredData = data.filter((x) => x == id)

  return (
    {filteredData.map((item) => <p>{item.name}</p>)}
  )
}
function foo({id}) {
  const { data } = api.appsRouter.search.useQuery(searchTerm);

  const filteredData = data.filter((x) => x == id)

  return (
    {filteredData.map((item) => <p>{item.name}</p>)}
  )
}
should follow this kind of pattern
G
gxp91•378d ago
I was trying to offload the search compute to the database server for "filtering" I had some logic for fuzzy search on the client side but was really interested to see if it was possible to dynamically call aa tRPC route based on a client event i.e onClick/onKeyPress similar to an async function calling await fetch is there a pattern I can use to make that possible because there will be some upcoming component work that will need something similar. I was looking into building dynamic page routes i.e feed the data to the url and then render the whole page that way but it seemed inefficient.
W
whatplan•377d ago
Use a mutation Call mutate within the event handler I can write an example later if you want
C
cje•377d ago
https://stackoverflow.com/questions/74830632/trpc-invalid-hook-call-in-react-function-component/75420436#75420436
Stack Overflow
tRPC invalid hook call in react function component
I am trying to create a new user when the user connects to the site with their wallet. When the user clicks the button to connect, the useAccount hook will return an address of type string. I then ...
G
gxp91•377d ago
ahhh ok sorry i thought mutations were just when you modify data but i see now I was mistaken. Thanks for the answer!
G
gxp91•377d ago
also thank you @cje for the example
Want results from more Discord servers?
Add your server
More Posts
Stack?Hey how would I go about creating a website where you can post minecraft servers and include a imageHow would I order by the role?Hello, I'm trying to set up an API, where I return some users. I've got it working, where it returnsPrisma Create with Connect IssueHey! I wasn't able to find another thread explaining this, but I'd love help with this! I have twoGenerating image background jobI'm making a game where you can create levels in HTML5 Canvas and upload them to the api. I will neeHelp with Vercel deploymentHi folks, I am having issues deploying to vercel. I keep getting this error:My DB shouldn’t be this slow, RIGHT❓A fresh DB (pscale) and Table with just two entries, but takes 10s to fetch them (prisma studio) I’❌ tRPC failed on profile.getUserByUsername: No "query"-procedure on path "profile.getUserByUsername"I am a bit lost. This is the profileRouter. export const profileRouter = createTRPCRouter({ getUHelp with Prisma Validator static evaluationI am trying to build a helper function that will allow me to abstract away some deeply nested includDoes invalidate(); perform an actual refetch?I am half way into the course video and I see `void ctx.post.getAll.invalidate();` to show the new pSWR - array of data in one request, one item from array in anotherSo I am using SWR in my nextJS app and I have two routes GET `/courses` gets all classes you are enClerk re-render parent server component on sign out with custom sign out button.Hi I'm probably being a little stupid here but I'm just wondering what the best and most simple way Prisma schema questionHow can I efficiently maintain a user's balance in a database given the following prisma schema, wheT3 Firebase solution? (SMS OTP Auth)I know I know, we love Auth.js and Clerk. But there's a problem when it comes to SMS authentication.How do I make Jotai work with trpc on the t3 stack?I am having trouble finding ways to work with Jotai and trpc on nextjs.Any recommend open source react project?I am trying to optimize the project of company. It is like a CRUD based shopping web. I do use tanstRendering a blob in NextjsI am having difficulties rendering an image which is restored in form as link and when i console.logWhat's the difference between React.ComponentProps and React.PropsWithChildren ?I just saw someone post something on youtube but didnt't really explain it. Whats the difference benextra with tailwindcssthrough the uploadthings docs i found out about nextra ... i would like to use tailwind but i cant gHow to use next-auth/clerk.js for getting user session```ts /** server/uploadthing.ts */ import { createFilething, type FileRouter } from "uploadthing/serError with mdx file webpack parserI am trying to integrate an MDX files that I want blog articles in. I have a component <ArticleLayou