I have a component that shows results from a GraphQL query using the react-apollo
decorator syntax. The query accepts a parameter, which I want to set dynamically based on component state.
Consider the following simplified example:
import * as React from ‘react’;
import { graphql } from ‘react-apollo’;
import gql from ‘graphql-tag’;
const myQuery = gql`
query($active: boolean!) {
items(active: $active) {
}
}
`;
@graphql(myQuery)
class MyQueryResultComponent extends React.Component {
public render() {
return <div>
<input type=“checkbox” /* other attributes and bindings */ />
{this.props.data.items}
<div>;
}
}
When the checkbox is clicked I want to resubmit the query, dynamically setting the active
attribute in myQuery
, based on the state of the checkbox. I've omitted the handler and bindings of the checkbox for brevity, but how can I cause the query to be re-submitted upon a state change?