hey guys ! I wanted to switch from
hey guys ! I wanted to switch from mongoDB to convex on my app and my app is currently using tanstack query. I seen on the doc that we can use tanstack query with convex, but is it usefull ?
16 Replies
It doesn't add any functionality, just allows you to use the tanstack query style api with Convex if you prefer it.
Ok thanks that is what I was understanding. I also have another question, this time an issue.
I switched my hooks to use directly convex, and I use mutations to add/update data, like this for example: const createClient = useMutation(api.mutations.createClient)
but when I call this function nothing happens (no data on the console, no data on the client side). Is this because my hook work on client side ? if not, do you have some informations that could help me find the error ? Thanks for helping me, I've been stuck in this for a whole 2 days
The hook would have to be run from a client component
There's also fetchMutation for server side: https://docs.convex.dev/api/modules/nextjs#fetchmutation
I am ok using on the client side, I just don't understand why the function is not even called
I have this function on convex/mutation.ts:
export const createClient = mutation({
args: { name: v.string() },
handler: async (ctx, args) => {
console.log('Creating client with args:', args)
try {
const clientId = await ctx.db.insert('clients', {
name: args.name,
})
console.log('Client created with ID:', clientId)
return clientId
} catch (error) {
console.error('Error in createClient mutation:', error)
throw new Error(
Failed to create client: ${error})
}
},
})
is this the right configuration ?Yep that would work, and you'd get likely get type errors if not
Can you share the code you're running to call the function?
(To be super clear,
useMutation from convex/react returns a function that you can call from the client to trigger your mutation, e.g. in a event handler, it does not actually call the mutation itself)this ismy hook for using the client object,
and I call it on a modal to add it, like that:
const { createClient } = useClients()
createClient({name: formData.Chateau as string })
so what do you think about this implementation ?
You have some logs in createClient, what’s printing in the browser console when you call it?
the console log before the try catch is working:
Creating client with variables: Object name: "eeeee"
and same for the alert oppening on the loading state
but after that I have nothing going on
i also tried a console.log inside the try catch before the convex mutation call and it works too
and no sucess or error log/alert
and there is no log coming from the mutation function inside convex
the thing I don't understand is that my config is working perfectly for read functions but not mutations
also, my convex folder is on my repo but outside the /src directory, could it be the root of the issue ?
Ok I tried some things and I can tell you more about the issue.
The read functions are not working too when using the hook, but work when I use it directly on my components.
And now I also tried using mutations on my component directly and it doesn't work either.
So:
- read only: works on components directly but not when using the hook I created
- mutations: does not work either way
Yeah I would start with testing directly without an intermediate hook while you're troubleshooting
so when you call the mutation directly in a component, is the logging the same as you described above
Do you have
npx convex dev running?yes, but no log inside
for the mutation, now that I added it directly on the component I have that:
console.log('formData', formData)
createClient({ name: formData.Chateau as string })
and it is sending me a good log: formData {Chateau: 'eee'}
but after that there is nothing
I don't see where formData is logged, is that from the mutation itself
no it is from the console.log just before the createClient function, as I showed
if you want I even made it simpler by directly creating a false client when clicking on the "AddItemButton" inside my sidebar. and it is still not working
hey guys, could it be because I don't use the Nextjs app router for exposing an API ?