Не работает переход по страницам назад

Пытался реализовать постраничную навигацию с помощью GitHub GraphQL API на ts. Основной проблемой является способ навигации. Так как нет типичного offset я не понимаю как это реализовать.

export const GET_REPOS = gql`
    query Repositories($after: String, $before: String) {
        search(query: "type:repository", type: REPOSITORY, first: 10, after: $after, before: $before) {
            edges {
                node {
                    ... on Repository {
                        id
                        name
                        stargazerCount
                        url
                        pushedAt
                    }
                }
                cursor
            }
            pageInfo {
                endCursor
                startCursor
                hasNextPage
                hasPreviousPage
            }
        }
    }
`;

Вот мой запрос на получение 10 репозиториев.

import classes from './RepositoriesList.module.css';
import { useLazyQuery, useQuery } from '@apollo/client';
import { GET_REPOS, GET_REPOSITORY_BY_NAME } from 'shared/api/Repositories';
import { useEffect, useState } from 'react';
import { useAppDispatch, useAppSelector } from 'shared/store/hooks';
import { reset, selectRepositories, setRepositories } from '../model/RepositorySlice';
import { selectFilter } from 'widgets/search/model/SearchSlice';

export const RepositoriesList = () => {
    const [page, setPage] = useState(1);
    const filter = useAppSelector(selectFilter);

    const { data: reposData, loading: reposLoading, error: reposError, fetchMore } = useQuery(GET_REPOS);
    const dispatch = useAppDispatch();
    const repositories = useAppSelector(selectRepositories);
    const [searchRepositories, { data: searchData, loading: searchLoading, error: searchError }] =
        useLazyQuery(GET_REPOSITORY_BY_NAME);

    useEffect(() => {
        if (reposData) {
            dispatch(setRepositories(reposData.search.edges));
        }
    }, [reposData, dispatch, filter]);

    useEffect(() => {
        if (filter) {
            dispatch(reset());
            searchRepositories({ variables: { name: filter } });
        }
    }, [filter, searchRepositories]);

    useEffect(() => {
        if (searchData) {
            dispatch(setRepositories(searchData.search.edges));
        }
    }, [searchData, dispatch]);

    const handlePageChange = async (newPage: number) => {
        const isNext = newPage > page;

        const variables = isNext
            ? { after: reposData.search.pageInfo.endCursor, before: null }
            : { after: null, before: reposData.search.pageInfo.startCursor };

        await fetchMore({
            variables,
            updateQuery: (previousResult, { fetchMoreResult }) => {
                const edges = fetchMoreResult.search.edges;
                const pageInfo = fetchMoreResult.search.pageInfo;
                return edges.length
                    ? {
                          search: {
                              __typename: previousResult.search.__typename,
                              edges,
                              pageInfo,
                          },
                      }
                    : previousResult;
            },
        });

        setPage(newPage);
    };

    return (
        <>
            <div className={classes.repositories}>
                {(reposLoading || searchLoading) && <h1>Loading...</h1>}
                {(reposError || searchError) && <h1>Error: {(reposError! || searchError).message}</h1>}
                {repositories.length
                    ? repositories.map((el) => (
                          <div key={el.node.id} className={classes.repository}>
                              <h2>Название репозитория: {el.node.name}</h2>
                              <span>Количество звезд: {el.node.stargazerCount}</span>
                              <span>Обновлен в: {el.node.pushedAt}</span>
                              <a href={el.node.url}>Перейти на GitHub</a>
                          </div>
                      ))
                    : !reposLoading && !searchLoading && <h1>No repositories found.</h1>}
            </div>
            <div className={classes.pagination}>
                <button
                    onClick={() => handlePageChange(page - 1)}
                    disabled={!reposData?.search.pageInfo.hasPreviousPage || reposLoading || searchLoading}
                >
                    Previous
                </button>
                <span>{page}</span>
                <button
                    onClick={() => handlePageChange(page + 1)}
                    disabled={!reposData?.search.pageInfo.hasNextPage || reposLoading || searchLoading}
                >
                    Next
                </button>
            </div>
        </>
    );
};

Вот react компонент в котором я вывожу репы и реализую пагинацию(также хотел сделать поиск с пагинацией)

У меня получилось двигать курсор вперед но назад он не идет. Получается я могу переходить только вперед по страницам, а назад - нет.


Ответы (0 шт):