Connecting backend to frontend and facing issues with convex
Hi I am trying to send the request to make it appear on the frontend, but it is not agreeing with convex and we need help debugging.
9 Replies
Can you share any error messages / logs from your browser console and your convex dashboard logs page?
const getRecords = useQuery(cropToFarmer, { farmer_id: farmerId }); // Pass function reference, not string
in this? What should we be passing in the useQuery function.
this is what we are sending to the frontend:
export const cropToFarmer = query({
args: { farmer_id: v.string() },
handler: async (ctx, args) => {
// Step 1: Get all crops for the farmer
const crops = await ctx.db.query("crops").filter(q => q.eq("farmer_id", args.farmer_id)).collect();
const cropIds = crops.map(crop => crop.crop_id);
// Step 2: Get all sensors related to those crops const sensors = await ctx.db.query("sensors").filter(q => cropIds.includes(q.field("crop_id"))).collect(); const sensorIds = sensors.map(sensor => sensor.sensor_id);
// Step 3: Fetch all records related to the sensor ids const records = await ctx.db.query("records").filter(q => sensorIds.includes(q.field("sensor_id"))).collect();
// Returning the records return records; }, }); but in this: function CropDashboard({ farmerId }: CropDashboardProps) { // Fetch records from the Convex backend for the given farmerId const getRecords = useQuery(cropToFarmer, { farmer_id: farmerId }); // Pass function reference, not string
const [crops, setCrops] = useState<Record[]>([]); // Using Record type useEffect(() => { if (getRecords) { // Update the crop data based on the records fetched const updatedCrops = getRecords.map(record => ({ name:
// Step 2: Get all sensors related to those crops const sensors = await ctx.db.query("sensors").filter(q => cropIds.includes(q.field("crop_id"))).collect(); const sensorIds = sensors.map(sensor => sensor.sensor_id);
// Step 3: Fetch all records related to the sensor ids const records = await ctx.db.query("records").filter(q => sensorIds.includes(q.field("sensor_id"))).collect();
// Returning the records return records; }, }); but in this: function CropDashboard({ farmerId }: CropDashboardProps) { // Fetch records from the Convex backend for the given farmerId const getRecords = useQuery(cropToFarmer, { farmer_id: farmerId }); // Pass function reference, not string
const [crops, setCrops] = useState<Record[]>([]); // Using Record type useEffect(() => { if (getRecords) { // Update the crop data based on the records fetched const updatedCrops = getRecords.map(record => ({ name:
Sensor ${record.sensor_id},
humidity: ${record.humidity}%,
temp: ${record.temp}°C,
uvi: ${record.uv} (Moderate),
}));
setCrops(updatedCrops);
}
}, [getRecords]);
the cropToFarmer and record field are giving the errors:
Argument of type 'RegisteredQuery<"public", { farmer_id: string; }, Promise<any[]>>' is not assignable to parameter of type 'FunctionReference<"query">'.ts(2345)
which i believe is due to the convex
We can also hop onto a zoom call if that is easier. I think that this is not a hard fix, just me and the mentors dont know how convex works to make this workYeah you want something like
useQuery(api.fileName.cropToFarmer, { farmerId })What api.fileName should be we referencing to?
Where
api comes from the _generated/api file in your convex directory and fileName is the file (or file path) that your convex function is defined in
Like in https://docs.convex.dev/quickstart/react, the get function is in convex/tasks.ts so we call it with useQuery(api.tasks.get)Now, I am getting this error:
chunk-6BKLQ22S.js?v=61ceaea8:19413 Uncaught Error: [CONVEX Q(myFunctions:cropToFarmer)] [Request ID: 5f483ecd52308dc5] Server Error
Could not find public function for 'myFunctions:cropToFarmer'. Did you forget to run
npx convex dev or npx convex deploy?
Called by client
at OptimisticQueryResults.queryResult (convex_react.js?v=61ceaea8:684:13)
at BaseConvexClient.localQueryResult (convex_react.js?v=61ceaea8:1952:40)
at Object.localQueryResult (convex_react.js?v=61ceaea8:2348:34)
at QueriesObserver.getLocalResults (convex_react.js?v=61ceaea8:2578:23)
at getCurrentValue (convex_react.js?v=61ceaea8:2709:25)
at convex_react.js?v=61ceaea8:2668:23
at basicStateReducer (chunk-6BKLQ22S.js?v=61ceaea8:11703:49)
at updateReducer (chunk-6BKLQ22S.js?v=61ceaea8:11794:30)
at updateState (chunk-6BKLQ22S.js?v=61ceaea8:12021:18)
at Object.useState (chunk-6BKLQ22S.js?v=61ceaea8:12753:24)
here is my main.tsx file:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { ClerkProvider } from '@clerk/clerk-react';
import { ConvexProvider, ConvexReactClient } from "convex/react";
// Initialize the Convex client
const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
// Import your publishable key for Clerk
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
if (!PUBLISHABLE_KEY) {
throw new Error("Missing Clerk Publishable Key");
}
if (!convex) {
throw new Error("Convex client failed to initialize");
}
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
{/* Wrap your app in both ConvexProvider and ClerkProvider */}
<ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
<ConvexProvider client={convex}>
<App />
</ConvexProvider>
</ClerkProvider>
</React.StrictMode>
);Make sure you have npx convex dev running somewhere and that it’s completed successfully (green checkmark). When it does, you should be able to see your functions under the “Functions” tab in the dashboard
This worked, now I im trying to just add dummy data to see if everything works. I created a dummy.ts file and am placing it in my src file and have this
import { convex } from "./api/convex"; // assuming this is where Convex client is initialized
import call above but it is giving me an error
Cannot find module './api/convex' or its corresponding type declarations.ts(2307)
Is there a directory called api and a file called convex.ts there? This error looks like this file does not exist