Добавить пагинацию

[azinit]

• для SearchPage (Доработки по SearchPage #86) - полностью
  • pagination switch
  • param switch
  • scroll top
  • pagination to with query update
  • caching
  • computing total
  • limit queries
  • limit pages (to 100)
  • disabling buttons
• для UserPage - next/prev
  • pagination switch
  • param switch
  • scroll top
  • pagination to with query update
  • caching
  • before/after
  • computing total (Отображать где-нибудь кол-во репозиториев на странице пользователя #134)
  • disabling buttons
  • add current tab in url
  • for collabs - disable btn
  • switch affilationTab = reset page (after/before)

[azinit]

Ресурсы

• https://ant.design/components/list/
• https://gist.github.com/obahareth/d974afa16ac84182abc293b306e25928
• https://github.community/t/graphql-api-pagination/13933/6
• Pagination Apollo v3 example apollographql/apollo-client#6502
• https://www.apollographql.com/docs/react/pagination/core-api/#the-fetchmore-function
• https://www.apollographql.com/docs/react/pagination/core-api/#gatsby-focus-wrapper
• https://www.apollographql.com/docs/react/pagination/cursor-based/#gatsby-focus-wrapper
• https://www.apollographql.com/docs/react/pagination/cursor-based/#using-list-element-ids-as-cursors
• https://www.apollographql.com/docs/react/
• https://www.apollographql.com/docs/react/pagination/overview/
• https://ant.design/components/pagination/
• https://graphql.org/learn/pagination/
• https://github.com/search?p=3&q=react&type=Repositories

cache: new InMemoryCache({
        typePolicies: {
            Query: {
                fields: {
                    search: relayStylePagination(),
                },
            },
        },
    }),

const { data, loading, fetchMore, error, refetch } = useSearchQuery({
        variables: {
            type: searchTypeEnum,
            query: searchQuery,
        },
        errorPolicy: "all",
        notifyOnNetworkStatusChange: true,
    });
...

    useEffect(() => {
        refetch({
            type: searchTypeEnum,
            query: searchQuery,
        });
        /* eslint-disable-next-line react-hooks/exhaustive-deps */
    }, [searchTypeEnum]);
    if (error) {
        console.error(`#${data?.search.pageInfo.startCursor}`, error);
    }

...
<div className="search-results__pages">
                <button
                    onClick={() => {
                        fetchMore({
                            variables: {
                                cursor: data?.search.pageInfo.endCursor,
                            },
                        });
                    }}
                >
                    Fetch more
                </button>
            </div>

query Search($query: String!, $type: SearchType!, $cursor: String) {
  search(query: $query, type: $type, first: 10, after: $cursor) {
    pageInfo {
      endCursor
      startCursor
      hasNextPage
      hasPreviousPage
    }
    edges {
      node {
        ...RepoFields
        ...UserFields
      }
    }
  }

[azinit]