How to call a query only on refetch

Question

I was wondering if there was a way to call a query in a react component without connecting the component with graphql, because it lead the component to launch the query the first time it mount.

So basically is there a way to avoid the default call?

Andy Ray · Accepted Answer · 2018-01-21 02:44:53Z

3

If you manually need to control the query or mutation and not use the default behavior from the graphql() HOC, use withApollo. It injects a GraphQL API client object into your component as a prop.

The client has .query and .mutate as methods. So you can do this.props.client.query(...) in componentDidMount.

import { withApollo } from 'react-apollo';

class Thing extends Component {
    componentDidMount() {
        this.props.client.query(myQuery).then(data => {
            this.setState({ data });
        };
    }
}

export default withApollo(Thing);

edited Jan 21, 2018 at 2:44

answered Jan 17, 2018 at 4:18

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Topsy Over a year ago

You, I like you.

Topsy Over a year ago

Edit : the import is import { withApollo } from 'react-apollo'

Collectives™ on Stack Overflow

How to call a query only on refetch

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related