Reactive search example

[unoriginalscreenname]

How would i properly use withQuery to create a component that can search a collection?

Let's say i have a PostList component which i am wrapping reactively withQuery. I'd like to have an input filed which I would pass as a search filter on the query. but i'm not sure how i would do this? How do you alter the query and have it update the component internally, without passing in props?

class PostList extends Component { search(query, e){ let regex = new RegExp(e.target.value, 'i'); [do something with query] query.params.filters = { name:regex } } render(){ <Input type={"text"} onChange={this.search.bind(this, this.props.query)}/> } }

const Container = withQuery((props) => { return getPostLists.clone(); }, {reactive: true})(PostList);

[danilomiranda]

Hey @ericmcgregor I have the same issue, do you found the solution?

[danilomiranda]

@theodorDiaconu some help here?

[danilomiranda]

This code is deprecated right? https://github.com/cult-of-coders/grapher-react/blob/master/legacy/createQueryContainer.js

[bhunjadi]

@danilomiranda @ericmcgregor The only way I found to do that is to wrap the query container with component that renders search input (WrapperComponent in this example).

e.g.

class DataRenderingComponent extends Component {
  render() {
    const {data} = this.props;
    // render query data
}

class WrapperComponent extends Component {
  constructor(props) {
    super(props);

    this.QueryContainer = withQuery((props) => {
      const queryParams = {}; // extract params from props
      this.query = someQuery.clone(queryParams);
      return this.query;
    }, {reactive: true})(DataRenderingComponent);
  }

   render() {
     const queryProps = {search: this.state.search};
     return (<div>
       <QueryContainer {...queryProps} />
       <Input type={"text"} onChange={(event) => this.setState({search: event.target.value})}/>
      </div>);
   }
}