Apollo Service gql query by state value?

Добрый день, только начинаю изучать react и столкнулся с такой проблемой что не совсем понимаю как из state передать значение в gql?

class GalleriesPage extends Component {

  modal = {
    openPortal : () => null
  };

  state = {
    modalTitle           : '',
    currentLightboxIndex : 0
  };

  showPortal = (index, title) => () => {
    this.setState({
      modalTitle : title,
      currentLightboxIndex : index
    }, () => {
      setTimeout(() => {
        this.props.galleryData.updateQuery({ variables: { id: this.state.currentLightboxIndex }});
        this.modal.openPortal();
      }, 500)
    })
  };

  closeLightbox = (index) => () => {
    this.modal.closePortal();

  };

  render() {
    const { galleriesData : { albums } } = this.props;
    console.log(this.props);
    const activeAlbumId = this.state.currentLightboxIndex;

    return (
      <div className="galleries-page__galleries">
      {!!albums && (
      <div className="max-width">
      <div className="galleries-header">
        <h2 className="galleries-title"><FormattedMessage id="galleries.title"/></h2>
        <SocialsInfo/>
      </div>
      <div className="galleries-list" id="galleries-list">
       
        {albums.edges.map((item, i) => {
         
          return (
              <div className="galleries-list__item" 
                onClick={this.showPortal(item.node.id, item.node.title)}
                style={{ backgroundImage : `url(${item.node.photos[0].url})` }} 
                key={i}
              >
                    <div className="galleries-list__item_header">
                        <span>{item.node.count} <FormattedMessage id="galleries.photo_count"/></span>
                    </div>
                    <div className="galleries-list__item_footer">
                        <div className="galleries-list__item_title">
                            {item.node.title}
                        </div>
                    </div>
          </div>
            
          )
        })}
      </div>
        <div id="gallery-list">
      <GalleryPortal  portalRef={ref => this.modal = ref}>
            
        <div>
          
          <div className="gallery-header">
              <div className="max-width">
                  <h2 className="gallery-title">
                      {this.state.modalTitle}
                  </h2>
                  <div className="gallery-share">
                      <div className="button-go-to" onClick={this.closeLightbox()}>
                          <Icon name="icon-chevron-circle-left"/>
                          <span className="button-go-to__text">
                            <FormattedMessage id="gallery_page.back_to"/>
                          </span>
                      </div>
                      <SocialsInfo/>
                  </div>
              </div>
              <ProgressBar />
          </div>

          <div className="gallery-backlink" onClick={this.closeLightbox()}>
              <div className="button-go-to">
                  <Icon name="icon-chevron-circle-left"/>
                  <span className="button-go-to__text">
                    <FormattedMessage id="gallery_page.back"/>
                  </span>
              </div>
          </div>
          <div>
      {/*<GalleryPage {...this.props} albumId={activeAlbumId}/>*/}
          </div>
        </div>
          
      </GalleryPortal>

      </div>
      </div>)}
      </div>
  
    )
  }
}

GalleriesPage = compose(
  graphqlLocale(Query.albums.query, {
    name    : 'galleriesData',
    options : props => {
      return {
        variables : {
          first  : 10,
          after  : null,
          before : null,
          last   : null
        }
      }
    }
  }),
  graphqlLocale(Query.album.query, {
    name    : 'galleryData',
    options : props => {
      return {
        variables : {
          id  : null,
        }
      }
    },
  })
)(GalleriesPage); 



export default GalleriesPage;

То есть по клику я в state пытаюсь передать "galleries_id" в variables => id