Graphql Mutation, Query with updated variables

Graphql Mutation, Query with updated variables

import React, { Component } from 'react'
import { withApollo, compose, graphql } from 'react-apollo';
import Link from './Link';
import gql from 'graphql-tag';


const GET_SERVICE_QUERY = gql`
  query Service($id: ID) {
    service(id: $id) {
      id
      name
    }
  }
`;

const FEED_SEARCH_QUERY = gql`
  query FeedSearchQuery($filter: String!) {
    feed(filter: $filter) {
      links {
        id
        url
        description
        createdAt
        postedBy {
          id
          name
        }
        votes {
          id
          user {
            id
          }
        }
      }
    }
  }
`

const ADD_EVENT = gql`
  mutation AddEvent($name: String!, $description: String!, $date: EventDateInput!, $place: EventPlaceInput!) {
    addEvent(name: $name, description: $description, date: $date, place: $place) {
      id
      author{
        id
      }
    }
  }
`;

const GET_LOCATION = gql`
  mutation GetLocation($id: ID, $geolocation: GeoJsonInput, $category: String) {
    getLocation(id: $id, geolocation: $geolocation, category: $category) {
      id
      location {
        id
        holder {
          id
        }
        geolocation {
          type
          coordinates
        }
      }
    }
  }
`;

class Search extends Component {
  state = {
    links: [],
    filter: '',
  }
  
   executeSearch = async () => {
    const { filter } = this.state;
    const { filter } = this.props;
    
    const { data } = await client.query({
      query: FEED_SEARCH_QUERY,
      variables: { filter }
    })
    const links = data.feed.links
    this.setState({ links })
  }
  
   onSubmit = (event) => {
    const { history, addEvent, getLocation } = this.props;
    try {
      const { data } = await addEvent({ variables: event });
      getLocation({ variables: { geolocation, id: data && data.addEvent.id, category: 'Event' } });
      message.success('Event create success');
      history.push('/events');
    } catch (err) {
      message.error(`Try again later`);  \\ antd message
      return err;
    }
  };
}

  render() {
    return (
      <div>
        <div>
          Search
          <input
            type="text"
            onChange={e => this.setState({ filter: e.target.value })}
          />
          <button onClick={() => this.executeSearch()}>OK</button>
        </div>
        {this.state.links.map((link, index) => (
          <Link key={link.id} link={link} index={index} />
        ))}
      </div>
    )
  }
  
Search = compose(
  withApollo, // for query
  graphql(GET_SERVICE_QUERY, {
    name: 'service',
    options: (props) => {
      return { variables: { id: props.id } }; // props.id '5c80ca9bb4087808b42b6fe1' - take props from component props on componentWillMount
    }
  }), // for query with variables
  graphql(ADD_EVENT, { name: 'addEvent' }), // for mutation
  graphql(GET_LOCATION, { name: 'getLocation' }),// for mutation
)(EventCreate);

export default Search;