Не работает переход по страницам назад
Пытался реализовать постраничную навигацию с помощью 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 компонент в котором я вывожу репы и реализую пагинацию(также хотел сделать поиск с пагинацией)
У меня получилось двигать курсор вперед но назад он не идет. Получается я могу переходить только вперед по страницам, а назад - нет.