Добрый день, только начинаю изучать 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