-
Notifications
You must be signed in to change notification settings - Fork 507
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Having troubles using custom state management, loadMore called multiple times? #261
Comments
I used another variable call "isAPICall". then I set it to true before my API call and then set again it to false in end of the api call. before start the api call i check that variable is false.
|
Very true. EDIT: I probably should have been more clear on my solution. For me, I had to keep track of the loading state manually and only load more if loading is false. See the import { gql, useQuery, NetworkStatus } from '@apollo/client'
import InfiniteScroll from 'react-infinite-scroller'
export const ALL_PRODUCTS_QUERY = gql`
query products($start: Int!, $limit: Int!) {
products(start: $start, limit: $limit) {
id
name
}
productsCount
}
`
export const productsQueryVars = {
start: 0,
limit: 12
}
export default function Products() {
const { loading, error, data, fetchMore, networkStatus } = useQuery(
ALL_PRODUCTS_QUERY,
{
variables: productsQueryVars,
// Setting this value to true will make the component rerender when
// the "networkStatus" changes, so we are able to know if it is fetching
// more data
notifyOnNetworkStatusChange: true
}
)
const loadingMoreProducts = networkStatus === NetworkStatus.fetchMore
if (error) return <div>Error</div>
if (loading && !loadingMoreProducts) return <div>Loading</div>
const { products, productsCount } = data
const areMoreProducts = productsCount > products.length + 1
const loadMoreProducts = () => {
if (loading || loadingMoreProducts) return
fetchMore({
variables: {
start: products.length,
limit: 12
}
})
}
const loader = <div>Loading...</div>
return (
<section>
<InfiniteScroll
pageStart={0}
loadMore={loadMoreProducts}
hasMore={areMoreProducts}
loader={loader}
>
<ul>
{products.map((product, index) => (
<li key={product.id} style={{ height: 100, border: '1px solid' }}>
<div>{product.name}</div>
</li>
))}
</ul>
</InfiniteScroll>
</section>
)
} |
I have very similar issue. Looks like |
i have same problem, please help me |
same problem |
I have the same problem, but I set hasMore=false while loading and set it back to true after load which solved this problem. |
@Surangaup 's solution worked for me 🙂 |
I'm using a custom state management instead of using the
page
parameter for loading items. This because I need to "reset" the page after some search parameters changes.Basically this is what I'm storing:
... and this is my
loadMore
function:That is, after a successfully fetch, update the
nextPage
parameter andhasMore
.What is happening is strange: on the first page load I have multiple calls with the very same
nextPage
value:The component isn't very complex or special:
The text was updated successfully, but these errors were encountered: