TRPC useQuery() in NextJS full stack with TypeScript
Hi, I'm relatively new to web dev in general and just trying to get to grips with using TRPC so please bear with me! I've set up a NextJS fullstack app in TypeScript, using Kinde and MongoDB. I've managed to get TRPC to add a user to the database from the frontend. So the setup of TRPC throughout the app should in theory be fine. However I cannot seem to get the useQuery() hook to retrieve users.
The frontend code is as follows:
The backend method is:
The console.log() marked "backend data" returns an array of user objects, so the call is being made, and the database is returning the list. However, the frontend returns undefined. So somewhere in between it's not passing the value.
I've been getting this error throughout (even when using the addUser method, which works), which I've been unable to diagnose but I imagine it's the culprit:
⨯ Error: No response is returned from route handler '/(my filepath)/src/app/api/trpc/[trpc]/route.ts'. Ensure you return a
My handler is as follows:
const handler = (req: Request) => {
fetchRequestHandler({
endpoint: '/api/trpc',
req,
router: appRouter,
createContext: () => ({}),
})
}
export { handler as GET, handler as POST }`
Any help at all would be so so very much appreciated. Thank you
The frontend code is as follows:
const {data: userData} = trpc.getUsers.useQuery();
let users = userData ? userData.data : [];
if (users !== undefined) {
console.log("users", users)
} const {data: userData} = trpc.getUsers.useQuery();
let users = userData ? userData.data : [];
if (users !== undefined) {
console.log("users", users)
}The backend method is:
getUsers: privateProcedure
.query(async ({ ctx }) => {
try{
const { userEmail } = ctx;
await dbConnect();
const foundUser = await userModel.findOne({ email: userEmail });
if (!foundUser) throw new TRPCError({ code: "UNAUTHORIZED" })
const users = await userModel.find({ team: foundUser.team });
// console.log("backend data: ", users)
return {
data: users, status: 200, success: true
};
} catch (err) {
console.log(err)
return { data: [], status: 500, success: false };
}
})getUsers: privateProcedure
.query(async ({ ctx }) => {
try{
const { userEmail } = ctx;
await dbConnect();
const foundUser = await userModel.findOne({ email: userEmail });
if (!foundUser) throw new TRPCError({ code: "UNAUTHORIZED" })
const users = await userModel.find({ team: foundUser.team });
// console.log("backend data: ", users)
return {
data: users, status: 200, success: true
};
} catch (err) {
console.log(err)
return { data: [], status: 500, success: false };
}
})The console.log() marked "backend data" returns an array of user objects, so the call is being made, and the database is returning the list. However, the frontend returns undefined. So somewhere in between it's not passing the value.
I've been getting this error throughout (even when using the addUser method, which works), which I've been unable to diagnose but I imagine it's the culprit:
⨯ Error: No response is returned from route handler '/(my filepath)/src/app/api/trpc/[trpc]/route.ts'. Ensure you return a
ResponseResponse or a NextResponseNextResponse in all branches of your handler.My handler is as follows:
const handler = (req: Request) => {
fetchRequestHandler({
endpoint: '/api/trpc',
req,
router: appRouter,
createContext: () => ({}),
})
}
export { handler as GET, handler as POST }`
Any help at all would be so so very much appreciated. Thank you
