AutoMate/frontend/components/Port.js

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

const CONNECT_PORT = gql`
  mutation CONNECT_PORT($interfaceName: String!, $device: String!) {
    connect(interfaceName: $interfaceName, device: $device) {
      id
      device
      interfaceName
    }
  }
`

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

export default Port