@maxemga

Почему fetchMore во FlatList работает некорректно?

У меня есть 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
            }
        }
    }
`
  • Вопрос задан
  • 17 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы