Реагируйте на мутацию Apollo, используя MapboxGL Coordinate Click

Question

Я создал приложение реагирования с компонентом Map. js, код которого показан ниже. Я могу использовать компоненты ReactMapGL и Geocoder для создания карты MapboxGL с хорошо работающим компонентом Popup. Однако я хочу, чтобы Apollo включил мутацию в моей конечной точке API GraphQL, когда пользователь нажимает на карту. Приведенный ниже код работает и запускает мутацию, используя «onClick = {createLocation}» в компоненте Mutation, но он использует старые переменные долготы и широты по умолчанию, определенные в состоянии по умолчанию userLocation. Когда пользователь нажимает на карту, я хотел бы отключить handleViewportClick (который задает долготу и широту точки щелчка, который подается в компонент Popup) и запустить мутацию, используя долготу и широту события от щелчка.

Какой-нибудь совет, как я могу по щелчку запустить мутацию, используя координаты события щелчка, и запустить handleViewportClick, чтобы обновить долготу и широту пользователя?

    import React, { Component } from "react";
    import ReactMapGL, { Marker, Popup } from "react-map-gl";
    import Geocoder from 'react-map-gl-geocoder'
    import gql from "graphql-tag";
    import { Mutation } from "react-apollo";
    import 'mapbox-gl/dist/mapbox-gl.css'
    import 'react-map-gl-geocoder/dist/mapbox-gl-geocoder.css'

    const MAPBOX_TOKEN = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';

    const CREATE_LOCATION_MUTATION = gql`
      mutation CreateLocation($name: String!, $latitude: Float!, $longitude: Float!) {
        createLocation(name: $name, latitude: $latitude, longitude: $longitude) {
          name
          longitude
          latitude
        }
      }
    `;

    class Map extends Component {

      state = {
        viewport: {
          width: 400,
          height: 400,
          latitude: 37.7577,
          longitude: -122.4376,
          zoom: 8
        },
        userLocation: {
          name: "DEFAULT_NAME",
          latitude: 37.7577,
          longitude: -122.4376
        }
      };


      mapRef = React.createRef()

      handleViewportChange = (viewport) => {
        this.setState({
          viewport: { ...this.state.viewport, ...viewport }
        })
      }

      handleViewportClick = (event) => {
        this.setState({
            userLocation: {
              name: "NEW_POINT,
              latitude: event.lngLat[1],
              longitude: event.lngLat[0]
           }
        });
      }

      handleGeocoderViewportChange = (viewport) => {
        const geocoderDefaultOverrides = { transitionDuration: 1000 }

        this.setState({
            userLocation: {
              latitude: viewport.latitude,
              longitude: viewport.longitude
           }
          })

        return this.handleViewportChange({
          ...viewport,
          ...geocoderDefaultOverrides
        })
      }

 handleCompleted = data => {

  };

  handleUpdate = (cache, { data }) => {

  };

      render() {
        return (
          <Mutation
            mutation={CREATE_LOCATION_MUTATION}
            variables={this.state.userLocation}
            onCompleted={this.handleCompleted}
            update={this.handleUpdate}>
            {(createLocation, { loading, error }) => {
              return (
                <div className="map_container">
                <ReactMapGL
                    ref={this.mapRef}
                    {...this.state.viewport}
                    width="100vw"
                    height="700px"
                    mapStyle="mapbox://styles/mapbox/outdoors-v11"
                    onViewportChange={this.handleViewportChange}
                    onClick={createLocation}
                    mapboxApiAccessToken={MAPBOX_TOKEN}>
                    <Popup
                      latitude={this.state.userLocation.latitude}
                      longitude={this.state.userLocation.longitude}
                      closeButton={false}
                      closeOnClick={false}
                      anchor="top" >
                      <div>Test</div>
                    </Popup>
                        <Geocoder
                            mapRef={this.mapRef}
                            onViewportChange={this.handleGeocoderViewportChange}
                            mapboxApiAccessToken={MAPBOX_TOKEN}
                            zoom={10}
                        />
                </ReactMapGL>
            </div>
              )
            }}
          </Mutation>
        );
      }
    }

    export default Map;