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