Mutations with Hooks

mutations.jsx

// HOC approach was first and some still prefer it for whatever reasons
// Along with recompose you can do some real nasty tricks
const MutateMe = graphql(MutationDocument, { name: 'execute' })(({ execute }) => {
  // In comparison it's not a terrible way to execute a mutation
  // But naming the mutation with string 😆
  return <button onClick={() => execute({ variables: { secretName: 'Me' }})} />
})

// Mutation component is fine for simple cases, but gets ugly otherwise
const MutateMe = () => {
  return (
    // It's nice you can name the mutation function however you want...
    <Mutation mutation={MutationDocument}>{execute =>
      <button onClick={() => execute({ variables: { secretName: 'Me' }})} />
    }</Mutation>
}

// And glorified Hooks, I can't help it but it's clear winner in my eyes
const MutateMe = () => {
  // Best of two worlds, you can easily have multiple mutations
  // and name them however you want (without awkward strings) 👌
  const execute = useMutation(MutationDocument)
  return <button onClick={() => execute({ variables: { secretName: 'Me' }})} />
}