How to use the urql.mutation function in urql

this.setState({ ...initialState, submitted: true })

    const sender = electron.ipcRenderer || false

    if (!sender) {
      return
    }

    // Refresh the main window to reflect the change
    sender.send('reload-main')

    return false
  }
}

const AddPerson = mutation(gql`
  mutation(
    $firstName: String!
    $lastName: String
    $placeId: ID
    $timezone: String
    $photoUrl: String
    $twitterHandle: String
    $photoCloudObject: String
  ) {
    addManualPerson(
      firstName: $firstName
      lastName: $lastName
      placeId: $placeId
      timezone: $timezone
      photoUrl: $photoUrl
      twitterHandle: $twitterHandle

<input value="{name}" placeholder="Find by name or username">
        

        
          
            {({ data, followUser }) =&gt;
              // Instantly hide the list if input was cleared
              name.trim() &amp;&amp;
              data &amp;&amp;
              data.allUsersByName &amp;&amp;
              data.allUsersByName.map(item =&gt; (
                 this.userPicked(item, followUser)}
                  {...item}
                /&gt;
              ))
            }

export default Toolbar

const User = query(gql`
  query {
    user {
      id
      displayFormat
      email
      firstName
      timezone
      city
    }
  }
`)

const SortFollowings = mutation(gql`
  mutation($peopleIds: [ID!], $placesIds: [ID!]) {
    sortFollowings(peopleIds: $peopleIds, placesIds: $placesIds) {
      people {
        id
      }
      places {
        id
      }
    }
  }
`)

// Variables
const spacing = p => p.theme.sizes.sidePadding
const lessSpacing = p => p.theme.sizes.sidePadding - 4
const iconBtnNormalPadding = 6 /* Used for all spacing, except the last item which has the global sidePadding */

if (!sender) {
      return
    }

    // Refresh the main window to reflect the change
    sender.send('reload-main')

    showMainWhenReady()
    closeWindow()

    return false
  }
}

const UpdatePerson = mutation(gql`
  mutation(
    $id: ID!
    $firstName: String!
    $lastName: String
    $placeId: ID
    $timezone: String
    $photoUrl: String
    $twitterHandle: String
    $photoCloudObject: String
  ) {
    updateManualPerson(
      id: $id
      firstName: $firstName
      lastName: $lastName
      placeId: $placeId
      timezone: $timezone

mutation($userId: ID!) {
    unfollow(userId: $userId) {
      id
    }
  }
`)

const RemoveManualPerson = mutation(`#graphql
  mutation($id: ID!) {
    removeManualPerson(id: $id) {
      id
    }
  }
`)

const RemoveManualPlace = mutation(`#graphql
  mutation($id: ID!) {
    removeManualPlace(id: $id) {
      id
    }
  }
`)

const PinUser = mutation(`#graphql
  mutation($userId: ID!) {
    pinUser(userId: $userId) {
      userId 
    }
  }
`)

const PinManualPerson = mutation(`#graphql

mutation($id: ID!) {
    pinManualPerson(id: $id) {
      pinned
    }
  }
`)

const PinManualPlace = mutation(`#graphql
  mutation($id: ID!) {
    pinManualPlace(id: $id) {
      pinned
    }
  }
`)

const UnpinUser = mutation(`#graphql
  mutation($userId: ID!) {
    unpinUser(userId: $userId) {
      userId 
    }
  }
`)

const UnpinManualPerson = mutation(`#graphql
  mutation($id: ID!) {
    unpinManualPerson(id: $id) {
      pinned
    }
  }
`)

const UnpinManualPlace = mutation(`#graphql

mutation($userId: ID!) {
    unpinUser(userId: $userId) {
      userId 
    }
  }
`)

const UnpinManualPerson = mutation(`#graphql
  mutation($id: ID!) {
    unpinManualPerson(id: $id) {
      pinned
    }
  }
`)

const UnpinManualPlace = mutation(`#graphql
  mutation($id: ID!) {
    unpinManualPlace(id: $id) {
      pinned
    }
  }
`)

export default ConnectHOC({
  mutation: {
    unfollow: Unfollow,
    removeManualPerson: RemoveManualPerson,
    removeManualPlace: RemoveManualPlace,

    pinUser: PinUser,
    pinManualPerson: PinManualPerson,
    pinManualPlace: PinManualPlace,

return
    }

    sender.send('open-following-menu', { id, __typename }, { x, y })
  }
}

const Unfollow = mutation(`#graphql
  mutation($userId: ID!) {
    unfollow(userId: $userId) {
      id
    }
  }
`)

const RemoveManualPerson = mutation(`#graphql
  mutation($id: ID!) {
    removeManualPerson(id: $id) {
      id
    }
  }
`)

const RemoveManualPlace = mutation(`#graphql
  mutation($id: ID!) {
    removeManualPlace(id: $id) {
      id
    }
  }
`)

const PinUser = mutation(`#graphql

)
          }}
        
      
    )
  }

  policyChanged = async (e, updatePolicy) => {
    const newPolicy = e.target.checked ? 'never' : 'always'
    await updatePolicy({ newPolicy })
    reloadMain()
  }
}

const UpdateLocation = mutation(gql`
  mutation($placeId: ID!) {
    updateLocationAndTimezone(placeId: $placeId) {
      id
      city
      timezone
    }
  }
`)

const User = query(gql`
  query {
    user {
      id
      city
      fullLocation
      showLocationPolicy

mutation($id: ID!) {
    pinManualPlace(id: $id) {
      pinned
    }
  }
`)

const UnpinUser = mutation(`#graphql
  mutation($userId: ID!) {
    unpinUser(userId: $userId) {
      userId 
    }
  }
`)

const UnpinManualPerson = mutation(`#graphql
  mutation($id: ID!) {
    unpinManualPerson(id: $id) {
      pinned
    }
  }
`)

const UnpinManualPlace = mutation(`#graphql
  mutation($id: ID!) {
    unpinManualPlace(id: $id) {
      pinned
    }
  }
`)

export default ConnectHOC({