T
TanStack•16mo ago
constant-blue

[SOLVED] useMutation does not seem to recognize all of my parameters in my function.

Hi, so I'm trying to post form data to the db and I'm having issues. In my api folder, I have a handler function to create an entry: 
export default async function handler(req, res) {
  try {
    const submission = await prisma[req.body.table].create({
      data: req.body.body
        });
        return res.status(200).json(entry);
      } catch (err) {
          console.error(err);
          return res.status(500).end();
        }
  }
export default async function handler(req, res) {
  try {
    const submission = await prisma[req.body.table].create({
      data: req.body.body
        });
        return res.status(200).json(entry);
      } catch (err) {
          console.error(err);
          return res.status(500).end();
        }
  }
Then I have a function utilizing the fetch API for the handler function posted above. 
export async function postToDB(table, data) {
  const res = await fetch('/api/postToDB', {
    method: 'POST',
    headers: {
      'Content-type': 'application/json'
    },
    body: JSON.stringify({
      table: table,
      body: data
    })
  });
  if(!res.ok) throw new Error('Error submitting form data, try again.');
}
export async function postToDB(table, data) {
  const res = await fetch('/api/postToDB', {
    method: 'POST',
    headers: {
      'Content-type': 'application/json'
    },
    body: JSON.stringify({
      table: table,
      body: data
    })
  });
  if(!res.ok) throw new Error('Error submitting form data, try again.');
}
Now in the useMutation, I have this custom hook: 
export function usePostToDB() {
  return useMutation({
    mutationFn: postToDB,
    onSuccess: () => toast.success('Success'),
    onError: () => toast.error('Error: Try again')
  })
}
export function usePostToDB() {
  return useMutation({
    mutationFn: postToDB,
    onSuccess: () => toast.success('Success'),
    onError: () => toast.error('Error: Try again')
  })
}
Now in react-hook-form, when I try to pass in the table name in the onSubmit function like so: 
function onSubmit(data) {
  postToDB('formTable', data)
}
function onSubmit(data) {
  postToDB('formTable', data)
}
I get an error from prisma that says: Encountered an error during creation: {table: 'table-name'}. Invalid prisma.formTable.create() invocation. Argument 'data' is missing. The super perplexing thing is if I use that function that utilized the fetch API in a custom hook without using React Query, then it posts to the db perfectly. Another weird thing is if I change that 
form
form
parameter in that 
JSON.stringify
JSON.stringify
body to 
{form}
{form}
, the error I get then recogizes the second parameter, only it thinks it is empty. I've been stuck on this for days, so any help is appreciated. I thought that maybe prisma didn't play nice with react-query, but I'm not seeing anything that says so in the docs.
5 Replies
crude-lavender
crude-lavender•16mo ago
mutationFn: () => postToDb()
constant-blue
constant-blueOP•16mo ago
I tried this earlier and I got the same error
crude-lavender
crude-lavender•16mo ago
Read the documentation of useMutation.mutationFn
constant-blue
constant-blueOP•16mo ago
I got it to work by moving the “table” parameter to usePostToDB, so the mutationFn changed to (form) => postToDB(table, form); only that’s really not ideal because this hook was used in a lot of places already, and I only wanted to alter the logic to use react query.
constant-blue
constant-blueOP•16mo ago
Thanks for the help @M00LTi For anyone else that faces a similar problem, mutationFn does not take multiple parameters. The workaround is to wrap them in an object. Link: https://tkdodo.eu/blog/mastering-mutations-in-react-query#mutations-only-take-one-argument-for-variables
Mastering Mutations in React Query
Learn all about the concept of performing side effects on the server with React Query.

Did you find this page helpful?