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:
And this is my page.tsx
`
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>
);
}
