diff --git a/client/web-sveltekit/prettier.config.cjs b/client/web-sveltekit/prettier.config.cjs
index 018e218ead9..2dd0d464cce 100644
--- a/client/web-sveltekit/prettier.config.cjs
+++ b/client/web-sveltekit/prettier.config.cjs
@@ -2,5 +2,8 @@ const baseConfig = require('../../prettier.config.js')
 module.exports = {
     ...baseConfig,
     plugins: [...(baseConfig.plugins || []), 'prettier-plugin-svelte'],
-    overrides: [...(baseConfig.overrides || []), { files: '*.svelte', options: { parser: 'svelte', htmlWhitespaceSensitivity: 'strict' } }],
+    overrides: [
+        ...(baseConfig.overrides || []),
+        { files: '*.svelte', options: { parser: 'svelte', htmlWhitespaceSensitivity: 'strict' } },
+    ],
 }
diff --git a/client/web-sveltekit/src/lib/graphql/urql.test.ts b/client/web-sveltekit/src/lib/graphql/urql.test.ts
index fb9010ec4fd..03abc045397 100644
--- a/client/web-sveltekit/src/lib/graphql/urql.test.ts
+++ b/client/web-sveltekit/src/lib/graphql/urql.test.ts
@@ -1,215 +1,192 @@
 import { type AnyVariables, Client, type OperationResult, CombinedError, cacheExchange } from '@urql/core'
-import { test, expect, vi, beforeEach } from 'vitest'
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest'
 import { pipe, filter, map, merge } from 'wonka'
 
-import { infinityQuery } from './urql'
+import { IncrementalRestoreStrategy, infinityQuery } from './urql'
 
