[Backport 5.2] alter function using apollo client to achieve paginati…

…on (#59837)

Search contexts: paginate repo names (#58685)

A customer reported that search contexts with over a thousand repos were failing when trying to create them.

The root cause is that the webapp was fetching repositories to validate them, but was not using pagination, and instead tried to get them all in one go. The backend limits the number of results in a page to 1000, even if the client requests more. Now, the web app pages through results.

(cherry picked from commit 4397287)

Co-authored-by: Jason Hawk Harris <jasonhawkharris@gmail.com>

client/web/src/enterprise/searchContexts/SearchContextForm.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react'
 
 import classNames from 'classnames'
 import { useNavigate } from 'react-router-dom'
-import { type Observable, of, throwError } from 'rxjs'
+import { type Observable, of, throwError, from } from 'rxjs'
 import { catchError, map, startWith, switchMap, tap } from 'rxjs/operators'
 
 import { SyntaxHighlightedSearchQuery, LazyQueryInput } from '@sourcegraph/branded'
@@ -221,7 +221,7 @@ export const SearchContextForm: React.FunctionComponent<React.PropsWithChildren<
                         return of({ type: 'repositories', repositories: [] } as RepositoriesParseResult)
                     }
 
-                    return fetchRepositoriesByNames(repositoryNames).pipe(
+                    return from(fetchRepositoriesByNames(repositoryNames)).pipe(
                         map(repositories => {
                             const repositoryNameToID = new Map(repositories.map(({ id, name }) => [name, id]))
                             const errors: Error[] = []

client/web/src/enterprise/searchContexts/backend.ts

@@ -1,32 +1,48 @@
-import type { Observable } from 'rxjs'
-import { map } from 'rxjs/operators'
-
 import { dataOrThrowErrors, gql } from '@sourcegraph/http-client'
+import type { GraphQLResult } from '@sourcegraph/http-client'
 
 import { requestGraphQL } from '../../backend/graphql'
-import type { RepositoriesByNamesResult, RepositoriesByNamesVariables } from '../../graphql-operations'
+import type { InputMaybe, RepositoriesByNamesResult, RepositoriesByNamesVariables } from '../../graphql-operations'
+
+const query = gql`
+    query RepositoriesByNames($names: [String!]!, $first: Int!, $after: String) {
+        repositories(names: $names, first: $first, after: $after) {
+            nodes {
+                id
+                name
+            }
+            pageInfo {
+                endCursor
+                hasNextPage
+            }
+        }
+    }
+`
 
-export function fetchRepositoriesByNames(
+export async function fetchRepositoriesByNames(
     names: string[]
-): Observable<RepositoriesByNamesResult['repositories']['nodes']> {
+): Promise<RepositoriesByNamesResult['repositories']['nodes']> {
+    let repos: RepositoriesByNamesResult['repositories']['nodes'] = []
     const first = names.length
-    return requestGraphQL<RepositoriesByNamesResult, RepositoriesByNamesVariables>(
-        gql`
-            query RepositoriesByNames($names: [String!]!, $first: Int!) {
-                repositories(names: $names, first: $first) {
-                    nodes {
-                        id
-                        name
-                    }
-                }
-            }
-        `,
-        {
+    let after: InputMaybe<string> = null
+
+    while (true) {
+        const result: GraphQLResult<RepositoriesByNamesResult> = await requestGraphQL<
+            RepositoriesByNamesResult,
+            RepositoriesByNamesVariables
+        >(query, {
             names,
             first,
+            after,
+        }).toPromise()
+
+        const data: RepositoriesByNamesResult = dataOrThrowErrors(result)
+
+        repos = repos.concat(data.repositories.nodes)
+        if (!data.repositories.pageInfo.hasNextPage) {
+            break
         }
-    ).pipe(
-        map(dataOrThrowErrors),
-        map(data => data.repositories.nodes)
-    )
+        after = data.repositories.pageInfo.endCursor
+    }
+    return repos
 }

client/web/src/integration/search-contexts.test.ts

@@ -142,8 +142,19 @@ describe('Search contexts', () => {
     test('Create static search context', async () => {
         testContext.overrideGraphQL({
             ...testContextForSearchContexts,
-            RepositoriesByNames: ({ names }) => ({
-                repositories: { nodes: names.map((name, index) => ({ id: `index-${index}`, name })) },
+            RepositoriesByNames: ({ names, first, after }) => ({
+                repositories: {
+                    nodes: names.map((name, index) => ({ id: `index-${index}`, name })),
+                    pageInfo: {
+                        endCursor: null,
+                        hasNextPage: false,
+                    },
+                },
+                variables: {
+                    names,
+                    first,
+                    after,
+                },
             }),
             CreateSearchContext: ({ searchContext, repositories }) => ({
                 createSearchContext: {
@@ -291,8 +302,19 @@ describe('Search contexts', () => {
     test('Edit search context', async () => {
         testContext.overrideGraphQL({
             ...testContextForSearchContexts,
-            RepositoriesByNames: ({ names }) => ({
-                repositories: { nodes: names.map((name, index) => ({ id: `index-${index}`, name })) },
+            RepositoriesByNames: ({ names, first, after }) => ({
+                repositories: {
+                    nodes: names.map((name, index) => ({ id: `index-${index}`, name })),
+                    pageInfo: {
+                        endCursor: null,
+                        hasNextPage: false,
+                    },
+                },
+                variables: {
+                    names,
+                    first,
+                    after,
+                },
             }),
             UpdateSearchContext: ({ id, searchContext, repositories }) => ({
                 updateSearchContext: {