AutoMate/frontend/components/Port.js

import { Mutation } from 'react-apollo'
import gql from 'graphql-tag'
import { INTERFACES_FULL } from './InterfaceList'

const CONNECT_PORT = gql`
  mutation CONNECT_PORT($portId: ID!) {
    connect(portId: $portId) {
      id
      port {
        interfaceName
        host
        device
        name
        description
      }
    }
  }
`

class Port extends React.Component {
  render () {
    const { id, device, name, description } = this.props.data
    return (
      <Mutation
        mutation={CONNECT_PORT}
        variables={{ portId: id }}
        refetchQueries={[{ query: INTERFACES_FULL }]}
      >
        {connect => (
          <div>
            <h1>{device}</h1>
            <p>Name:</p>
            <p>{name}</p>
            <p>{description}</p>
            <button onClick={connect}>Connect</button>
          </div>
        )}
      </Mutation>
    )
  }
}

export default Port