Silver-Spy•17mo ago

Function undefined is not a supported Convex type.(Next js )

Hey i was just playing around to understand convex properly and i ran into this error for creating a simple todo list. I get undefined even though in convex dashboard i can see data being updated. Here is my todos.ts:

import { mutation, query } from "./_generated/server";
import { v } from "convex/values";


export const createTodos = mutation({
    args:{text:v.string()},
    handler: async (ctx,args)=>{
        await ctx.db.insert('todos',{
            text:args.text
        })
    }
})

export const getTodos = query({
    handler:async (ctx)=>{
        return ctx.db.query('todos').collect
    }
})

import { mutation, query } from "./_generated/server";
import { v } from "convex/values";


export const createTodos = mutation({
    args:{text:v.string()},
    handler: async (ctx,args)=>{
        await ctx.db.insert('todos',{
            text:args.text
        })
    }
})

export const getTodos = query({
    handler:async (ctx)=>{
        return ctx.db.query('todos').collect
    }
})

And this is my page.tsx

'use client';
import { useMutation, useQuery } from 'convex/react';
import { useState } from 'react';
import { api } from '../../convex/_generated/api';

export default function Home() {
  const [text, setText] = useState('');
  const createTodos = useMutation(api?.todos.createTodos);
  const todos = useQuery(api.*todos.getTodos);

  const handleSubmit = (e) => {
    e.preventDefault();
    createTodos({ text });
  };
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        {todos?.map((todo) => (
          <div key={todo._id}>
            <div>{todo.text}</div>
          </div>
        ))}
        <form className="text-black" onSubmit={handleSubmit}>
          <input onChange={(e) => setText(e.target.value)} />
          <button>Submit</button>
        </form>
      </div>
    </main>
  );
}

'use client';
import { useMutation, useQuery } from 'convex/react';
import { useState } from 'react';
import { api } from '../../convex/_generated/api';

export default function Home() {
  const [text, setText] = useState('');
  const createTodos = useMutation(api?.todos.createTodos);
  const todos = useQuery(api.*todos.getTodos);

  const handleSubmit = (e) => {
    e.preventDefault();
    createTodos({ text });
  };
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        {todos?.map((todo) => (
          <div key={todo._id}>
            <div>{todo.text}</div>
          </div>
        ))}
        <form className="text-black" onSubmit={handleSubmit}>
          <input onChange={(e) => setText(e.target.value)} />
          <button>Submit</button>
        </form>
      </div>
    </main>
  );
}

1 Reply

Silver-SpyOP•17mo ago

i made a simple typo. To resolve the issue you need to make sure you close the function Problem

return ctx.db.query('todos').collect

return ctx.db.query('todos').collect

Solution

return ctx.db.query('todos').collect()

return ctx.db.query('todos').collect()

I will leave it here if anyone else has the same issue and might refer to it Issue resolved

Function undefined is not a supported Convex type.(Next js )

Did you find this page helpful?