Created
October 8, 2018 10:50
-
-
Save victor-enogwe/1d99c709c19eb2136f2458eb457d7338 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class YourCoolComponent extends Component { | |
| state = { | |
| skip: true, // query flag, query will be manual on render | |
| } | |
| componentDidMount () { | |
| // you can fire the initial query here, pass it as a prop to another component, or on button click or any where you would like. | |
| this.fireInitialQuery() | |
| } | |
| fireInitialQuery = () => this.setState(prevState => ({ ...prevState, skip: false })) | |
| refetch = async (refetch) => await refetch() // fire your query refetch manually | |
| render () { | |
| return <Query | |
| query={/* your gql query */} | |
| // skip ensures query wont fire on load | |
| skip={this.state.skip} | |
| variables={{ /* your gql param */ }} | |
| children={({ data, refetch }) => { | |
| // bind refetch to your prefered class method to access refetch later for further query refresh | |
| this.refetchBooks = this.refetchBooks.bind(null, refetch) | |
| return null //do some cool stuff with your data | |
| }} | |
| /> | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment