postsFetch is undefined

[chickencoder]

Not sure if it's something I'm doing stupidly wrong this evening or something's not right...

In my code I have react-refetch:

import { connect } from 'react-refetch'

I have my component:

export default class PostFeed extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { postsFetch } = this.props

    if (postsFetch.pending) {
      return <span>Loading Posts...</span>
    } else if (postsFetch.rejected) {
      return <span>Failed to load posts</span>
    } else if (postsFetch.fulfilled) {
      return (
        <Post>
          {postsFetch.value}
          <span>This is a post</span>
        </Post>
      )
    }
  }
}

and I have my refetch connect...

connect((props) => ({
  postsFetch: `https://api.github.com/users/${props.user}/gists`,
}))(PostFeed)

and all I'm getting is that postsFetch is undefined.

Any ideas?

[ryanbrainard]

Try moving export default before connect. As you have it now, you're exporting the unconnected component, so it's undefined.

Closing this now, but reopen if you're still having issues.

[ryanbrainard]

Re-reading the first example in the readme, I can totally see why you did the export like you did. I'm going reopen this as a reminder for myself (or anyone who wants to send a PR) to update it to make it clearer.

[chickencoder]

Oh thank you! Works great 👍