Circular error on Apollo Client when trying to refetch

Question

My App component has a reload button. Clicking reload should essentially perform refetch by re-triggering the graphql query.

The way I am currently performing the reload is by using Apollos's refetch function when the user click reload. However, the following error occurs when I click reload:

Here is my graphql HOC code:

const mapApiToProps = graphql(ASSETS_QUERY, {
  props: ({ ownProps, data }) => {
    return {
      assets: data.assets,
      isLoading: data.loading,
      handleReload: data.refetch // Doesn't currently work
    }
  }
});

Here is my query:

export const ASSETS_QUERY = gql`
  query getUserAssets {
    assets {
      body
      id
    }
  }`

Here is my component code:

class App extends Component {
  render() {
    const {handleReload, isLoading, assets} = this.props;
    return (
      <div>
        <ReloadBtn handleReload={handleReload} isLoading={isLoading} />
        <AssetList assets={assets} />
      </div>
    )
  }
}

And finally, my connect:

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  mapApiToProps
)(App);

Any insight into why the error occurs?

score 0 · Answer 1 · answered Mar 19 '17 at 14:22

0

return {
  assets: data.assets,
  isLoading: data.loading,
  handleReload: () => { data.refetch() }
}

answered Mar 19 '17 at 14:22

Jordizle

252
1
5

Please explain yoir answers. – Blackbam Mar 19 '17 at 18:34
How is this different from what OP had? You added a lambda, but the method was being invoked anyway. – Alpha Mar 19 '17 at 19:06
While this code may answer the question, providing additional [context](https://meta.stackexchange.com/q/114762) regarding _how_ and/or _why_ it solves the problem would improve the answer's long-term value. – Dev-iL Mar 19 '17 at 21:12

score 0 · Answer 2 · answered Jul 05 '21 at 15:34

I had the same error and for some reason passing () => refetch() instead of refetch to the onPress of the Button fixed the problem for me. So

<Button onPress={() => refetch()} title="some button"/>

instead of

<Button onPress={refetch} title="some button"/>

Circular error on Apollo Client when trying to refetch

2 Answers2