Posts

Showing posts with the label graphql

ReactJS query variables

Image
Clash Royale CLAN TAG #URR8PPP ReactJS query variables Not sure what I am doing wrong but I receiving the following error message after I click on the submit button: The code for query is as follows: const ObjectQuery = gql` query($timestamp: Float!){ action(timestamp: $timestamp){ action timestamp object{ filename } } } `; class UserList extends React.Component { render() { return ( ({ loading, error, data }) => { if (loading) return <p>Loading...</p>; if (error) { console.log(error); return <p>Error</p>; } if (data.action.length === 0) return <div>No Objects</div>; return (//this code binds the query above to the output and puts it on the screen. <Item.Group divided> {data.action.map(action => ( <div> <ul> <li key = {actio...

How to force Apollo Query component to re-run query when parent component re-renders

How to force Apollo Query component to re-run query when parent component re-renders I'm using Apollo Client's <Query> within a component that is re-rendered when state is changed within a lifecycle method. I wish to have my <Query> component re-run the query because I know that data has changed. It appears that Query component is using a cache that needs to be invalidated before query is re-run. <Query> <Query> I'm using a wonky workaround that caches the refetch callback from the render prop in the parent component, but it feels wrong. I'll post my approach in the answers if anyone is interested. refetch My code looks something like this. I removed loading and error handling from query as well as some other detail for brevity. loading error class ParentComponent extends React.Component { componentDidUpdate(prevProps) { if (this.props.refetchId !== prevProps.refetchId) { const otherData = this.processData() // do something ...