Abhishek
Abhishek•8mo ago

Unable to Fetch Data Using useQuery in Convex

Hi , I'm having trouble fetching data from my Convex database using the useQuery hook. I'm currently working on a TodoList component in a Next.js project and unable to get any data from the database, and in database todos table is not empty. Here’s the code I’m using: 
"use client";
import React from 'react';
import { Checkbox } from "@/components/ui/checkbox";
import { useQuery } from 'convex/react';
import { api } from '../../../convex/_generated/api';

const TodoList = () => {
  const todos = useQuery(api.todos.get) || [];

  if (todos === undefined) {
    return <p>Loading...</p>;
  }

  console.log(todos);

  return (
    <div className="xl:px-10">
      <div className='flex justify-between'>
        <h1 className='text-lg font-semibold md:text-2xl'>Inbox</h1>
      </div>

      <div className='flex flex-col gap-4 p-4 lg:px-8'>
        {todos.map(({ taskName }, idx) => (
          <div key={idx}>
            <Checkbox id={`todo-${idx}`} />
            <label
              htmlFor={`todo-${idx}`}
              className="mx-4 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              {taskName}
            </label>
          </div>
        ))}
      </div>
    </div>
  );
}

export default TodoList;
"use client";
import React from 'react';
import { Checkbox } from "@/components/ui/checkbox";
import { useQuery } from 'convex/react';
import { api } from '../../../convex/_generated/api';

const TodoList = () => {
  const todos = useQuery(api.todos.get) || [];

  if (todos === undefined) {
    return <p>Loading...</p>;
  }

  console.log(todos);

  return (
    <div className="xl:px-10">
      <div className='flex justify-between'>
        <h1 className='text-lg font-semibold md:text-2xl'>Inbox</h1>
      </div>

      <div className='flex flex-col gap-4 p-4 lg:px-8'>
        {todos.map(({ taskName }, idx) => (
          <div key={idx}>
            <Checkbox id={`todo-${idx}`} />
            <label
              htmlFor={`todo-${idx}`}
              className="mx-4 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              {taskName}
            </label>
          </div>
        ))}
      </div>
    </div>
  );
}

export default TodoList;
And the todos.ts file is 
import { query } from "./_generated/server";

export const get = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("todos").collect();
  },
});
import { query } from "./_generated/server";

export const get = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("todos").collect();
  },
});
Please help me fixing this issue.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?