wise-white

Im trying to create a custom Hook with useMutation

this is my custom hook which im exporting into my todo component, i want to call mutate on the hook via a button click. but the hook returns a promise and mutate is no available, can anyone help? hook

export default async function useUpdateUsers(client: any) {
  return useMutation(
    (newUser: any, client: any) => {
      return axios.post(
        'https://api-for-personal-projects.vercel.app/api/contacts',
        newUser
      )
    },
    {
      onMutate: async (newUser) => {
        // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
        await client.cancelQueries(['users'])

        // Snapshot the previous value
        const previousUsers = client.getQueryData(['users'])

        // Optimistically update to the new value
        client.setQueryData(['users'], (old: any) => [newUser, ...old])

        // Return a context object with the snapshotted value
        return { previousUsers }
      },
      // If the mutation fails, use the context returned from onMutate to roll back
      onError: (err, newUser, context: any) => {
        client.setQueryData(['users'], context.previousUsers)
      },
      // Always refetch after error or success:
      onSettled: () => {
        client.invalidateQueries(['users'])
      }
    }
  )
}

export default async function useUpdateUsers(client: any) {
  return useMutation(
    (newUser: any, client: any) => {
      return axios.post(
        'https://api-for-personal-projects.vercel.app/api/contacts',
        newUser
      )
    },
    {
      onMutate: async (newUser) => {
        // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
        await client.cancelQueries(['users'])

        // Snapshot the previous value
        const previousUsers = client.getQueryData(['users'])

        // Optimistically update to the new value
        client.setQueryData(['users'], (old: any) => [newUser, ...old])

        // Return a context object with the snapshotted value
        return { previousUsers }
      },
      // If the mutation fails, use the context returned from onMutate to roll back
      onError: (err, newUser, context: any) => {
        client.setQueryData(['users'], context.previousUsers)
      },
      // Always refetch after error or success:
      onSettled: () => {
        client.invalidateQueries(['users'])
      }
    }
  )
}

todo component

  <div className={className}>
      <button
        className="my-2 font-bold"
        onClick={() =>
          useUpdateUsers.mutate({
            id: data.slice(0)[0].id + 1, // - get first id and add 1
            firstName: 'davids',
            lastName: 'Adesanya',
            dateOfBirth: '1985-03-15T00:00:00',
            school: 'Torquay Boys',
            phoneNumber: '01803 123456'
          })
        }
      >
        Add User
      </button>

  <div className={className}>
      <button
        className="my-2 font-bold"
        onClick={() =>
          useUpdateUsers.mutate({
            id: data.slice(0)[0].id + 1, // - get first id and add 1
            firstName: 'davids',
            lastName: 'Adesanya',
            dateOfBirth: '1985-03-15T00:00:00',
            school: 'Torquay Boys',
            phoneNumber: '01803 123456'
          })
        }
      >
        Add User
      </button>