T
TanStack•4y ago
foreign-sapphire

Example for createMutation

Hey! It's my first time using solid-query and I'm searching for an example for createMutation (especially for TS types). Currently I'm doing something like this with solid-query + trpc: 
const mutation = createMutation(({ name }: { name: string }) => {
  return trpc.createTodo.mutate({
    name
  })
})
const mutation = createMutation(({ name }: { name: string }) => {
  return trpc.createTodo.mutate({
    name
  })
})
It works but I'm not sure where I can define the types for the data I pass e.g. name. Is the above code correct? Also, I'm calling it later with mutation.mutate and want to show a message after that. Using await mutation.mutate(..) doesn't seem to work. -> There's mutateAsync for that (https://tanstack.com/query/v4/docs/guides/mutations#promises)
4 Replies
apparent-cyan
apparent-cyan•4y ago
apparent-cyan
apparent-cyan•4y ago
essentially createMutation takes the following type signature 
createMutation<TData, Terror, TVariables>()
createMutation<TData, Terror, TVariables>()
where TData is the type of data you are expecting from a successful mutation TError is the type of error you might expect if the mutation fails and TVariables is the variable you are planning to pass into your mutate and mutateAsync calls createMutation also takes an additional options object. Where you can define an onSuccess and an onError callback. These callbacks will run after you run mutate and when your mutation runs successfully/fails respectively. This is more declarative than the mutateAsync function where you have to handle the error and success payloads manually
foreign-sapphire
foreign-sapphireOP•4y ago
Ah! Thank you very much, Aryan. That helped. I'm using the onSuccess and onError callback now. 😊 Solid-query is just great, thank you for your work! 🥳
apparent-cyan
apparent-cyan•4y ago
No worries at all! Glad you're enjoying using it

Did you find this page helpful?