-function getMockClient(responses: Partial<OperationResult<any, AnyVariables>>[]): Client {
-    return new Client({
-        url: '#testingonly',
-        exchanges: [
-            cacheExchange, // This is required because infiniteQuery expects that a cache exchange is present
-            ({ forward }) =>
-                operations$ => {
-                    const mockResults$ = pipe(
-                        operations$,
-                        filter(operation => {
-                            switch (operation.kind) {
-                                case 'query':
-                                case 'mutation':
-                                    return true
-                                default:
-                                    return false
-                            }
-                        }),
-                        map((operation): OperationResult<any, AnyVariables> => {
-                            const response = responses.shift()
-                            if (!response) {
+describe('infinityQuery', () => {
+    function getMockClient(responses: Partial<OperationResult<any, AnyVariables>>[]): Client {
+        return new Client({
+            url: '#testingonly',
+            exchanges: [
+                cacheExchange, // This is required because infiniteQuery expects that a cache exchange is present
+                ({ forward }) =>
+                    operations$ => {
+                        const mockResults$ = pipe(
+                            operations$,
+                            filter(operation => {
+                                switch (operation.kind) {
+                                    case 'query':
+                                    case 'mutation':
+                                        return true
+                                    default:
+                                        return false
+                                }
+                            }),
+                            map((operation): OperationResult<any, AnyVariables> => {
+                                const response = responses.shift()
+                                if (!response) {
+                                    return {
+                                        operation,
+                                        error: new CombinedError({
+                                            networkError: new Error('No more responses'),
+                                        }),
+                                        stale: false,
+                                        hasNext: false,
+                                    }
+                                }
                                 return {
+                                    ...response,
                                     operation,
-                                    error: new CombinedError({
-                                        networkError: new Error('No more responses'),
-                                    }),
+                                    data: response.data ?? undefined,
+                                    error: response.error ?? undefined,
                                     stale: false,
                                     hasNext: false,
                                 }
-                            }
-                            return {
-                                ...response,
-                                operation,
-                                data: response.data ?? undefined,
-                                error: response.error ?? undefined,
-                                stale: false,
-                                hasNext: false,
-                            }
-                        })
-                    )
+                            })
+                        )
 
-                    const forward$ = pipe(
-                        operations$,
-                        filter(operation => {
-                            switch (operation.kind) {
-                                case 'query':
-                                case 'mutation':
-                                    return false
-                                default:
-                                    return true
-                            }
-                        }),
-                        forward
-                    )
+                        const forward$ = pipe(
+                            operations$,
+                            filter(operation => {
+                                switch (operation.kind) {
+                                    case 'query':
+                                    case 'mutation':
+                                        return false
+                                    default:
+                                        return true
+                                }
+                            }),
+                            forward
+                        )
 
-                    return merge([mockResults$, forward$])
-                },
-        ],
-    })
-}
+                        return merge([mockResults$, forward$])
+                    },
+            ],
+        })
+    }
 
-function getQuery(client: Client) {
-    return infinityQuery({
-        client,
-        query: 'query { list { nodes { id } } pageInfo { hasNextPage, endCursor } } }',
-        variables: {
-            first: 2,
-            afterCursor: null as string | null,
-        },
-        nextVariables: previousResult => {
-            if (previousResult?.data?.list?.pageInfo?.hasNextPage) {
+    function getQuery(client: Client) {
+        return infinityQuery({
+            client,
+            query: 'query { list { nodes { id } } pageInfo { hasNextPage, endCursor } } }',
+            variables: {
+                first: 2,
+                afterCursor: null as string | null,
+            },
+            map: result => {
+                const list = result.data?.list
                 return {
-                    afterCursor: previousResult.data.list.pageInfo.endCursor,
+                    nextVariables: list?.pageInfo.hasNextPage ? { afterCursor: list.pageInfo.endCursor } : undefined,
+                    data: list?.nodes,
+                    error: result.error,
                 }
-            }
-            return undefined
-        },
-        combine: (previousResult, nextResult) => {
-            if (!nextResult.data?.list) {
-                return nextResult
-            }
-            const previousNodes = previousResult.data?.list?.nodes ?? []
-            const nextNodes = nextResult.data.list?.nodes ?? []
-            return {
-                ...nextResult,
+            },
+            merge: (prev, next) => [...(prev ?? []), ...(next ?? [])],
+            createRestoreStrategy: api =>
+                new IncrementalRestoreStrategy(
+                    api,
+                    n => n.length,
+                    n => ({ first: n.length })
+                ),
+        })
+    }
+
+    let query: ReturnType<typeof getQuery>
+
+    beforeEach(() => {
+        vi.useFakeTimers()
+
+        const client = getMockClient([
+            {
                 data: {
                     list: {
-                        ...nextResult.data.list,
-                        nodes: [...previousNodes, ...nextNodes],
-                    },
-                },
-            }
-        },
-    })
-}
-
-let query: ReturnType<typeof infinityQuery>
-
-beforeEach(() => {
-    vi.useFakeTimers()
-
-    const client = getMockClient([
-        {
-            data: {
-                list: {
-                    nodes: [{ id: 1 }, { id: 2 }],
-                    pageInfo: {
-                        hasNextPage: true,
-                        endCursor: '2',
+                        nodes: [{ id: 1 }, { id: 2 }],
+                        pageInfo: {
+                            hasNextPage: true,
+                            endCursor: '2',
+                        },
                     },
                 },
             },
-        },
-        {
-            data: {
-                list: {
-                    nodes: [{ id: 3 }, { id: 4 }],
-                    pageInfo: {
-                        hasNextPage: true,
-                        endCursor: '4',
+            {
+                data: {
+                    list: {
+                        nodes: [{ id: 3 }, { id: 4 }],
+                        pageInfo: {
+                            hasNextPage: true,
+                            endCursor: '4',
+                        },
                     },
                 },
             },
-        },
-        {
-            data: {
-                list: {
-                    nodes: [{ id: 5 }, { id: 6 }],
-                    pageInfo: {
-                        hasNextPage: false,
+            {
+                data: {
+                    list: {
+                        nodes: [{ id: 5 }, { id: 6 }],
+                        pageInfo: {
+                            hasNextPage: false,
+                        },
                     },
                 },
             },
-        },
-    ])
-    query = getQuery(client)
-})
-
-test('fetch more', async () => {
-    const subscribe = vi.fn()
-    query.subscribe(subscribe)
-
-    await vi.runAllTimersAsync()
-
-    // 1. call: fetching -> true
-    // 2. call: result
-    expect(subscribe).toHaveBeenCalledTimes(2)
-    expect(subscribe.mock.calls[0][0]).toMatchObject({
-        fetching: true,
+        ])
+        query = getQuery(client)
     })
-    expect(subscribe.mock.calls[1][0]).toMatchObject({
-        fetching: false,
-        data: {
-            list: {
-                nodes: [{ id: 1 }, { id: 2 }],
-                pageInfo: {
-                    hasNextPage: true,
-                    endCursor: '2',
-                },
+
+    afterEach(() => {
+        vi.useRealTimers()
+    })
+
+    test('fetch more', async () => {
+        const subscribe = vi.fn()
+        query.subscribe(subscribe)
+
+        await vi.runAllTimersAsync()
+
+        // 1. call: fetching -> true
+        // 2. call: result
+        expect(subscribe).toHaveBeenCalledTimes(2)
+        expect(subscribe.mock.calls[0][0]).toMatchObject({
+            fetching: true,
+        })
+        expect(subscribe.mock.calls[1][0]).toMatchObject({
+            fetching: false,
+            data: [{ id: 1 }, { id: 2 }],
+            nextVariables: {
+                afterCursor: '2',
             },
-        },
-    })
+        })
 
-    // Fetch more data
-    query.fetchMore()
-    await vi.runAllTimersAsync()
+        // Fetch more data
+        query.fetchMore()
+        await vi.runAllTimersAsync()
 
-    // 3. call: fetching -> true
-    // 4. call: result
-    expect(subscribe).toHaveBeenCalledTimes(4)
-    expect(subscribe.mock.calls[2][0]).toMatchObject({
-        fetching: true,
-    })
-    expect(subscribe.mock.calls[3][0]).toMatchObject({
-        fetching: false,
-        data: {
-            list: {
-                nodes: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }],
-                pageInfo: {
-                    hasNextPage: true,
-                    endCursor: '4',
-                },
+        // 3. call: fetching -> true
+        // 4. call: result
+        expect(subscribe).toHaveBeenCalledTimes(4)
+        expect(subscribe.mock.calls[2][0]).toMatchObject({
+            fetching: true,
+        })
+        expect(subscribe.mock.calls[3][0]).toMatchObject({
+            fetching: false,
+            data: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }],
+            nextVariables: {
+                afterCursor: '4',
             },
-        },
-    })
-})
-
-test('restoring state', async () => {
-    const subscribe = vi.fn()
-    query.subscribe(subscribe)
-    await vi.runAllTimersAsync()
-    await query.restore(result => (result.data as any).list.nodes.length < 5)
-
-    expect(subscribe).toHaveBeenCalledTimes(6)
-    expect(subscribe.mock.calls[4][0]).toMatchObject({
-        restoring: true,
-    })
-    expect(subscribe.mock.calls[5][0]).toMatchObject({
-        restoring: false,
-        data: {
-            list: {
-                nodes: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }],
-                pageInfo: {
-                    hasNextPage: false,
-                },
-            },
-        },
+        })
+    })
+
+    test('restoring state', async () => {
+        const subscribe = vi.fn()
+        query.subscribe(subscribe)
+        const snapshot = query.capture()
+        query.restore({ ...snapshot!, count: 6 })
+        await vi.runAllTimersAsync()
+
+        expect(subscribe.mock.calls[3][0]).toMatchObject({
+            fetching: false,
+            data: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }],
+        })
     })
 })
diff --git a/client/web-sveltekit/src/lib/graphql/urql.ts b/client/web-sveltekit/src/lib/graphql/urql.ts
index a4fb7ecdaf1..9bdddf19f53 100644
--- a/client/web-sveltekit/src/lib/graphql/urql.ts
+++ b/client/web-sveltekit/src/lib/graphql/urql.ts
@@ -2,22 +2,20 @@ import {
     Client,
     cacheExchange,
     fetchExchange,
-    mapExchange,
-    type Exchange,
     makeOperation,
+    mapExchange,
     type AnyVariables,
-    type OperationResult,
-    createRequest,
     type DocumentInput,
+    type Exchange,
+    type OperationResult,
 } from '@urql/core'
 import type { OperationDefinitionNode } from 'graphql'
 import { once } from 'lodash'
-import { from, isObservable, Subject, type Observable, concat, of } from 'rxjs'
-import { map, switchMap, scan, startWith } from 'rxjs/operators'
-import { type Readable, readable, get } from 'svelte/store'
+import { type Readable, get, writable, type Writable } from 'svelte/store'
 
 import type { GraphQLResult } from '@sourcegraph/http-client'
 
+import { uniqueID } from '$lib/dom'
 import { GRAPHQL_URI } from '$lib/http-client'
 
 import { getHeaders } from './shared'
@@ -65,7 +63,7 @@ export function query<TData = any, TVariables extends AnyVariables = AnyVariable
     return getGraphQLClient().query<TData, TVariables>(query, variables).toPromise()
 }
 
-interface InfinityQueryArgs<TData = any, TVariables extends AnyVariables = AnyVariables> {
+interface InfinityQueryArgs<TData, TPayload = any, TVariables extends AnyVariables = AnyVariables, TSnapshot = any> {
     /**
      * The {@link Client} instance to use for the query.
      */
@@ -74,76 +72,112 @@ interface InfinityQueryArgs<TData = any, TVariables extends AnyVariables = AnyVa
     /**
      * The GraphQL query to execute.
      */
-    query: DocumentInput<TData, TVariables>
+    query: DocumentInput<TPayload, TVariables>
 
     /**
      * The initial variables to use for the query.
      */
-    variables: TVariables | Observable<TVariables>
+    variables: TVariables | Promise<TVariables>
 
     /**
-     * A function that returns the next set of variables to use for the query.
+     * Process the result of the query. This function maps the response to the data used
+     * and computes the next set of query variables, if any.
      *
+     * @param result - The result of the query.
      * @param previousResult - The previous result of the query.
-     *
-     * @remarks
-     * `nextVariables` is called when {@link InfinityQueryStore.fetchMore} is called to get the next set
-     * of variables to fetch the next page of data. This function to extract the cursor for the next
-     * page from the previous result.
+     * @returns The new/combined result state.
      */
-    nextVariables: (previousResult: OperationResult<TData, TVariables>) => Partial<TVariables> | undefined
+    map: (result: OperationResult<TPayload, TVariables>) => InfinityStoreResult<TData, TVariables>
 
     /**
-     * A function to combine the previous result with the next result.
-     *
-     * @param previousResult - The previous result of the query.
-     * @param nextResult - The next result of the query.
-     * @returns The combined result of the query.
-     *
-     * @remarks
-     * `combine` is called when the next result is received to merge the previous result with the new
-     * result. This function is used to append the new data to the previous data.
+     * Optional callback to merge the data from the previous result with the new data.
+     * If not provided the new data will replace the old data.
      */
-    combine: (
-        previousResult: OperationResultState<TData, TVariables>,
-        nextResult: OperationResultState<TData, TVariables>
-    ) => OperationResultState<TData, TVariables>
+    merge?: (previousData: TData | undefined, newData: TData | undefined) => TData
+
+    /**
+     * Returns a strategy for restoring the data when navigating back to a page.
+     */
+    createRestoreStrategy?: (api: InfinityAPI<TData, TVariables>) => RestoreStrategy<TSnapshot, TData>
 }
 
-interface OperationResultState<TData = any, TVariables extends AnyVariables = AnyVariables>
-    extends OperationResult<TData, TVariables> {
+/**
+ * Internal API for the infinity query store. Used by restore strategies to control the store.
+ */
+interface InfinityAPI<TData, TVariables extends AnyVariables = AnyVariables> {
+    /**
+     * The internal store representing the current state of the query.
+     */
+    store: Writable<InfinityStoreResultState<TData, TVariables>>
+    /**
+     * Helper function for fetching and processing the next set of data.
+     */
+    fetch(
+        variables: Partial<TVariables>,
+        previous: InfinityStoreResult<TData, TVariables>
+    ): Promise<InfinityStoreResult<TData, TVariables>>
+}
+
+/**
+ * The processed/combined result of a GraphQL query.
+ */
+export interface InfinityStoreResult<TData = any, TVariables extends AnyVariables = AnyVariables> {
+    data?: TData
+
+    /**
+     * Set if there was an error fetching the data. When set, no more data will be fetched.
+     */
+    error?: Error
+
+    /**
+     * The set of variables to use for the next fetch. If not set no more data will be fetched.
+     */
+    nextVariables?: Partial<TVariables>
+}
+
+/**
+ * The state of the infinity query store.
+ */
+interface InfinityStoreResultState<TData = any, TVariables extends AnyVariables = AnyVariables>
+    extends InfinityStoreResult<TData, TVariables> {
     /**
      * Whether a GraphQL request is currently in flight.
      */
     fetching: boolean
-    /**
-     * Whether the store is currently restoring data.
-     */
-    restoring: boolean
 }
 
 // This needs to be exported so that TS type inference can work in SvelteKit generated files.
-export interface InfinityQueryStore<TData = any, TVariables extends AnyVariables = AnyVariables>
-    extends Readable<OperationResultState<TData, TVariables>> {
+export interface InfinityQueryStore<TData = any, TVariables extends AnyVariables = AnyVariables, TSnapshot = any>
+    extends Readable<InfinityStoreResultState<TData, TVariables>> {
     /**
-     * Reruns the query with the next set of variables returned by {@link InfinityQueryArgs.nextVariables}.
+     * Reruns the query with the next set of query variables.
      *
      * @remarks
-     * A new query will only be executed if there is no query currently in flight and {@link InfinityQueryArgs.nextVariables}
-     * returns a value different from `undefined`.
+     * A new query will only be executed if there is no query currently in flight and {@link InfinityStoreResult.nextVariables}
+     * is set.
      */
     fetchMore: () => void
 
     /**
-     * Fetches more data until the given restoreHandler returns `false`.
-     *
-     * @param restoreHandler - A function that returns `true` if more data should be fetched.
-     *
-     * @remarks
-     * When navigating back to a page that was previously fetched with `infinityQuery`, the page
-     * should call `restore` until the previous data state is restored.
+     * Fetches data while the given predicate is true. Using this function is different f
+     * rom calling {@link fetchMore} in a loop, because it will set/unset the fetching state
+     * only once.
      */
-    restore: (restoreHandler: (result: OperationResultState<TData, TVariables>) => boolean) => Promise<void>
+    fetchWhile: (predicate: (data: TData) => boolean) => Promise<void>
+
+    /**
+     * Restores the data state from a snapshot, which is returned by {@link capture}.
+     *
+     * @param snapshot - The snapshot to restore.
+     * @returns A promise that resolves when the data has been restored.
+     */
+    restore: (snapshot: TSnapshot | undefined) => Promise<void>
+
+    /**
+     * Captures the current data state to a snapshot that can be used to restore the data later.
+     * @returns The snapshot.
+     */
+    capture: () => TSnapshot | undefined
 }
 
 /**
@@ -157,125 +191,216 @@ export interface InfinityQueryStore<TData = any, TVariables extends AnyVariables
  * with the given {@link InfinityQueryArgs.variables}.
  *
  * The caller can call {@link InfinityQueryStore.fetchMore} to fetch more data. The store will
- * call {@link InfinityQueryArgs.nextVariables} to get the next set of variables to use for the query
- * and merge it into the initial variables.
- * When the result is received, the store will call {@link InfinityQueryArgs.combine} to merge the
- * previous result with the new result.
+ * call {@link InfinityQueryArgs.mapResult} to process the query result, combine it with the previous result
+ * and to compute the query variables for the next fetch, if any.
  *
  * Calling this function will prefetch the initial data, i.e. the data is fetch before the store is
  * subscribed to.
  */
-export function infinityQuery<TData = any, TVariables extends AnyVariables = AnyVariables>(
-    args: InfinityQueryArgs<TData, TVariables>
-): InfinityQueryStore<TData, TVariables> {
-    // This is a hacky workaround to create an initialState. The empty object is
-    // invalid but the request will never be executed with these variables anyway.
-    const initialVariables = isObservable(args.variables) ? args.variables : of(args.variables)
-    const operation = args.client.createRequestOperation(
-        'query',
-        isObservable(args.variables)
-            ? createRequest(args.query, {} as TVariables)
-            : createRequest(args.query, args.variables)
-    )
-    const initialState: OperationResultState<TData, TVariables> = {
-        operation,
-        error: undefined,
-        data: undefined,
-        extensions: undefined,
-        stale: false,
-        fetching: false,
-        restoring: false,
-        hasNext: false,
+export function infinityQuery<
+    TData = any,
+    TPayload = any,
+    TVariables extends AnyVariables = AnyVariables,
+    TSnapshot = void
+>(args: InfinityQueryArgs<TData, TPayload, TVariables, TSnapshot>): InfinityQueryStore<TData, TVariables, TSnapshot> {
+    const initialVariables = Promise.resolve(args.variables)
+
+    async function fetch(
+        variables: Partial<TVariables>,
+        previousResult: InfinityStoreResult<TData, TVariables>
+    ): Promise<InfinityStoreResult<TData, TVariables>> {
+        const result = args.map(
+            await initialVariables.then(initialVariables =>
+                args.client.query(args.query, { ...initialVariables, ...variables })
+            )
+        )
+        if (args.merge) {
+            result.data = args.merge(previousResult.data, result.data)
+        }
+        return result
     }
-    const nextVariables = new Subject<Partial<TVariables>>()
-    let shouldRestore: ((result: OperationResultState<TData, TVariables>) => boolean) | null = null
+
+    const initialState: InfinityStoreResultState<TData, TVariables> = { fetching: true }
+    const store = writable(initialState)
+    const restoreStrategy = args.createRestoreStrategy?.({ store, fetch })
 
     // Prefetch data. We don't want to wait until the store is subscribed to. That allows us to use this function
     // inside a data loader and the data will be prefetched before the component is rendered.
-    initialVariables.subscribe(variables => {
-        void args.client.query(args.query, variables).toPromise()
+    fetch({}, {}).then(result => {
+        store.update(current => {
+            // Only set the initial state if we haven't already started another fetch process,
+            // e.g. when restoring the state.
+            if (current === initialState) {
+                return { ...result, fetching: false }
+            }
+            return current
+        })
     })
 
-    const result = readable(initialState, set => {
-        const subscription = initialVariables
-            .pipe(
-                switchMap(initialVariables =>
-                    nextVariables.pipe(
-                        startWith(initialVariables), // nextVaribles will not emit until the first fetchMore is called
-                        switchMap(variables => {
-                            const operation = args.client.createRequestOperation(
-                                'query',
-                                createRequest(args.query, { ...initialVariables, ...variables })
-                            )
-                            return concat(
-                                of({ fetching: true, stale: false, restoring: false }),
-                                from(args.client.executeRequestOperation(operation).toPromise()).pipe(
-                                    map(({ data, stale, operation, error, extensions }) => ({
-                                        fetching: false,
-                                        data,
-                                        stale: !!stale,
-                                        operation,
-                                        error,
-                                        extensions,
-                                    }))
-                                )
-                            )
-                        })
-                    )
-                ),
-                scan((result, update) => {
-                    const newResult = { ...result, ...update }
-                    return update.fetching ? newResult : args.combine(result, newResult)
-                }, initialState)
-            )
-            .subscribe(result => {
-                if (shouldRestore) {
-                    result.restoring = Boolean(
-                        (result.data || result.error) && shouldRestore(result) && args.nextVariables(result)
-                    )
+    /**
+     * Resolves when the store is not fetching anymore.
+     */
+    function waitTillReady(): Promise<void> {
+        let unsubscribe: () => void
+        return new Promise<void>(resolve => {
+            unsubscribe = store.subscribe(current => {
+                if (!current.fetching) {
+                    resolve()
                 }
-                set(result)
             })
-
-        return () => subscription.unsubscribe()
-    })
+        }).finally(() => unsubscribe())
+    }
 
     return {
-        ...result,
+        subscribe: store.subscribe,
         fetchMore: () => {
-            const current = get(result)
-            if (current.fetching || current.restoring) {
+            const previous = get(store)
+
+            if (previous.fetching) {
+                // When a fetch is already in progress, we don't want to start another one for the same variables.
                 return
             }
-            const newVariables = args.nextVariables(current)
-            if (!newVariables) {
-                return
-            }
-            nextVariables.next(newVariables)
-        },
-        restore: restoreHandler => {
-            shouldRestore = result => {
-                return Boolean((result.data || result.error) && restoreHandler(result) && args.nextVariables(result))
-            }
-            return new Promise(resolve => {
-                const unsubscribe = result.subscribe(result => {
-                    if (result.fetching) {
-                        return
-                    }
-                    if (result.data || result.error) {
-                        const newVariables = args.nextVariables(result)
-                        if (restoreHandler(result) && newVariables) {
-                            shouldRestore = restoreHandler
-                            nextVariables.next(newVariables)
-                        } else {
-                            unsubscribe()
-                            shouldRestore = null
-                            resolve()
+
+            if (previous.nextVariables && !previous.error) {
+                store.set({ ...previous, fetching: true })
+                fetch(previous.nextVariables, previous).then(result => {
+                    store.update(current => {
+                        if (previous.nextVariables === current.nextVariables) {
+                            return { ...result, fetching: false }
                         }
-                    }
+                        return current
+                    })
                 })
-            })
+            }
         },
+        fetchWhile: async predicate => {
+            // We need to wait until the store is not fetching anymore to ensure that we don't start
+            // another fetch process while one is already in progress.
+            await waitTillReady()
+            const current = get(store)
+
+            store.set({ ...current, fetching: true })
+
+            let result: InfinityStoreResult<TData, TVariables> = current
+            while (!result.error && result.nextVariables && result.data && predicate(result.data)) {
+                result = await fetch(result.nextVariables, result)
+            }
+
+            store.set({ ...result, fetching: false })
+        },
+        capture: () => restoreStrategy?.capture(get(store)),
+        restore: snapshot => {
+            if (restoreStrategy && snapshot) {
+                return restoreStrategy.restore(snapshot)
+            }
+            return Promise.resolve()
+        },
+    }
+}
+
+/**
+ * A restore strategy captures and restores the data state of a query.
+ */
+interface RestoreStrategy<TSnapshot, TData> {
+    capture(result: InfinityStoreResult<TData>): TSnapshot | undefined
+    restore(snapshot: TSnapshot): Promise<void>
+}
+
+// This needs to be exported so that TS type inference can work in SvelteKit generated files.
+export interface IncrementalRestoreStrategySnapshot<TVariables extends AnyVariables> {
+    count: number
+    variables?: Partial<TVariables>
+    nonce: string
+}
+
+// We use this to indentify snapshots that were created in the current "session", which
+// means there is a high chance that the data is still in the cache.
+const NONCE = uniqueID('repeat-restore')
+
+/**
+ * The incremental restore strategy captures and restores the data by counting the number of items.
+ * It will fetch more data until the count matches the snapshot count.
+ *
+ * This strategy is useful when every fetch returns a fixed number of items (i.e. after a cursor).
+ * In this case we want to make use of our GraphQL client's caching strategy and simply
+ * "replay" the previous fetches.
+ *
+ * This strategy works well when GraphQL requests are cached. To avoid waterfall requests in case the
+ * data is not cached, the strategy will fall back to requesting the data once with query variables
+ * from the snapshot.
+ */
+export class IncrementalRestoreStrategy<TData, TVariables extends AnyVariables>
+    implements RestoreStrategy<IncrementalRestoreStrategySnapshot<TVariables>, TData>
+{
+    constructor(
+        private api: InfinityAPI<TData, TVariables>,
+        /**
+         * A function to map the data to a number. This number will be used to count the items.
+         */
+        private mapper: (data: TData) => number,
+        /**
+         * A function to map the data to query variables. These variables will be used to fetch the data
+         * once when if there is a chance that the data is not in the cache (fallback).
+         */
+        private variablesMapper?: (data: TData) => Partial<TVariables>
+    ) {}
+
+    public capture(result: InfinityStoreResult<TData>): IncrementalRestoreStrategySnapshot<TVariables> | undefined {
+        return result.data
+            ? {
+                  count: this.mapper(result.data),
+                  variables: this.variablesMapper ? this.variablesMapper(result.data) : undefined,
+                  nonce: NONCE,
+              }
+            : undefined
+    }
+
+    public async restore(snapshot: IncrementalRestoreStrategySnapshot<TVariables>): Promise<void> {
+        this.api.store.set({ fetching: true })
+        const result = await (snapshot.nonce !== NONCE && snapshot.variables
+            ? this.api.fetch(snapshot.variables, {})
+            : this.fetch(snapshot))
+        this.api.store.set({ ...result, fetching: false })
+    }
+
+    private async fetch(
+        snapshot: IncrementalRestoreStrategySnapshot<TVariables>
+    ): Promise<InfinityStoreResult<TData, TVariables>> {
+        let current: InfinityStoreResult<TData, TVariables> = { nextVariables: {} }
+        while (current.nextVariables && ((current.data && this.mapper(current.data)) || 0) < snapshot.count) {
+            current = await this.api.fetch(current.nextVariables, current)
+            if (current.error || !current.data) {
+                break
+            }
+        }
+        return current
+    }
+}
+
+/**
+ * A restore strategy that overwrites the current store state with the response of a new query.
+ * The strategy uses the query variables form the snapshot to fetch the data.
+ */
+export class OverwriteRestoreStrategy<TData, TVariables extends AnyVariables>
+    implements RestoreStrategy<{ variables: Partial<TVariables> }, TData>
+{
+    constructor(
+        private api: InfinityAPI<TData, TVariables>,
+        private variablesMapper: (data: TData) => Partial<TVariables>
+    ) {}
+
+    capture(result: InfinityStoreResult<TData, TVariables>): { variables: Partial<TVariables> } | undefined {
+        if (!result.data) {
+            return undefined
+        }
+        const variables = this.variablesMapper(result.data)
+        return variables ? { variables } : undefined
+    }
+
+    async restore(snapshot: { variables: Partial<TVariables> }): Promise<void> {
+        this.api.store.set({ fetching: true })
+        const result = await this.api.fetch(snapshot.variables, {})
+        this.api.store.set({ ...result, fetching: false })
     }
 }
 
diff --git a/client/web-sveltekit/src/lib/repo/HistoryPanel.stories.svelte b/client/web-sveltekit/src/lib/repo/HistoryPanel.stories.svelte
index 67e0326d704..948bbefe2ff 100644
--- a/client/web-sveltekit/src/lib/repo/HistoryPanel.stories.svelte
+++ b/client/web-sveltekit/src/lib/repo/HistoryPanel.stories.svelte
@@ -2,12 +2,15 @@
     import { createHistoryResults } from '$testing/testdata'
     import { Story } from '@storybook/addon-svelte-csf'
     import HistoryPanel from './HistoryPanel.svelte'
+    import { readable } from 'svelte/store'
     export const meta = {
         component: HistoryPanel,
         parameters: {
             sveltekit_experimental: {
                 stores: {
-                    page: {},
+                    page: {
+                        url: new URL(window.location.href),
+                    },
                 },
             },
         },
@@ -17,12 +20,19 @@
 <script lang="ts">
     let commitCount = 5
     $: [initial] = createHistoryResults(1, commitCount)
+    $: store = {
+        ...readable({ data: initial.nodes, fetching: false }),
+        fetchMore: () => {},
+        fetchWhile: () => Promise.resolve(),
+        capture: () => undefined,
+        restore: () => Promise.resolve(),
+    }
 </script>
 
 <Story name="Default">
     <p>Commits to show: <input type="number" bind:value={commitCount} min="1" max="100" /></p>
     <hr />
     {#key commitCount}
-        <HistoryPanel history={initial} enableInlineDiffs={false} fetchMore={() => {}} />
+        <HistoryPanel history={store} enableInlineDiff={false} />
     {/key}
 </Story>
diff --git a/client/web-sveltekit/src/lib/repo/HistoryPanel.svelte b/client/web-sveltekit/src/lib/repo/HistoryPanel.svelte
index 6a2f1c82e8f..b34d9cd88dc 100644
--- a/client/web-sveltekit/src/lib/repo/HistoryPanel.svelte
+++ b/client/web-sveltekit/src/lib/repo/HistoryPanel.svelte
@@ -1,76 +1,64 @@
 <script lang="ts" context="module">
+    type HistoryStore = InfinityQueryStore<HistoryPanel_HistoryConnection['nodes'], { afterCursor: string | null }>
     export interface Capture {
+        history: ReturnType<HistoryStore['capture']>
         scroller?: ScrollerCapture
     }
 </script>
 
 <script lang="ts">
-    import { tick } from 'svelte'
-
     import { page } from '$app/stores'
     import Avatar from '$lib/Avatar.svelte'
     import { SourcegraphURL } from '$lib/common'
     import { scrollIntoViewOnMount } from '$lib/dom'
+    import type { InfinityQueryStore } from '$lib/graphql'
     import Icon from '$lib/Icon.svelte'
     import LoadingSpinner from '$lib/LoadingSpinner.svelte'
     import Scroller, { type Capture as ScrollerCapture } from '$lib/Scroller.svelte'
     import { replaceRevisionInURL } from '$lib/shared'
     import Timestamp from '$lib/Timestamp.svelte'
     import Tooltip from '$lib/Tooltip.svelte'
-    import { Badge } from '$lib/wildcard'
+    import { Alert, Badge } from '$lib/wildcard'
 
     import type { HistoryPanel_HistoryConnection } from './HistoryPanel.gql'
 
-    export let history: HistoryPanel_HistoryConnection | null
-    export let fetchMore: (afterCursor: string | null) => void
-    export let loading: boolean = false
+    export let history: HistoryStore
     export let enableInlineDiff: boolean = false
     export let enableViewAtCommit: boolean = false
 
     export function capture(): Capture {
         return {
+            history: history.capture(),
             scroller: scroller?.capture(),
         }
     }
 
     export async function restore(data: Capture) {
+        await history.restore(data.history)
+
+        // If the selected revision is not in the set of currently loaded commits, load more
+        if (selectedRev) {
+            await history.fetchWhile(data => !data.find(commit => selectedRev?.startsWith(commit.abbreviatedOID)))
+        }
+
         if (data.scroller) {
-            // Wait until DOM was update before updating the scroll position
-            await tick()
             // restore might be called when the history panel is closed
             // in which case scroller doesn't exist
             scroller?.restore(data.scroller)
         }
     }
 
-    function loadMore() {
-        if (history?.pageInfo.hasNextPage) {
-            fetchMore(history.pageInfo.endCursor)
-        }
-    }
-
     let scroller: Scroller
 
-    // If the selected revision is not in the set of currently loaded commits, load more
-    $: if (
-        selectedRev &&
-        history &&
-        history.nodes.length > 0 &&
-        !history.nodes.some(commit => commit.abbreviatedOID === selectedRev) &&
-        history.pageInfo.hasNextPage
-    ) {
-        loadMore()
-    }
-
     $: selectedRev = $page.url?.searchParams.get('rev')
     $: diffEnabled = $page.url?.searchParams.has('diff')
     $: closeURL = SourcegraphURL.from($page.url).deleteSearchParameter('rev', 'diff').toString()
 </script>
 
-<Scroller bind:this={scroller} margin={200} on:more={loadMore}>
-    {#if history}
+<Scroller bind:this={scroller} margin={200} on:more={history.fetchMore}>
+    {#if $history.data}
         <table>
-            {#each history.nodes as commit (commit.id)}
+            {#each $history.data as commit (commit.id)}
                 {@const selected = commit.abbreviatedOID === selectedRev || commit.oid === selectedRev}
                 <tr class:selected use:scrollIntoViewOnMount={selected}>
                     <td>
@@ -111,12 +99,22 @@
             {/each}
         </table>
     {/if}
-    {#if !history || loading}
-        <LoadingSpinner />
+    {#if $history.fetching}
+        <div class="info">
+            <LoadingSpinner />
+        </div>
+    {:else if $history.error}
+        <div class="info">
+            <Alert variant="danger">Unable to load history: {$history.error.message}</Alert>
+        </div>
     {/if}
 </Scroller>
 
 <style lang="scss">
+    .info {
+        padding: 0.5rem 1rem;
+    }
+
     table {
         width: 100%;
         max-width: 100%;
diff --git a/client/web-sveltekit/src/lib/search/input/SearchInput.svelte b/client/web-sveltekit/src/lib/search/input/SearchInput.svelte
index b4f1c311019..895de670bf2 100644
--- a/client/web-sveltekit/src/lib/search/input/SearchInput.svelte
+++ b/client/web-sveltekit/src/lib/search/input/SearchInput.svelte
@@ -200,7 +200,8 @@
     // When a toggle is unset, we revert back to the default pattern type. However, if the default pattern type
     // is regexp, we should revert to keyword instead (otherwise it's not possible to disable the toggle).
     function getUnselectedPatternType(): SearchPatternType {
-        const defaultPatternType = ($settings?.['search.defaultPatternType'] as SearchPatternType) ?? SearchPatternType.keyword
+        const defaultPatternType =
+            ($settings?.['search.defaultPatternType'] as SearchPatternType) ?? SearchPatternType.keyword
         return defaultPatternType === SearchPatternType.regexp ? SearchPatternType.keyword : defaultPatternType
     }
 
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.svelte b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.svelte
index 2b7e4db28e1..2e3ee515ce1 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.svelte
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.svelte
@@ -63,7 +63,6 @@
     import type { LayoutData, Snapshot } from './$types'
     import FileTree from './FileTree.svelte'
     import { createFileTreeStore } from './fileTreeStore'
-    import type { GitHistory_HistoryConnection, RepoPage_ReferencesLocationConnection } from './layout.gql'
     import ReferencePanel from './ReferencePanel.svelte'
 
     export let data: LayoutData
@@ -91,28 +90,15 @@
     let fileTreeSidePanel: Panel
     let historyPanel: HistoryPanel
     let selectedTab: number | null = null
-    let commitHistory: GitHistory_HistoryConnection | null
-    let references: RepoPage_ReferencesLocationConnection | null
     const fileTreeStore = createFileTreeStore({ fetchFileTreeData: fetchSidebarFileTree })
 
     $: ({ revision = '', parentPath, repoName, resolvedRevision, isCodyAvailable } = data)
     $: fileTreeStore.set({ repoName, revision: resolvedRevision.commitID, path: parentPath })
-    $: commitHistoryQuery = data.commitHistory
-    $: if (!!commitHistoryQuery) {
-        // Reset commit history when the query observable changes. Without
-        // this we are showing the commit history of the previously selected
-        // file/folder until the new commit history is loaded.
-        commitHistory = null
-    }
-
-    $: commitHistory = $commitHistoryQuery?.data?.repository?.commit?.ancestors ?? null
-
     // The observable query to fetch references (due to infinite scrolling)
     $: sgURL = SourcegraphURL.from($page.url)
     $: selectedLine = sgURL.lineRange
     $: referenceQuery =
         sgURL.viewState === 'references' && selectedLine?.line ? data.getReferenceStore(selectedLine) : null
-    $: references = $referenceQuery?.data?.repository?.commit?.blob?.lsif?.references ?? null
 
     afterNavigate(async () => {
         // We need to wait for referenceQuery to be updated before checking its state
@@ -289,32 +275,22 @@
                             {#key data.filePath}
                                 <HistoryPanel
                                     bind:this={historyPanel}
-                                    history={commitHistory}
-                                    loading={$commitHistoryQuery?.fetching ?? true}
-                                    fetchMore={commitHistoryQuery.fetchMore}
+                                    history={data.commitHistory}
                                     enableInlineDiff={$page.data.enableInlineDiff}
                                     enableViewAtCommit={$page.data.enableViewAtCommit}
                                 />
                             {/key}
                         </TabPanel>
                         <TabPanel title="References" shortcut={referenceHotkey}>
-                            {#if !referenceQuery}
+                            {#if referenceQuery}
+                                <ReferencePanel references={referenceQuery} />
+                            {:else}
                                 <div class="info">
                                     <Alert variant="info"
                                         >Hover over a symbol and click "Find references" to find references to the
                                         symbol.</Alert
                                     >
                                 </div>
-                            {:else if $referenceQuery && !$referenceQuery.fetching && (!references || references.nodes.length === 0)}
-                                <div class="info">
-                                    <Alert variant="info">No references found.</Alert>
-                                </div>
-                            {:else}
-                                <ReferencePanel
-                                    connection={references}
-                                    loading={$referenceQuery?.fetching ?? false}
-                                    on:more={referenceQuery?.fetchMore}
-                                />
                             {/if}
                         </TabPanel>
                     </Tabs>
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.ts b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.ts
index 58631216581..47c11a6ffac 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.ts
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/+layout.ts
@@ -1,11 +1,10 @@
 import { dirname } from 'path'
 
-import { from } from 'rxjs'
 import { readable, derived, type Readable } from 'svelte/store'
 
 import { CodyContextFiltersSchema, getFiltersFromCodyContextFilters } from '$lib/cody/config'
 import type { LineOrPositionOrRange } from '$lib/common'
-import { getGraphQLClient, infinityQuery, type GraphQLClient } from '$lib/graphql'
+import { getGraphQLClient, infinityQuery, type GraphQLClient, IncrementalRestoreStrategy } from '$lib/graphql'
 import { ROOT_PATH, fetchSidebarFileTree } from '$lib/repo/api/tree'
 import { resolveRevision } from '$lib/repo/utils'
 import { parseRepoRevision } from '$lib/shared'
@@ -54,45 +53,30 @@ export const load: LayoutLoad = async ({ parent, params }) => {
         commitHistory: infinityQuery({
             client,
             query: GitHistoryQuery,
-            variables: from(
-                resolvedRevision.then(revspec => ({
-                    repoName,
-                    revspec,
-                    filePath,
-                    first: HISTORY_COMMITS_PER_PAGE,
-                    afterCursor: null as string | null,
-                }))
-            ),
-            nextVariables: previousResult => {
-                if (previousResult?.data?.repository?.commit?.ancestors?.pageInfo?.hasNextPage) {
-                    return {
-                        afterCursor: previousResult.data.repository.commit.ancestors.pageInfo.endCursor,
-                    }
-                }
-                return undefined
-            },
-            combine: (previousResult, nextResult) => {
-                if (!nextResult.data?.repository?.commit) {
-                    return nextResult
-                }
-                const previousNodes = previousResult.data?.repository?.commit?.ancestors?.nodes ?? []
-                const nextNodes = nextResult.data.repository?.commit?.ancestors.nodes ?? []
+            variables: resolvedRevision.then(revspec => ({
+                repoName,
+                revspec,
+                filePath,
+                first: HISTORY_COMMITS_PER_PAGE,
+                afterCursor: null as string | null,
+            })),
+            map: result => {
+                const anestors = result.data?.repository?.commit?.ancestors
                 return {
-                    ...nextResult,
-                    data: {
-                        repository: {
-                            ...nextResult.data.repository,
-                            commit: {
-                                ...nextResult.data.repository.commit,
-                                ancestors: {
-                                    ...nextResult.data.repository.commit.ancestors,
-                                    nodes: [...previousNodes, ...nextNodes],
-                                },
-                            },
-                        },
-                    },
+                    nextVariables: anestors?.pageInfo.hasNextPage
+                        ? { afterCursor: anestors.pageInfo.endCursor }
+                        : undefined,
+                    data: anestors?.nodes,
+                    error: result.error,
                 }
             },
+            merge: (previous, next) => (previous ?? []).concat(next ?? []),
+            createRestoreStrategy: api =>
+                new IncrementalRestoreStrategy(
+                    api,
+                    n => n.length,
+                    n => ({ first: n.length })
+                ),
         }),
 
         // We are not extracting the selected position from the URL because that creates a dependency
@@ -101,56 +85,27 @@ export const load: LayoutLoad = async ({ parent, params }) => {
             infinityQuery({
                 client,
                 query: RepoPage_PreciseCodeIntel,
-                variables: from(
-                    resolvedRevision.then(revspec => ({
-                        repoName,
-                        revspec,
-                        filePath,
-                        first: REFERENCES_PER_PAGE,
-                        // Line and character are 1-indexed, but the API expects 0-indexed
-                        line: lineOrPosition.line - 1,
-                        character: lineOrPosition.character! - 1,
-                        afterCursor: null as string | null,
-                    }))
-                ),
-                nextVariables: previousResult => {
-                    if (previousResult?.data?.repository?.commit?.blob?.lsif?.references.pageInfo.hasNextPage) {
-                        return {
-                            afterCursor: previousResult.data.repository.commit.blob.lsif.references.pageInfo.endCursor,
-                        }
-                    }
-                    return undefined
-                },
-                combine: (previousResult, nextResult) => {
-                    if (!nextResult.data?.repository?.commit?.blob?.lsif) {
-                        return nextResult
-                    }
-
-                    const previousNodes = previousResult.data?.repository?.commit?.blob?.lsif?.references?.nodes ?? []
-                    const nextNodes = nextResult.data?.repository?.commit?.blob?.lsif?.references?.nodes ?? []
-
+                variables: resolvedRevision.then(revspec => ({
+                    repoName,
+                    revspec,
+                    filePath,
+                    first: REFERENCES_PER_PAGE,
+                    // Line and character are 1-indexed, but the API expects 0-indexed
+                    line: lineOrPosition.line - 1,
+                    character: lineOrPosition.character! - 1,
+                    afterCursor: null as string | null,
+                })),
+                map: result => {
+                    const references = result.data?.repository?.commit?.blob?.lsif?.references
                     return {
-                        ...nextResult,
-                        data: {
-                            repository: {
-                                ...nextResult.data.repository,
-                                commit: {
-                                    ...nextResult.data.repository.commit,
-                                    blob: {
-                                        ...nextResult.data.repository.commit.blob,
-                                        lsif: {
-                                            ...nextResult.data.repository.commit.blob.lsif,
-                                            references: {
-                                                ...nextResult.data.repository.commit.blob.lsif.references,
-                                                nodes: [...previousNodes, ...nextNodes],
-                                            },
-                                        },
-                                    },
-                                },
-                            },
-                        },
+                        nextVariables: references?.pageInfo.hasNextPage
+                            ? { afterCursor: references.pageInfo.endCursor }
+                            : undefined,
+                        data: references?.nodes,
+                        error: result.error,
                     }
                 },
+                merge: (previous, next) => (previous ?? []).concat(next ?? []),
             }),
     }
 }
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/ReferencePanel.svelte b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/ReferencePanel.svelte
index 60da6e35a88..c567a828580 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/ReferencePanel.svelte
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/ReferencePanel.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     import { SourcegraphURL } from '$lib/common'
+    import type { InfinityQueryStore } from '$lib/graphql'
     import LoadingSpinner from '$lib/LoadingSpinner.svelte'
     import Scroller from '$lib/Scroller.svelte'
     import Tooltip from '$lib/Tooltip.svelte'
+    import { Alert } from '$lib/wildcard'
     import Panel from '$lib/wildcard/resizable-panel/Panel.svelte'
     import PanelGroup from '$lib/wildcard/resizable-panel/PanelGroup.svelte'
     import PanelResizeHandle from '$lib/wildcard/resizable-panel/PanelResizeHandle.svelte'
@@ -11,8 +13,7 @@
     import type { ReferencePanel_LocationConnection, ReferencePanel_Location } from './ReferencePanel.gql'
     import ReferencePanelCodeExcerpt from './ReferencePanelCodeExcerpt.svelte'
 
-    export let connection: ReferencePanel_LocationConnection | null
-    export let loading: boolean
+    export let references: InfinityQueryStore<ReferencePanel_LocationConnection['nodes']>
 
     // It appears that the backend returns duplicate locations. We need to filter them out.
     function unique(locations: ReferencePanel_Location[]): ReferencePanel_Location[] {
@@ -41,13 +42,18 @@
     let selectedLocation: ReferencePanel_Location | null = null
 
     $: previewURL = selectedLocation ? getPreviewURL(selectedLocation) : null
-    $: locations = connection ? unique(connection.nodes) : []
+    $: locations = $references.data ? unique($references.data) : []
 </script>
 
 <div class="root">
     <PanelGroup id="references">
         <Panel id="references-list">
-            <Scroller margin={600} on:more>
+            <Scroller margin={600} on:more={references.fetchMore}>
+                {#if !$references.fetching && !$references.error && locations.length === 0}
+                    <div class="info">
+                        <Alert variant="info">No references found.</Alert>
+                    </div>
+                {/if}
                 <ul>
                     {#each locations as location (location.canonicalURL)}
                         {@const selected = selectedLocation?.canonicalURL === location.canonicalURL}
@@ -76,8 +82,12 @@
                         </li>
                     {/each}
                 </ul>
-                {#if loading}
+                {#if $references.fetching}
                     <div class="loader"><LoadingSpinner center /></div>
+                {:else if $references.error}
+                    <div class="loader">
+                        <Alert variant="danger">Unable to load references: {$references.error.message}</Alert>
+                    </div>
                 {/if}
             </Scroller>
         </Panel>
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/-/commits/[...path]/+page.svelte b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/-/commits/[...path]/+page.svelte
index 28978c5ef47..0e571a12a30 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/-/commits/[...path]/+page.svelte
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/-/commits/[...path]/+page.svelte
@@ -13,26 +13,25 @@
     import RepositoryRevPicker from '../../../RepositoryRevPicker.svelte'
 
     import type { PageData, Snapshot } from './$types'
-    import type { CommitsPage_GitCommitConnection } from './page.gql'
 
     export let data: PageData
 
     // This tracks the number of commits that have been loaded and the current scroll
     // position, so both can be restored when the user refreshes the page or navigates
     // back to it.
-    export const snapshot: Snapshot<{ commitCount: number; scroller: ScrollerCapture }> = {
+    export const snapshot: Snapshot<{
+        commits: ReturnType<typeof data.commitsQuery.capture>
+        scroller: ScrollerCapture
+    }> = {
         capture() {
             return {
-                commitCount: commits?.nodes.length ?? 0,
+                commits: commitsQuery.capture(),
                 scroller: scroller.capture(),
             }
         },
         async restore(snapshot) {
-            if (snapshot?.commitCount !== undefined && get(navigating)?.type === 'popstate') {
-                await commitsQuery?.restore(result => {
-                    const count = result.data?.repository?.commit?.ancestors.nodes?.length
-                    return !!count && count < snapshot.commitCount
-                })
+            if (get(navigating)?.type === 'popstate') {
+                await commitsQuery?.restore(snapshot.commits)
             }
             scroller.restore(snapshot.scroller)
         },
@@ -43,14 +42,9 @@
     }
 
     let scroller: Scroller
-    let commits: CommitsPage_GitCommitConnection | null = null
 
     $: commitsQuery = data.commitsQuery
-    // We conditionally check for the ancestors field to be able to show
-    // previously loaded commits when an error occurs while fetching more commits.
-    $: if ($commitsQuery?.data?.repository?.commit?.ancestors) {
-        commits = $commitsQuery.data.repository.commit.ancestors
-    }
+    $: commits = $commitsQuery.data
     $: pageTitle = (() => {
         const parts = ['Commits']
         if (data.path) {
@@ -86,9 +80,9 @@
 </header>
 <section>
     <Scroller bind:this={scroller} margin={600} on:more={fetchMore}>
-        {#if !$commitsQuery.restoring && commits}
+        {#if commits}
             <ul class="commits">
-                {#each commits.nodes as commit (commit.canonicalURL)}
+                {#each commits as commit (commit.canonicalURL)}
                     <li>
                         <div class="commit">
                             <Commit {commit} />
@@ -122,7 +116,7 @@
                 {/each}
             </ul>
         {/if}
-        {#if $commitsQuery.fetching || $commitsQuery.restoring}
+        {#if $commitsQuery.fetching}
             <div class="footer">
                 <LoadingSpinner />
             </div>
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/-/commits/[...path]/+page.ts b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/-/commits/[...path]/+page.ts
index d78c7de0e24..8eea1053666 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/-/commits/[...path]/+page.ts
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/-/commits/[...path]/+page.ts
@@ -1,6 +1,4 @@
-import { from } from 'rxjs'
-
-import { getGraphQLClient, infinityQuery } from '$lib/graphql'
+import { IncrementalRestoreStrategy, getGraphQLClient, infinityQuery } from '$lib/graphql'
 import { resolveRevision } from '$lib/repo/utils'
 import { parseRepoRevision } from '$lib/shared'
 
@@ -18,45 +16,31 @@ export const load: PageLoad = ({ parent, params }) => {
     const commitsQuery = infinityQuery({
         client,
         query: CommitsPage_CommitsQuery,
-        variables: from(
-            resolvedRevision.then(revision => ({
-                repoName,
-                revision,
-                first: PAGE_SIZE,
-                path,
-                afterCursor: null as string | null,
-            }))
-        ),
-        nextVariables: previousResult => {
-            if (previousResult?.data?.repository?.commit?.ancestors?.pageInfo?.hasNextPage) {
-                return {
-                    afterCursor: previousResult.data.repository.commit.ancestors.pageInfo.endCursor,
-                }
-            }
-            return undefined
-        },
-        combine: (previousResult, nextResult) => {
-            if (!nextResult.data?.repository?.commit) {
-                return nextResult
-            }
-            const previousNodes = previousResult.data?.repository?.commit?.ancestors?.nodes ?? []
-            const nextNodes = nextResult.data.repository?.commit?.ancestors.nodes ?? []
+        variables: resolvedRevision.then(revision => ({
+            repoName,
+            revision,
+            first: PAGE_SIZE,
+            path,
+            afterCursor: null as string | null,
+        })),
+        map: result => {
+            const ancestors = result.data?.repository?.commit?.ancestors
             return {
-                ...nextResult,
-                data: {
-                    repository: {
-                        ...nextResult.data.repository,
-                        commit: {
-                            ...nextResult.data.repository.commit,
-                            ancestors: {
-                                ...nextResult.data.repository.commit.ancestors,
-                                nodes: [...previousNodes, ...nextNodes],
-                            },
-                        },
-                    },
-                },
+                nextVariables:
+                    ancestors?.pageInfo?.endCursor && ancestors.pageInfo.hasNextPage
+                        ? { afterCursor: ancestors.pageInfo.endCursor }
+                        : undefined,
+                data: ancestors?.nodes,
+                error: result.error,
             }
         },
+        merge: (previous, next) => (previous ?? []).concat(next ?? []),
+        createRestoreStrategy: api =>
+            new IncrementalRestoreStrategy(
+                api,
+                n => n.length,
+                n => ({ first: n.length })
+            ),
     })
 
     return {
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/-/branches/all/+page.svelte b/client/web-sveltekit/src/routes/[...repo=reporev]/-/branches/all/+page.svelte
index 4b8fe83f081..a73396fef3b 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/-/branches/all/+page.svelte
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/-/branches/all/+page.svelte
@@ -8,39 +8,34 @@
     import GitReference from '$lib/repo/GitReference.svelte'
     import Scroller, { type Capture as ScrollerCapture } from '$lib/Scroller.svelte'
     import { Alert, Button, Input } from '$lib/wildcard'
-    import type { GitBranchesConnection } from '$testing/graphql-type-mocks'
 
     import type { PageData, Snapshot } from './$types'
 
     export let data: PageData
 
-    export const snapshot: Snapshot<{ count: number; scroller: ScrollerCapture }> = {
+    export const snapshot: Snapshot<{
+        branches: ReturnType<typeof data.branchesQuery.capture>
+        scroller: ScrollerCapture
+    }> = {
         capture() {
             return {
-                count: branchesConnection?.nodes.length ?? 0,
+                branches: data.branchesQuery.capture(),
                 scroller: scroller.capture(),
             }
         },
         async restore(snapshot) {
-            if (snapshot?.count && get(navigating)?.type === 'popstate') {
-                await branchesQuery?.restore(result => {
-                    const count = result.data?.repository?.branches?.nodes?.length
-                    return !!count && count < snapshot.count
-                })
+            if (get(navigating)?.type === 'popstate') {
+                await data.branchesQuery?.restore(snapshot.branches)
             }
             scroller.restore(snapshot.scroller)
         },
     }
 
     let scroller: Scroller
-    let branchesConnection: GitBranchesConnection | undefined
 
     $: query = data.query
     $: branchesQuery = data.branchesQuery
-    $: branchesConnection = $branchesQuery.data?.repository?.branches ?? branchesConnection
-    $: if (branchesQuery) {
-        branchesConnection = undefined
-    }
+    $: branches = $branchesQuery.data
 </script>
 
 <svelte:head>
@@ -53,15 +48,15 @@
         <Button variant="primary" type="submit">Search</Button>
     </form>
     <Scroller bind:this={scroller} margin={600} on:more={branchesQuery.fetchMore}>
-        {#if !$branchesQuery.restoring && branchesConnection}
+        {#if branches}
             <table>
                 <tbody>
-                    {#each branchesConnection.nodes as tag (tag)}
-                        <GitReference ref={tag} />
+                    {#each branches.nodes as branch (branch)}
+                        <GitReference ref={branch} />
                     {:else}
                         <tr>
                             <td colspan="2">
-                                <Alert variant="info">No tags found</Alert>
+                                <Alert variant="info">No branches found</Alert>
                             </td>
                         </tr>
                     {/each}
@@ -69,7 +64,7 @@
             </table>
         {/if}
         <div>
-            {#if $branchesQuery.fetching || $branchesQuery.restoring}
+            {#if $branchesQuery.fetching}
                 <LoadingSpinner />
             {:else if $branchesQuery.error}
                 <Alert variant="danger">
@@ -78,12 +73,12 @@
             {/if}
         </div>
     </Scroller>
-    {#if branchesConnection && branchesConnection.nodes.length > 0}
+    {#if branches && branches.nodes.length > 0}
         <div class="footer">
-            {branchesConnection.totalCount}
-            {pluralize('branch', branchesConnection.totalCount)} total
-            {#if branchesConnection.totalCount > branchesConnection.nodes.length}
-                (showing {branchesConnection.nodes.length})
+            {branches.totalCount}
+            {pluralize('branch', branches.totalCount)} total
+            {#if branches.totalCount > branches.nodes.length}
+                (showing {branches.nodes.length})
             {/if}
         </div>
     {/if}
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/-/branches/all/+page.ts b/client/web-sveltekit/src/routes/[...repo=reporev]/-/branches/all/+page.ts
index bbc3fd4f189..66bed51fd46 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/-/branches/all/+page.ts
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/-/branches/all/+page.ts
@@ -1,4 +1,4 @@
-import { getGraphQLClient, infinityQuery } from '$lib/graphql'
+import { getGraphQLClient, infinityQuery, OverwriteRestoreStrategy } from '$lib/graphql'
 import { parseRepoRevision } from '$lib/shared'
 
 import type { PageLoad } from './$types'
@@ -22,17 +22,22 @@ export const load: PageLoad = ({ params, url }) => {
                 withBehindAhead: true,
                 query,
             },
-            nextVariables: previousResult => {
-                if (previousResult?.data?.repository?.branches?.pageInfo?.hasNextPage) {
-                    return {
-                        first: previousResult.data.repository.branches.nodes.length + PAGE_SIZE,
-                    }
+            map: result => {
+                const branches = result.data?.repository?.branches
+                return {
+                    nextVariables: branches?.pageInfo.hasNextPage
+                        ? { first: branches.nodes.length + PAGE_SIZE }
+                        : undefined,
+                    data: branches
+                        ? {
+                              nodes: branches.nodes,
+                              totalCount: branches.totalCount,
+                          }
+                        : undefined,
+                    error: result.error,
                 }
-                return undefined
-            },
-            combine: (_previousResult, nextResult) => {
-                return nextResult
             },
+            createRestoreStrategy: api => new OverwriteRestoreStrategy(api, data => ({ first: data.nodes.length })),
         }),
     }
 }
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/-/commit/[...revspec]/+page.svelte b/client/web-sveltekit/src/routes/[...repo=reporev]/-/commit/[...revspec]/+page.svelte
index c6e54c16109..d50c194476c 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/-/commit/[...revspec]/+page.svelte
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/-/commit/[...revspec]/+page.svelte
@@ -21,7 +21,7 @@
 
     interface Capture {
         scroll: ScrollerCapture
-        diffCount: number
+        diffs?: ReturnType<NonNullable<typeof data.diff>['capture']>
         expandedDiffs: Array<[number, boolean]>
     }
 
@@ -30,16 +30,13 @@
     export const snapshot: Snapshot<Capture> = {
         capture: () => ({
             scroll: scroller.capture(),
-            diffCount: diffs?.nodes.length ?? 0,
+            diffs: diffQuery?.capture(),
             expandedDiffs: Array.from(expandedDiffs.entries()),
         }),
         restore: async capture => {
             expandedDiffs = new Map(capture.expandedDiffs)
-            if (capture?.diffCount !== undefined && get(navigating)?.type === 'popstate') {
-                await data.diff?.restore(result => {
-                    const count = result.data?.repository?.comparison.fileDiffs.nodes.length
-                    return !!count && count < capture.diffCount
-                })
+            if (get(navigating)?.type === 'popstate') {
+                await data.diff?.restore(capture.diffs)
             }
             scroller.restore(capture.scroll)
         },
@@ -50,7 +47,6 @@
     let expandedDiffs = new Map<number, boolean>()
 
     $: diffQuery = data.diff
-    $: diffs = $diffQuery?.data?.repository?.comparison.fileDiffs ?? null
 
     afterNavigate(() => {
         repositoryContext.set({ revision: data.commit.abbreviatedOID })
@@ -66,7 +62,7 @@
 
 <section>
     {#if data.commit}
-        <Scroller bind:this={scroller} margin={600} on:more={data.diff?.fetchMore}>
+        <Scroller bind:this={scroller} margin={600} on:more={diffQuery?.fetchMore}>
             <div class="header">
                 <div class="info"><Commit commit={data.commit} alwaysExpanded /></div>
                 <div class="parents">
@@ -104,9 +100,9 @@
                 </div>
             </div>
             <hr />
-            {#if !$diffQuery?.restoring && diffs}
+            {#if $diffQuery?.data}
                 <ul class="diffs">
-                    {#each diffs.nodes as node, index}
+                    {#each $diffQuery.data as node, index}
                         <li>
                             <FileDiff
                                 fileDiff={node}
@@ -117,7 +113,7 @@
                     {/each}
                 </ul>
             {/if}
-            {#if $diffQuery?.fetching || $diffQuery?.restoring}
+            {#if $diffQuery?.fetching}
                 <LoadingSpinner />
             {:else if $diffQuery?.error}
                 <div class="error">
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/-/commit/[...revspec]/+page.ts b/client/web-sveltekit/src/routes/[...repo=reporev]/-/commit/[...revspec]/+page.ts
index 2e75ca8073e..0ade7909774 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/-/commit/[...revspec]/+page.ts
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/-/commit/[...revspec]/+page.ts
@@ -1,6 +1,6 @@
 import { error } from '@sveltejs/kit'
 
-import { getGraphQLClient, infinityQuery } from '$lib/graphql'
+import { IncrementalRestoreStrategy, getGraphQLClient, infinityQuery } from '$lib/graphql'
 import { parseRepoRevision } from '$lib/shared'
 
 import type { PageLoad } from './$types'
@@ -38,44 +38,21 @@ export const load: PageLoad = async ({ params }) => {
                       first: PAGE_SIZE,
                       after: null as string | null,
                   },
-                  nextVariables: previousResult => {
-                      if (
-                          !previousResult.error &&
-                          previousResult?.data?.repository?.comparison?.fileDiffs?.pageInfo?.hasNextPage
-                      ) {
-                          return {
-                              after: previousResult.data.repository.comparison.fileDiffs.pageInfo.endCursor,
-                          }
-                      }
-                      return undefined
-                  },
-                  combine: (previousResult, nextResult) => {
-                      if (!nextResult.data?.repository?.comparison) {
-                          return {
-                              ...nextResult,
-                              // When this code path is executed we probably have an error.
-                              // We still want to show the data that was loaded before the error occurred.
-                              data: previousResult.data,
-                          }
-                      }
-                      const previousNodes = previousResult.data?.repository?.comparison?.fileDiffs?.nodes ?? []
-                      const nextNodes = nextResult.data.repository?.comparison?.fileDiffs?.nodes ?? []
+                  map: result => {
+                      const diffs = result.data?.repository?.comparison.fileDiffs
                       return {
-                          ...nextResult,
-                          data: {
-                              repository: {
-                                  ...nextResult.data.repository,
-                                  comparison: {
-                                      ...nextResult.data.repository.comparison,
-                                      fileDiffs: {
-                                          ...nextResult.data.repository.comparison.fileDiffs,
-                                          nodes: [...previousNodes, ...nextNodes],
-                                      },
-                                  },
-                              },
-                          },
+                          nextVariables: diffs?.pageInfo.hasNextPage ? { after: diffs?.pageInfo.endCursor } : undefined,
+                          data: diffs?.nodes,
+                          error: result.error,
                       }
                   },
+                  merge: (previous, next) => (previous ?? []).concat(next ?? []),
+                  createRestoreStrategy: api =>
+                      new IncrementalRestoreStrategy(
+                          api,
+                          n => n.length,
+                          n => ({ first: n.length })
+                      ),
               })
             : null
 
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/-/tags/+page.svelte b/client/web-sveltekit/src/routes/[...repo=reporev]/-/tags/+page.svelte
index 2a9807beac3..370ee8edcf7 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/-/tags/+page.svelte
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/-/tags/+page.svelte
@@ -10,37 +10,29 @@
     import { Alert, Button, Input } from '$lib/wildcard'
 
     import type { PageData, Snapshot } from './$types'
-    import type { GitTagsConnection } from './page.gql'
 
     export let data: PageData
 
-    export const snapshot: Snapshot<{ count: number; scroller: ScrollerCapture }> = {
+    export const snapshot: Snapshot<{ tags: ReturnType<typeof data.tagsQuery.capture>; scroller: ScrollerCapture }> = {
         capture() {
             return {
-                count: tagsConnection?.nodes.length ?? 0,
+                tags: data.tagsQuery.capture(),
                 scroller: scroller.capture(),
             }
         },
         async restore(snapshot) {
-            if (snapshot?.count && get(navigating)?.type === 'popstate') {
-                await tagsQuery?.restore(result => {
-                    const count = result.data?.repository?.gitRefs?.nodes?.length
-                    return !!count && count < snapshot.count
-                })
+            if (snapshot?.tags && get(navigating)?.type === 'popstate') {
+                await data.tagsQuery?.restore(snapshot.tags)
             }
             scroller.restore(snapshot.scroller)
         },
     }
 
     let scroller: Scroller
-    let tagsConnection: GitTagsConnection | undefined
 
     $: query = data.query
     $: tagsQuery = data.tagsQuery
-    $: tagsConnection = $tagsQuery.data?.repository?.gitRefs ?? tagsConnection
-    $: if (tagsQuery) {
-        tagsConnection = undefined
-    }
+    $: tags = $tagsQuery.data
 </script>
 
 <svelte:head>
@@ -53,10 +45,10 @@
         <Button variant="primary" type="submit">Search</Button>
     </form>
     <Scroller bind:this={scroller} margin={600} on:more={tagsQuery.fetchMore}>
-        {#if !$tagsQuery.restoring && tagsConnection}
+        {#if tags}
             <table>
                 <tbody>
-                    {#each tagsConnection.nodes as tag (tag)}
+                    {#each tags.nodes as tag (tag)}
                         <GitReference ref={tag} />
                     {:else}
                         <tr>
@@ -69,7 +61,7 @@
             </table>
         {/if}
         <div>
-            {#if $tagsQuery.fetching || $tagsQuery.restoring}
+            {#if $tagsQuery.fetching}
                 <LoadingSpinner />
             {:else if $tagsQuery.error}
                 <Alert variant="danger">
@@ -78,12 +70,12 @@
             {/if}
         </div>
     </Scroller>
-    {#if tagsConnection && tagsConnection.nodes.length > 0}
+    {#if tags && tags.nodes.length > 0}
         <div class="footer">
-            {tagsConnection.totalCount}
-            {pluralize('tag', tagsConnection.totalCount)} total
-            {#if tagsConnection.totalCount > tagsConnection.nodes.length}
-                (showing {tagsConnection.nodes.length})
+            {tags.totalCount}
+            {pluralize('tag', tags.totalCount)} total
+            {#if tags.totalCount > tags.nodes.length}
+                (showing {tags.nodes.length})
             {/if}
         </div>
     {/if}
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/-/tags/+page.ts b/client/web-sveltekit/src/routes/[...repo=reporev]/-/tags/+page.ts
index cc853072d12..b440f0ca1c0 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/-/tags/+page.ts
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/-/tags/+page.ts
@@ -1,4 +1,4 @@
-import { getGraphQLClient, infinityQuery } from '$lib/graphql'
+import { OverwriteRestoreStrategy, getGraphQLClient, infinityQuery } from '$lib/graphql'
 import { parseRepoRevision } from '$lib/shared'
 
 import type { PageLoad } from './$types'
@@ -22,17 +22,22 @@ export const load: PageLoad = ({ params, url }) => {
                 withBehindAhead: false,
                 query,
             },
-            nextVariables: previousResult => {
-                if (previousResult?.data?.repository?.gitRefs?.pageInfo?.hasNextPage) {
-                    return {
-                        first: previousResult.data.repository.gitRefs.nodes.length + PAGE_SIZE,
-                    }
+            map: result => {
+                const gitRefs = result.data?.repository?.gitRefs
+                return {
+                    nextVariables: gitRefs?.pageInfo.hasNextPage
+                        ? { first: gitRefs.nodes.length + PAGE_SIZE }
+                        : undefined,
+                    data: gitRefs
+                        ? {
+                              nodes: gitRefs.nodes,
+                              totalCount: gitRefs.totalCount,
+                          }
+                        : undefined,
+                    error: result.error,
                 }
-                return undefined
-            },
-            combine: (_previousResult, nextResult) => {
-                return nextResult
             },
+            createRestoreStrategy: api => new OverwriteRestoreStrategy(api, data => ({ first: data.nodes.length })),
         }),
     }
 }