У меня есть API откуда я беру и вывожу персонажей в карточки с помощью FlatList. В данном API персонажи представлены постранично, тоесть я делаю запрос
page: 1
выводятся первые 20 персонажей, делаю
page: 2
выводятся следующие 20 персов и тд...
Во FlatList мне нужно чтоб когда я скроллил данные подружались во время скролла и выводились, тоесть каждый запрос выводить следующую страницу.
Но проблема в том, что я листаю и как бы все нормально, но постоянно бывает такое что при каком-нибудь из запросов запросится видимо первая старница и выведется она, далее уже будут выводиться страницы также с первой, топеж выводятся 1, 2, 3, 4, 5 страницы и тут опять первая, и в итоге персонажи дублируются и страницы идут 1, 2, 3, 4, 5, 1, 2, 3
data?.characters.info.next
- здесь хранится номер следующей страницы
const CharatersComponent: React.FC = () => {
const [users, setUsers] = useState<IAllUser[]>([]);
const { data, loading, error, fetchMore } = useQuery<ISchemaUsers>(GET_ALL_USERS);
return(
<Wrapper>
{loading || error ? <ActivityIndicator style={{height: '100%'}} color={colors.violet} size='large'/> :
<FlatList
data={data?.characters.results}
renderItem={(el) => <CharatersContainer {...el.item}/>}
keyExtractor={(el) => String(el.id)}
numColumns={2}
onEndReachedThreshold={3}
onEndReached={() => fetchMore({
variables: {
page: data?.characters.info.next
},
updateQuery: (prevResult, { fetchMoreResult }) => {
fetchMoreResult.characters.results = [
...prevResult.characters.results,
...fetchMoreResult.characters.results
];
console.log(data?.characters.info.next);
return fetchMoreResult;
}
})}
/>}
{loading || error ? <ActivityIndicator style={{height: '100%'}} color={colors.violet} size='large'/> : null}
</Wrapper>
)
}
Сам запрос:
export const GET_ALL_USERS = gql`
query GetAllUsers($page: Int){
characters(page: $page) {
info {
next
}
results {
id
name
status
image
}
}
}
`