gxp91
TTCTheo's Typesafe Cult
•Created by gxp91 on 5/27/2023 in #questions
How to add Headers to tRPC route?
Does anyone know how I can pass custom headers when calling a tRPC route?
I would like to append custom headers when calling one of my routes i.e
import {api} from "~/utils/api";
const myRoute = api.myRouter.myFunc....
So whether its a get or a mutation i would like to append custom headers prior to making the call, does anyone know if this is possible?
17 replies
TTCTheo's Typesafe Cult
•Created by gxp91 on 5/4/2023 in #questions
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); }
const [showLimit, setShowLimit] = React.useState(8); const handleSearch = (search: string) => { setSearchTerm(search); }
15 replies