It seems the flow is not rendering your questions correctly due to potential issues with the query fetching the `questions` array. Here's a checklist to diagnose and fix the issue: 1. **Check API Response Structure**: - Ensure your server API returns the poll with its associated questions in the same response. - Inspect the API at `GET /api/polls/${pollId}`. It should return both the poll data and `questions` as nested objects to ensure the `questions` field is part of the response. 2. **Inspect Query Key and Fetching**: - Since you're fetching poll data and questions separately (`queryKey: ["/api/polls", pollId]` and `queryKey: ["/api/polls", pollId, "questions"]`), this could be a conflicting approach because the data might be incomplete by the time you try to access it. - Instead, combine the queries if the endpoint returns both poll and questions in one call. You can modify the fetching logic to use a single query that combines poll and questions: ```tsx const { data: pollData, isLoading, error } = useQuery<Poll & { questions: PollQuestion[] }>({ queryKey: [`/api/polls/${pollId}`], enabled: !!pollId, }); ``` In this case, your backend should return the schema that includes `questions` with the poll data (as part of a single object). 3. **Handle Undefined Data**: - Carefully check if both `poll` and `questions` are successfully loaded. Here's how you can check: ```tsx if (!pollData || !pollData.questions || pollData.questions.length === 0) { return <div>{t("Poll not found or no questions available", "الاستطلاع غير موجود أو لا توجد أسئلة متاحة")}</div>; } const questions = pollData.questions; ``` This ensures that the question data is present before you try to access it in the rest of your page. 4. **Question Rendering Logic**: Based on the question type (`pollTypeId`), you filter out the specific input type for each question: ```tsx const renderQuestionInput = () => { switch (currentQuestion.pollTypeId) { case 1: // Range return ( <RadioGroup value={answers[currentQuestion.id] as string} onValueChange={(value) => handleAnswer(value)} className="flex justify-between space-x-4" > {[1, 2, 3, 4, 5].map((value) => ( <div key={value} className="flex flex-col items-center"> <RadioGroupItem value={value.toString()} id={`rating-${value}`} /> <Label htmlFor={`rating-${value}`}>{value}</Label> </div> ))} </RadioGroup> ); case 2: // YesNo return ( <RadioGroup value={answers[currentQuestion.id] as string} onValueChange={(value) => handleAnswer(value as YesNoAnswer)} className="space-y-4" > {/* Yes/No/Maybe options */} </RadioGroup> ); case 3: // MultipleChoice const selectedOptions = (answers[currentQuestion.id] as string[]) || []; return ( <div className="space-y-4"> {currentQuestion.options?.map((option, index) => ( <div key={index} className="flex items-center space-x-2"> <Checkbox id={`option-${index}`} checked={selectedOptions.includes(option)} onCheckedChange={(checked) => { const newSelected = checked ? [...selectedOptions, option] : selectedOptions.filter((opt) => opt !== option); handleAnswer(newSelected); }} /> <Label htmlFor={`option-${index}`}>{option}</Label> </div> ))} </div> ); default: return null; } }; ``` 5. **Ensure the Backend is Sending Questions**: - Verify that the backend is sending `questions` field along with the poll object. For example: ```json { "id": 1, "title": "Poll Title", "description": "Poll Description", "questions": [ { "id": 1, "question": "What is your favorite color?", "pollTypeId": 1 }, { "id": 2, "question": "Are you happy?", "pollTypeId": 2 } ] } ``` By improving the query structure and rendering the question logic properly based on the question types, this should enable the correct feature functionality for your poll submission page. Additionally, ensure you’re calling the backend correctly and providing a consistent format from the API response. for 56 seconds
The most common issue here is that you’re using two separate queries—one for the poll and one for its questions—but your API endpoint (or your database schema) already returns the questions nested inside the poll. As a result, your questions query (using the key ["/api/polls", pollId, "questions"]) may be returning an empty array or undefined, so your question logic isn’t rendering.

To fix this, you can combine the two queries into one. For example, if your GET /api/polls/:id endpoint returns a poll object with a nested questions array, change your query code to something like this:

tsx
Copy
const { data: pollData, isLoading, error } = useQuery<Poll & { questions: PollQuestion[] }>({
  queryKey: [`/api/polls/${pollId}`],
  enabled: !!pollId,
});
Then later use:

tsx
Copy
if (isLoading) {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <Loader2 className="h-8 w-8 animate-spin mr-2" />
      <p>{t("Loading...", "جاري التحميل...")}</p>
    </div>
  );
}

if (error || !pollData || !pollData.questions || pollData.questions.length === 0) {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <p>{t("Poll not found or no questions available", "الاستطلاع غير موجود أو لا توجد أسئلة متاحة")}</p>
    </div>
  );
}

const poll = pollData;
const questions = pollData.questions;
This way, you only fetch once and have both the poll and its questions available. Now your renderQuestionInput() function will correctly operate on the actual questions.

Make sure your backend endpoint for GET /api/polls/:id returns the poll with its questions (for example, by joining the polls and poll_questions tables).