Skip to content

Instantly share code, notes, and snippets.

@CharlesMangwa
Last active March 16, 2018 21:02
Show Gist options
  • Save CharlesMangwa/f45ae69ace6332463d971365e95f74a1 to your computer and use it in GitHub Desktop.
Save CharlesMangwa/f45ae69ace6332463d971365e95f74a1 to your computer and use it in GitHub Desktop.
React Data Fetching - `refetch` prop use case
import React, { Component, Fragment } from 'react'
import { Fetch } from 'react-data-fetching'
// Just here for better understanding
import { PostsList } from './components'
export default class Timeline extends Component {
state = {
isLoadingMore: false,
posts: undefined,
start: 0,
limit: 20,
}
loadMorePosts = () => {
this.setState(() => ({ isLoadingMore: true }))
}
saveData = (data) => {
this.setState(
(state) => ({
isLoadingMore: false,
posts: { ...state.posts, ...data.posts },
start: state.start + 30,
limit: state.limit + 30,
})
)
}
render() {
return (
<Fragment>
<Fetch
resultOnly
url="https://api.nyan.com/feed"
params={{
start: this.state.start,
end: this.state.limit,
}}
refetch={this.state.isLoadingMore}
onFetch={this.saveData}
/>
<PostsList
data={this.state.posts}
onLoadMore={this.loadMorePosts}
/>
</Fragment>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment