@teleporthq/teleport-plugin-next-data-source 0.44.0 → 0.44.4

package/src/pagination-plugin.ts

@@ -3,15 +3,28 @@ import {
   ComponentPluginFactory,
   ChunkType,
   FileType,
+  UIDLStateDefinition,
 } from '@teleporthq/teleport-types'
 import * as types from '@babel/types'
 import { parseExpression } from '@babel/parser'
 import { ASTStatementOrder, GenericUtils, StringUtils } from '@teleporthq/teleport-shared'
-import { ASTUtils, URLQueryWriter, URLSearchParamSync } from '@teleporthq/teleport-plugin-common'
+import {
+  ASTUtils,
+  RouteUtils,
+  URLQueryWriter,
+  URLSearchParamSync,
+} from '@teleporthq/teleport-plugin-common'
 import { collectFilterLeafConditions, generateSafeFileName, pruneFilterTree } from './utils'
 import { generateDataSourceFetcherWithCore } from './data-source-fetchers'
 import { buildProductTransformOptions, type EntityTransformOptions } from './transformations'
-import { appendSortsParam, DynamicSortAST, extractDynamicSort, readFixedSort } from './sort-utils'
+import {
+  appendSortsParam,
+  buildSortAtStartGuard,
+  buildStartingSortsValue,
+  DynamicSortAST,
+  readRepeaterSort,
+  type SortStateDefault,
+} from './sort-utils'
 import {
   appendFiltersParam,
   buildStaticFiltersStringifyCall,
@@ -32,6 +45,7 @@ import {
   buildCacheStoreThen,
   buildCachedFetchBody,
   buildCachedParamsDeclarations,
+  paramsVarFor,
   registerCacheClientImports,
 } from './cache/ast'
 import {
@@ -60,9 +74,13 @@ import {
 import {
   buildAccumulatingRequestMark,
   buildAccumulatingResponseHandler,
+  buildAppendingRequestCheck,
+  buildFirstPageDeclaration,
+  buildFirstPageSeedEffect,
   buildInfiniteScrollDeclarations,
   buildSentinelElement,
   buildSentinelObserverEffect,
+  buildServerRowsExpression,
   getInfiniteScrollVars,
 } from './infinite-scroll'
 import {
@@ -197,6 +215,12 @@ interface DataSourceUsage {
   // Dynamic single-column sort bound to component state (set when legacy sorts empty
   // and cms-list-repeater declares sort/sortDirection fields)
   dynamicSort?: DynamicSortAST
+  // With `dynamicSort`: the states it reads, at the values a visitor starts
+  // with (`readSortStateDefaults`). The build fetches the first page by that
+  // sort, and the list takes those rows while the sort is still there. Absent
+  // when the build cannot know the starting sort: the list then fetches its
+  // first page in the browser.
+  startingSort?: SortStateDefault[]
   // Filters from resource params, as the TREE the inspector authored: condition
   // leaves and `{ type: 'group', operator, children }` entries (see
   // `readFilterTree`). Anything that needs the leaves walks the tree with
@@ -456,7 +480,10 @@ function buildFilterDestinationExpression(destination: unknown): types.Expressio
 }
 
 // Scan UIDL to find all data source usages and build a registry
-function buildStateRegistry(uidlNode: any): StateRegistry {
+function buildStateRegistry(
+  uidlNode: any,
+  stateDefinitions?: Record<string, UIDLStateDefinition>
+): StateRegistry {
   const usages: DataSourceUsage[] = []
   const byDataSourceId = new Map<string, DataSourceUsage[]>()
   const byArrayMapperRenderProp = new Map<string, DataSourceUsage>()
@@ -525,15 +552,20 @@ function buildStateRegistry(uidlNode: any): StateRegistry {
         // is skipped for a dynamic sort) — the pre-rendered HTML carried no
         // posts, and the browser fetched page 1 a second time. Only a sort
         // bound to state (the admin panel's sortable columns) is dynamic.
-        let dynamicSort: DynamicSortAST | undefined
-        if ((!sorts || sorts.length === 0) && content.sort) {
-          const fixedSort = readFixedSort(content.sort, content.sortDirection)
-          if (fixedSort) {
-            sorts = [fixedSort]
-          } else {
-            dynamicSort = extractDynamicSort(content.sort, content.sortDirection)
-          }
+        //
+        // A sort the visitor picks still starts somewhere — the store's sort
+        // dropdown at "Name A-Z". Known at build time, it orders the
+        // server-side first page, which the list then shows while the visitor
+        // leaves the sort alone. Read as a plain list's page fetch reads it.
+        const repeaterSort =
+          !sorts || sorts.length === 0
+            ? readRepeaterSort(content.sort, content.sortDirection, stateDefinitions)
+            : {}
+        if (repeaterSort.fixed) {
+          sorts = [repeaterSort.fixed]
         }
+        const dynamicSort = repeaterSort.dynamic
+        const startingSort = repeaterSort.starting
 
         // Extract filters from parent's resource params, keeping the group tree
         // the inspector authored (see `readFilterTree`).
@@ -628,6 +660,7 @@ function buildStateRegistry(uidlNode: any): StateRegistry {
           queryColumns,
           sorts,
           dynamicSort,
+          startingSort,
           filters,
           filterStateIds,
           filterPropIds,
@@ -1220,7 +1253,7 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
     const hasRangeControl = rangeControls.length > 0
 
     // STEP 1: Build state registry from UIDL
-    const registry = buildStateRegistry(uidl.node)
+    const registry = buildStateRegistry(uidl.node, uidl.stateDefinitions)
 
     if (registry.usages.length === 0) {
       return structure
@@ -1847,6 +1880,9 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
     // widgets can be matched to their owner rather than counted off in order.
     const usageByProviderNode = new Map<any, DataSourceUsage>()
     const cacheDeclarations: types.Statement[] = []
+    // Only a page has rows of its own to start an appending list from: its
+    // `getStaticProps` fetched page 1 (`updateGetStaticProps`).
+    const firstPageDeclarations: types.Statement[] | undefined = isPage ? [] : undefined
 
     dataProvidersWithRepeaters.forEach((dp) => {
       const nameAttr = dp.openingElement.attributes.find(
@@ -1885,10 +1921,19 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
           vars,
           fileName,
           cacheDeclarations,
-          localized
+          localized,
+          firstPageDeclarations
         )
       } else if (usage.category === 'paginated-only') {
-        updateDataProviderForPaginationOnly(dp, usage, vars, fileName, cacheDeclarations, localized)
+        updateDataProviderForPaginationOnly(
+          dp,
+          usage,
+          vars,
+          fileName,
+          cacheDeclarations,
+          localized,
+          firstPageDeclarations
+        )
       } else if (usage.category === 'search-only') {
         updateDataProviderForSearchOnly(dp, usage, vars, fileName, cacheDeclarations, localized)
       } else if (usage.category === 'plain') {
@@ -1899,9 +1944,17 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
       // change refetches, instead of leaving the previous rows on screen with
       // no feedback. Runs last so it sees the `fetchData` and
       // `persistDataDuringLoading` attributes the updaters above just wrote.
+      // An appending list keeps its rows on screen while its next page loads;
+      // only a list loading afresh falls through to the loading slot.
       const loadingVars = getLoadingStateVars(usage.index)
-      if (applyLoadingStateToDataProvider(dp, loadingVars)) {
-        loadingStateDeclarations.push(...buildLoadingStateDeclarations(loadingVars))
+      const appendingRequest =
+        usage.infiniteScroll && usage.paginated
+          ? buildAppendingRequestCheck(getInfiniteScrollVars(usage.index))
+          : undefined
+      if (applyLoadingStateToDataProvider(dp, loadingVars, appendingRequest)) {
+        loadingStateDeclarations.push(
+          ...buildLoadingStateDeclarations(loadingVars, !!appendingRequest)
+        )
         // Recorded because the loading state is only declared for a provider
         // that HAS a loading slot; a Load More button wired later may only
         // reference `ds_N_isFetching` if it actually exists.
@@ -1969,6 +2022,12 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
       registerCacheClientImports(dependencies, uidl.outputOptions?.folderPath)
     }
 
+    // After the cache declarations: a cached list's first page reads the
+    // `ds_N_params` they hoisted.
+    if (firstPageDeclarations?.length) {
+      ASTStatementOrder.insertStatementsAfterDependencies(blockStatement, firstPageDeclarations)
+    }
+
     // STEP 3.5: Handle DataProviders WITHOUT repeaters (data-source-item type)
     // These access single items like data[0].name and should not re-render on state changes
     // We wrap their params in useMemo to prevent reference changes from triggering re-renders
@@ -2049,14 +2108,17 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
       }
     })
 
-    // STEP 6: Update getStaticProps if this is a page
+    // STEP 6: Update getStaticProps if this is a page. Its rows are what the
+    // page renders, so they are read as a visitor is served them — unless only
+    // the store's trusted readers can open the page (`pageDataReadArguments`).
     if (isPage) {
       updateGetStaticProps(
         chunks,
         registry,
         dependencies,
         uidl.outputOptions?.folderPath,
-        localized
+        localized,
+        () => RouteUtils.pageDataReadArguments(uidl, options.auth)
       )
     }
 
@@ -2353,10 +2415,12 @@ function findPaginationNodesWithOwners(
  *
  * An uncached mapper keeps the inline `params={useMemo(...)}` it has always had,
  * byte for byte. A cached one hoists that memo into a component const so the
- * peek can depend on the same object identity instead of rebuilding it.
+ * peek can depend on the same object identity instead of rebuilding it; so does
+ * an appending list that starts from its page's rows (`hoistInto`), whose first
+ * page is filed in the accumulator under those params.
  *
- * Returns the identifier holding the peeked rows, or `undefined` when this
- * mapper does not cache.
+ * Returns the identifier holding the params when they were hoisted, and the one
+ * holding the peeked rows when this mapper caches.
  */
 function pushParamsAttribute(
   // tslint:disable-next-line:no-any
@@ -2364,24 +2428,40 @@ function pushParamsAttribute(
   usage: DataSourceUsage,
   paramsProps: types.ObjectProperty[],
   memoDeps: types.Expression[],
-  cacheDeclarations: types.Statement[]
-): string | undefined {
+  cacheDeclarations: types.Statement[],
+  hoistInto?: types.Statement[]
+): { paramsIdentifier?: string; cachedIdentifier?: string } {
   const paramsMemo = types.callExpression(types.identifier('useMemo'), [
     types.arrowFunctionExpression([], types.objectExpression(paramsProps)),
     types.arrayExpression(memoDeps),
   ])
 
-  // A state-bound sort deliberately suppresses `initialData` (see the comment at
-  // the call site): the prefetch ran without sort params, so reusing anything on
-  // mount would mask the current sort. The cache peek is `initialData` by
-  // another name, so it has to be suppressed for exactly the same reason.
+  // A state-bound sort gets no cache peek. The peek is `initialData` by another
+  // name, and such a list takes the server's rows only while its sort is still
+  // where the visitor starts (`buildStartingSortGuard`); the peek was never
+  // extended to it.
   const cache = usage.cache?.client && !usage.dynamicSort ? usage.cache : undefined
 
   if (!cache) {
+    if (!hoistInto) {
+      dp.openingElement.attributes.push(
+        types.jsxAttribute(types.jsxIdentifier('params'), types.jsxExpressionContainer(paramsMemo))
+      )
+      return {}
+    }
+    const paramsIdentifier = paramsVarFor(usage.index)
+    hoistInto.push(
+      types.variableDeclaration('const', [
+        types.variableDeclarator(types.identifier(paramsIdentifier), paramsMemo),
+      ])
+    )
     dp.openingElement.attributes.push(
-      types.jsxAttribute(types.jsxIdentifier('params'), types.jsxExpressionContainer(paramsMemo))
+      types.jsxAttribute(
+        types.jsxIdentifier('params'),
+        types.jsxExpressionContainer(types.identifier(paramsIdentifier))
+      )
     )
-    return undefined
+    return { paramsIdentifier }
   }
 
   const hoisted = buildCachedParamsDeclarations({ index: usage.index, paramsMemo, cache })
@@ -2394,7 +2474,97 @@ function pushParamsAttribute(
     )
   )
 
-  return hoisted.cachedIdentifier
+  return { paramsIdentifier: hoisted.paramsIdentifier, cachedIdentifier: hoisted.cachedIdentifier }
+}
+
+// Whether the rows `getStaticProps` fetched can be this list's first page at
+// all. A sort bound to state can only be served them when the build knows the
+// sort the visitor starts with (`startingSort`) and fetched by it; otherwise
+// the fetch has no sort, and its rows are not the list's first page.
+function prefetchFollowsSort(usage: DataSourceUsage): boolean {
+  return !usage.dynamicSort || !!usage.startingSort
+}
+
+// `sortBy === "name-asc"`: the visitor has not moved the sort from where it
+// starts, so the build-time rows are still its first page. `null` for a list
+// whose sort the visitor cannot pick, or one that reads no state.
+function buildStartingSortGuard(usage: DataSourceUsage): types.Expression | null {
+  return usage.dynamicSort && usage.startingSort ? buildSortAtStartGuard(usage.startingSort) : null
+}
+
+// `<condition> && <starting-sort guard>`, or the condition alone.
+function withStartingSortGuard(
+  condition: types.Expression,
+  usage: DataSourceUsage
+): types.Expression {
+  const sortGuard = buildStartingSortGuard(usage)
+  return sortGuard ? types.logicalExpression('&&', condition, sortGuard) : condition
+}
+
+// An appending list on a page starts from the rows its `getStaticProps`
+// fetched, when they can be its first page (`prefetchFollowsSort`).
+function startsFromServerRows(usage: DataSourceUsage): boolean {
+  return usage.infiniteScroll && usage.paginated && prefetchFollowsSort(usage)
+}
+
+/**
+ * `initialData={ds_N_firstPage}` on an appending list, beside the frozen first
+ * page and the effect that files it as page 1 of the accumulator (see
+ * `infinite-scroll.ts`).
+ *
+ * The rows stand in for page 1 only while they answer the list's query: no
+ * search (`queryGuard`), the sort where the visitor starts, no filter set (the
+ * guards the paged lists use), and at least one row — an empty build-time
+ * answer, which a failed fetch also gives, leaves the browser to fetch page 1
+ * as before.
+ */
+function pushInfiniteScrollFirstPage(
+  // tslint:disable-next-line:no-any
+  dp: any,
+  usage: DataSourceUsage,
+  vars: ReturnType<typeof getStateVarsForUsage>,
+  paramsIdentifier: string,
+  declarations: types.Statement[],
+  queryGuard: types.Expression | null,
+  instanceDeps: types.Expression[]
+): void {
+  const infiniteVars = getInfiniteScrollVars(usage.index)
+  const serverPayload = (): types.Expression =>
+    types.optionalMemberExpression(
+      types.identifier('props'),
+      types.identifier(vars.propsPrefix),
+      false,
+      true
+    )
+  const hasServerRows = types.binaryExpression(
+    '>',
+    types.optionalMemberExpression(
+      buildServerRowsExpression(serverPayload(), usage.itemsPath),
+      types.identifier('length'),
+      false,
+      true
+    ),
+    types.numericLiteral(0)
+  )
+  const startsFromServer = [
+    queryGuard,
+    buildStartingSortGuard(usage),
+    buildNoUrlFilterGuard(usage),
+    hasServerRows,
+  ]
+    .filter((guard): guard is types.Expression => guard !== null)
+    .reduce((all, guard) => types.logicalExpression('&&', all, guard))
+
+  declarations.push(
+    buildFirstPageDeclaration(infiniteVars, startsFromServer, serverPayload(), instanceDeps),
+    buildFirstPageSeedEffect(infiniteVars, paramsIdentifier, usage.perPage, usage.itemsPath)
+  )
+  dp.openingElement.attributes.push(
+    types.jsxAttribute(
+      types.jsxIdentifier('initialData'),
+      types.jsxExpressionContainer(types.identifier(infiniteVars.firstPageVar))
+    )
+  )
 }
 
 function updateDataProviderForPaginatedSearch(
@@ -2403,7 +2573,8 @@ function updateDataProviderForPaginatedSearch(
   vars: ReturnType<typeof getStateVarsForUsage>,
   fileName: string,
   cacheDeclarations: types.Statement[],
-  localized: boolean
+  localized: boolean,
+  firstPageDeclarations?: types.Statement[]
 ): void {
   const attrs = dp.openingElement.attributes
 
@@ -2462,36 +2633,67 @@ function updateDataProviderForPaginatedSearch(
     appendClientLocaleParam(paramsProps, memoDeps)
   }
 
-  const cachedInitialData = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations)
+  const seedInto = startsFromServerRows(usage) ? firstPageDeclarations : undefined
+  const { paramsIdentifier, cachedIdentifier: cachedInitialData } = pushParamsAttribute(
+    dp,
+    usage,
+    paramsProps,
+    memoDeps,
+    cacheDeclarations,
+    seedInto
+  )
 
-  // Add initialData. Skip the server-prefetched data entirely when a dynamic
-  // state-bound sort is active — the prefetch ran without sort parameters, so
-  // reusing it would mask the current sort state AND cause DataProvider to skip
-  // the first client fetch (its internal guard only skips when initialData is
-  // defined on mount). Without that skip, toggling sort correctly triggers a
-  // refetch via the useMemo params dependency chain.
+  // Add initialData: the server-prefetched page 1 while it is the page on show
+  // — page 1, no search, no filter set, and a sort the visitor picks still where
+  // they start (the prefetch ran by that sort). A list whose starting sort the
+  // build cannot know never takes it: that prefetch ran without a sort, so
+  // reusing it would mask the current sort AND make DataProvider skip its first
+  // client fetch (its internal guard only skips when initialData is defined on
+  // mount). Any other sort is fetched fresh, through the useMemo params.
   //
-  // An appending list skips it for a second reason: `initialData` makes
-  // DataProvider skip its first fetch, so page 1 would render from the prefetch
-  // and never enter the accumulator — appending page 2 would then REPLACE the
-  // visible rows with page 2 alone.
-  if (!usage.dynamicSort && !usage.infiniteScroll) {
+  // An appending list takes its own: `initialData` makes DataProvider skip its
+  // first fetch, so the prefetched page 1 has to be filed in the accumulator
+  // too, or appending page 2 would REPLACE the visible rows with page 2 alone.
+  // The provider remounts per query (its `key`), so the first page is frozen
+  // per query.
+  if (seedInto && paramsIdentifier) {
+    const appliedQuery = (): types.MemberExpression =>
+      types.memberExpression(
+        types.identifier(vars.combinedStateVar),
+        types.identifier('debouncedQuery')
+      )
+    pushInfiniteScrollFirstPage(
+      dp,
+      usage,
+      vars,
+      paramsIdentifier,
+      seedInto,
+      types.unaryExpression('!', appliedQuery(), true),
+      [appliedQuery()]
+    )
+  } else if (prefetchFollowsSort(usage) && !usage.infiniteScroll) {
     const initialDataCondition = wrapInitialDataWithUrlFilterGuard(
-      types.logicalExpression(
-        '&&',
-        types.binaryExpression(
-          '===',
-          types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('page')),
-          types.numericLiteral(1)
-        ),
-        types.unaryExpression(
-          '!',
-          types.memberExpression(
-            types.identifier(vars.combinedStateVar),
-            types.identifier('debouncedQuery')
+      withStartingSortGuard(
+        types.logicalExpression(
+          '&&',
+          types.binaryExpression(
+            '===',
+            types.memberExpression(
+              types.identifier(vars.combinedStateVar),
+              types.identifier('page')
+            ),
+            types.numericLiteral(1)
           ),
-          true
-        )
+          types.unaryExpression(
+            '!',
+            types.memberExpression(
+              types.identifier(vars.combinedStateVar),
+              types.identifier('debouncedQuery')
+            ),
+            true
+          )
+        ),
+        usage
       ),
       usage
     )
@@ -2585,7 +2787,8 @@ function updateDataProviderForPaginationOnly(
   vars: ReturnType<typeof getStateVarsForUsage>,
   fileName: string,
   cacheDeclarations: types.Statement[],
-  localized: boolean
+  localized: boolean,
+  firstPageDeclarations?: types.Statement[]
 ): void {
   const attrs = dp.openingElement.attributes
 
@@ -2623,22 +2826,36 @@ function updateDataProviderForPaginationOnly(
   }
 
   // Add params
-  const cachedInitialData = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations)
+  const seedInto = startsFromServerRows(usage) ? firstPageDeclarations : undefined
+  const { paramsIdentifier, cachedIdentifier: cachedInitialData } = pushParamsAttribute(
+    dp,
+    usage,
+    paramsProps,
+    memoDeps,
+    cacheDeclarations,
+    seedInto
+  )
 
-  // Add initialData. See paginated+search updater for why we skip prefetch
-  // reuse when a dynamic state-bound sort is active, and why an appending list
-  // skips it too.
-  if (!usage.dynamicSort && !usage.infiniteScroll) {
+  // Add initialData. See paginated+search updater for when a sort the visitor
+  // picks may reuse the prefetch, and how an appending list takes its own. This
+  // provider never remounts (no `key`), so its first page is frozen for the
+  // page's lifetime.
+  if (seedInto && paramsIdentifier) {
+    pushInfiniteScrollFirstPage(dp, usage, vars, paramsIdentifier, seedInto, null, [])
+  } else if (prefetchFollowsSort(usage) && !usage.infiniteScroll) {
     dp.openingElement.attributes.push(
       types.jsxAttribute(
         types.jsxIdentifier('initialData'),
         types.jsxExpressionContainer(
           types.conditionalExpression(
             wrapInitialDataWithUrlFilterGuard(
-              types.binaryExpression(
-                '===',
-                types.identifier(vars.pageStateVar),
-                types.numericLiteral(1)
+              withStartingSortGuard(
+                types.binaryExpression(
+                  '===',
+                  types.identifier(vars.pageStateVar),
+                  types.numericLiteral(1)
+                ),
+                usage
               ),
               usage
             ),
@@ -2743,18 +2960,27 @@ function updateDataProviderForSearchOnly(
     appendClientLocaleParam(paramsProps, memoDeps)
   }
 
-  const cachedInitialData = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations)
+  const { cachedIdentifier: cachedInitialData } = pushParamsAttribute(
+    dp,
+    usage,
+    paramsProps,
+    memoDeps,
+    cacheDeclarations
+  )
 
-  // Add initialData. See paginated+search updater for why we skip prefetch
-  // reuse when a dynamic state-bound sort is active.
-  if (!usage.dynamicSort) {
+  // Add initialData. See paginated+search updater for when a sort the visitor
+  // picks may reuse the prefetch.
+  if (prefetchFollowsSort(usage)) {
     dp.openingElement.attributes.push(
       types.jsxAttribute(
         types.jsxIdentifier('initialData'),
         types.jsxExpressionContainer(
           types.conditionalExpression(
             wrapInitialDataWithUrlFilterGuard(
-              types.unaryExpression('!', types.identifier(vars.debouncedSearchQueryVar), true),
+              withStartingSortGuard(
+                types.unaryExpression('!', types.identifier(vars.debouncedSearchQueryVar), true),
+                usage
+              ),
               usage
             ),
             types.optionalMemberExpression(
@@ -2799,20 +3025,58 @@ function updateDataProviderForSearchOnly(
   )
 }
 
+/**
+ * A plain list on a page is seeded with the rows its `getStaticProps` fetched
+ * (`extractDataSourceIntoGetStaticProps`), and a seeded provider skips its first
+ * fetch. With a sort the visitor picks, those rows are the list's only while the
+ * sort is where a visitor starts — the build fetched them by it:
+ *
+ *   initialData={sortBy === "name-asc" ? props.items_products : undefined}
+ *
+ * — and any other sort is fetched fresh, through the params it changes. When the
+ * build cannot know where the sort starts (`prefetchFollowsSort`), it fetched
+ * the rows unsorted, and the list is never seeded with them. A plain list has no
+ * search, and is only seeded without a filter a visitor sets.
+ */
+function seedPlainListWhileSortStarts(dp: any, usage: DataSourceUsage): void {
+  if (!usage.dynamicSort) {
+    return
+  }
+  const attrs = dp.openingElement.attributes
+  const index = attrs.findIndex(
+    (attr: any) => attr.type === 'JSXAttribute' && attr.name?.name === 'initialData'
+  )
+  if (index === -1) {
+    return
+  }
+  if (!prefetchFollowsSort(usage)) {
+    attrs.splice(index, 1)
+    return
+  }
+  const sortGuard = buildStartingSortGuard(usage)
+  const seeded = (attrs[index] as types.JSXAttribute).value
+  if (!sortGuard || seeded?.type !== 'JSXExpressionContainer') {
+    return
+  }
+  attrs[index] = types.jsxAttribute(
+    types.jsxIdentifier('initialData'),
+    types.jsxExpressionContainer(
+      types.conditionalExpression(
+        sortGuard,
+        seeded.expression as types.Expression,
+        types.identifier('undefined')
+      )
+    )
+  )
+}
+
 function updateDataProviderForPlain(
   dp: any,
   fileName: string,
   usage: DataSourceUsage,
   localized: boolean
 ): void {
-  // A sort bound to state is the visitor's, which the server cannot know: rows
-  // pre-rendered in the table's order would stand in for it, since a seeded
-  // provider skips its first fetch — the paginated lists drop them the same way.
-  if (usage.dynamicSort) {
-    dp.openingElement.attributes = dp.openingElement.attributes.filter(
-      (attr: any) => !(attr.type === 'JSXAttribute' && attr.name?.name === 'initialData')
-    )
-  }
+  seedPlainListWhileSortStarts(dp, usage)
 
   const attrs = dp.openingElement.attributes
 
@@ -3627,12 +3891,24 @@ export default dataSourceModule.getCount
   }
 }
 
+// `fetchCount(<params>, <read arguments>)`: the params may be left out only
+// when nothing follows them.
+const countReadArguments = (
+  countParams: types.ObjectProperty[],
+  readArguments: types.Expression[]
+): types.Expression[] =>
+  countParams.length > 0 || readArguments.length > 0
+    ? [types.objectExpression(countParams), ...readArguments]
+    : []
+
 function updateGetStaticProps(
   chunks: any[],
   registry: StateRegistry,
   dependencies: Record<string, any>,
   folderPath: string[] | undefined,
-  localized: boolean
+  localized: boolean,
+  // The arguments every read hands the module after its params (fresh nodes per call).
+  readArguments: () => types.Expression[]
 ): void {
   const getStaticPropsChunk = chunks.find((c) => c.name === 'getStaticProps')
   if (!getStaticPropsChunk || getStaticPropsChunk.type !== ChunkType.AST) {
@@ -3764,6 +4040,16 @@ function updateGetStaticProps(
             )
           )
         )
+      } else if (usage.dynamicSort && usage.startingSort) {
+        // A sort the visitor picks: page 1 by the sort they start with, sent
+        // as the very string the browser sends for it, so page 2 continues
+        // this page exactly (see `buildStartingSortsValue`).
+        fetchParams.push(
+          types.objectProperty(
+            types.identifier('sorts'),
+            buildStartingSortsValue(usage.dynamicSort, usage.startingSort)
+          )
+        )
       }
 
       // Add filters if present
@@ -3801,7 +4087,7 @@ function updateGetStaticProps(
                   types.identifier(fetcherImportName),
                   types.identifier('fetchData')
                 ),
-                [types.objectExpression(fetchParams)]
+                [types.objectExpression(fetchParams), ...readArguments()]
               ),
               types.identifier('catch')
             ),
@@ -3990,7 +4276,7 @@ function updateGetStaticProps(
                   types.identifier(fetcherImportName),
                   types.identifier('fetchCount')
                 ),
-                countParams.length > 0 ? [types.objectExpression(countParams)] : []
+                countReadArguments(countParams, readArguments())
               ),
               types.identifier('catch')
             ),