@teleporthq/teleport-plugin-next-data-source 0.43.66 → 0.43.68

package/src/pagination-plugin.ts

@@ -13,6 +13,7 @@ import { generateDataSourceFetcherWithCore } from './data-source-fetchers'
 import { buildProductTransformOptions, type EntityTransformOptions } from './transformations'
 import { appendSortsParam, DynamicSortAST, extractDynamicSort } from './sort-utils'
 import { appendFiltersParam, pushStateIdsAsDeps, pushPropIdsAsDeps } from './filter-utils'
+import { appendItemsPathParam, extractItemsPath } from './items-path'
 import {
   applyLoadingStateToDataProvider,
   buildLoadingStateDeclarations,
@@ -34,7 +35,12 @@ import {
   setJSXExpressionAttribute,
   type PaginationControlKind,
 } from './pagination-controls'
-import { buildCountFetchEffect } from './count-effect'
+import { buildCountFetchEffect, buildCountSeqDeclaration } from './count-effect'
+import {
+  findAllSearchClearButtonsInJSX,
+  findSiblingSearchInput,
+  wireSearchClearButton,
+} from './search-clear'
 import {
   buildPageTokensDeclaration,
   wireNumberedPagination,
@@ -54,6 +60,14 @@ import {
   type PageResetDeps,
 } from './page-reset'
 import { buildPageUrlRefDeclaration, buildPageUrlSyncEffect } from './page-url-sync'
+import { isLocalizedProject } from './content-localization'
+import {
+  appendClientLocaleParam,
+  buildClientLocaleExpression,
+  buildServerLocaleParam,
+  ensureRouterDeclaration,
+  hasLocaleParam,
+} from './request-locale'
 
 // ----- searchDefaultValue support -----
 //
@@ -242,6 +256,9 @@ interface DataSourceUsage {
   // `URLSearchParamSync` builders. Page 1 is written as the ABSENCE of the key.
   // Cleared when `infiniteScroll` is set.
   pageUrlParamKey?: string
+  // Path to the rows inside a wrapped REST/JavaScript payload, when the list is
+  // bound to one (`data?.templates` -> `['templates']`). See `items-path.ts`.
+  itemsPath?: string[]
   // Computed category
   category: 'paginated+search' | 'paginated-only' | 'search-only' | 'plain'
 }
@@ -643,6 +660,11 @@ function buildStateRegistry(uidlNode: any): StateRegistry {
           infiniteScroll,
           infiniteScrollLoadMore: infiniteScroll && !!content.infiniteScrollLoadMore,
           pageUrlParamKey,
+          itemsPath: extractItemsPath(
+            content.source,
+            parentDataSource.identifier,
+            parentDataSource.resourceDef.dataSourceType || ''
+          ),
           category: 'plain',
         }
 
@@ -723,6 +745,8 @@ function getStateVarsForUsage(usage: DataSourceUsage): {
   combinedStateVar: string
   setCombinedStateVar: string
   skipDebounceRefVar: string
+  /** Ref numbering the count requests, so an overtaken count response is dropped. */
+  countSeqRefVar: string
   propsPrefix: string
 } {
   const idx = usage.index
@@ -739,6 +763,7 @@ function getStateVarsForUsage(usage: DataSourceUsage): {
     combinedStateVar: `ds_${idx}_state`,
     setCombinedStateVar: `setDs_${idx}_state`,
     skipDebounceRefVar: `ds_${idx}_skipDebounce`,
+    countSeqRefVar: `ds_${idx}_countSeq`,
     propsPrefix: `${usage.dataSourceIdentifier}_ds_${idx}`,
   }
 }
@@ -1110,6 +1135,10 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
     const getStaticPropsChunk = chunks.find((chunk) => chunk.name === 'getStaticProps')
     const isPage = !!getStaticPropsChunk
 
+    // In a multi-language project every fetch says which language it is for —
+    // see `request-locale.ts`. Decided once for the whole component.
+    const localized = isLocalizedProject(options)
+
     // Add React dependencies
     if (!dependencies.useState) {
       dependencies.useState = {
@@ -1390,6 +1419,7 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
         }
         // Add filters to count fetch params if present
         appendFiltersParam(urlParams, usage.filters, buildFilterDestinationExpression)
+        appendItemsPathParam(urlParams, usage.itemsPath, 'collectionPath')
 
         const countEffectDeps: types.Expression[] = [
           types.memberExpression(
@@ -1408,6 +1438,7 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
         pushPropIdsAsDeps(countEffectDeps, countEffectSeen, usage.filterPropIds)
         // Same goes for URL-driven filters (already documented above).
         pushUrlSearchParamMemoDeps(countEffectDeps, usage)
+        stateDeclarations.push(buildCountSeqDeclaration(vars.countSeqRefVar))
         effectStatements.push(
           buildCountFetchEffect({
             fileName,
@@ -1415,6 +1446,7 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
             setMaxPagesVar: vars.setMaxPagesStateVar,
             urlParams,
             deps: countEffectDeps,
+            countSeqRefVar: vars.countSeqRefVar,
           })
         )
 
@@ -1504,6 +1536,7 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
             )
           }
           appendFiltersParam(countUrlParams, usage.filters, buildFilterDestinationExpression)
+          appendItemsPathParam(countUrlParams, usage.itemsPath, 'collectionPath')
 
           // Default to mount-only; refresh when ANY filter destination
           // changes — state-bound (e.g. `selectedCategory`) and URL-driven —
@@ -1515,6 +1548,7 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
           pushPropIdsAsDeps(countDeps, countDepsSeen, usage.filterPropIds)
           pushUrlSearchParamMemoDeps(countDeps, usage)
 
+          stateDeclarations.push(buildCountSeqDeclaration(vars.countSeqRefVar))
           effectStatements.push(
             buildCountFetchEffect({
               fileName,
@@ -1522,6 +1556,7 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
               setMaxPagesVar: vars.setMaxPagesStateVar,
               urlParams: countUrlParams,
               deps: countDeps,
+              countSeqRefVar: vars.countSeqRefVar,
             })
           )
         }
@@ -1658,43 +1693,16 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
     // `router.query` / `router.isReady` and call `router.replace`. Gated on the
     // same predicate as the effects themselves so router is only injected when
     // it is actually used.
-    const needsUseRouter = registry.usages.some(
-      (u) => hasUrlSearchParamFilters(u) || usageHasSearchUrlSync(u) || usageHasPageUrlSync(u)
-    )
-    if (needsUseRouter) {
-      if (!dependencies.useRouter) {
-        // Match the shape the sibling Next.js plugins use (i18n locale mapper,
-        // search-params plugin) so the deduped import line is identical and
-        // the dependency-resolver merges instead of emitting a second one.
-        dependencies.useRouter = {
-          type: 'library',
-          path: 'next/router',
-          version: '^12.1.10',
-          meta: { namedImport: true },
-        }
-      }
-      const hasRouterDecl = blockStatement.body.some(
-        (statement) =>
-          statement.type === 'VariableDeclaration' &&
-          statement.declarations.some(
-            (decl) =>
-              decl.id.type === 'Identifier' &&
-              decl.id.name === 'router' &&
-              decl.init?.type === 'CallExpression' &&
-              decl.init.callee.type === 'Identifier' &&
-              decl.init.callee.name === 'useRouter'
-          )
+    // A localized project reads `router.locale` into every wired provider's
+    // params (each of them fetches client-side), so the router is needed as
+    // soon as there is anything to wire.
+    const needsUseRouter =
+      localized ||
+      registry.usages.some(
+        (u) => hasUrlSearchParamFilters(u) || usageHasSearchUrlSync(u) || usageHasPageUrlSync(u)
       )
-      if (!hasRouterDecl) {
-        blockStatement.body.unshift(
-          types.variableDeclaration('const', [
-            types.variableDeclarator(
-              types.identifier('router'),
-              types.callExpression(types.identifier('useRouter'), [])
-            ),
-          ])
-        )
-      }
+    if (needsUseRouter) {
+      ensureRouterDeclaration(blockStatement.body, dependencies)
     }
 
     // Both the search write-back and the page ⇄ URL effect write the URL through
@@ -1766,13 +1774,20 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
 
       // Update DataProvider based on category
       if (usage.category === 'paginated+search') {
-        updateDataProviderForPaginatedSearch(dp, usage, vars, fileName, cacheDeclarations)
+        updateDataProviderForPaginatedSearch(
+          dp,
+          usage,
+          vars,
+          fileName,
+          cacheDeclarations,
+          localized
+        )
       } else if (usage.category === 'paginated-only') {
-        updateDataProviderForPaginationOnly(dp, usage, vars, fileName, cacheDeclarations)
+        updateDataProviderForPaginationOnly(dp, usage, vars, fileName, cacheDeclarations, localized)
       } else if (usage.category === 'search-only') {
-        updateDataProviderForSearchOnly(dp, usage, vars, fileName, cacheDeclarations)
+        updateDataProviderForSearchOnly(dp, usage, vars, fileName, cacheDeclarations, localized)
       } else if (usage.category === 'plain') {
-        updateDataProviderForPlain(dp, fileName, usage)
+        updateDataProviderForPlain(dp, fileName, usage, localized)
       }
 
       // Show the array mapper's loading state while a category/sort/search
@@ -1871,6 +1886,7 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
     const searchEnabledUsages = registry.usages.filter((u) => u.searchEnabled)
 
     // Match by order - search input 0 -> searchEnabledUsages[0], etc.
+    const usageBySearchInput = new Map<any, DataSourceUsage>()
     searchInputs.forEach((input, idx) => {
       if (idx >= searchEnabledUsages.length) {
         return
@@ -1879,6 +1895,19 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
       const usage = searchEnabledUsages[idx]
       const vars = getStateVarsForUsage(usage)
       wireSearchInput(input.node, vars)
+      usageBySearchInput.set(input.node, usage)
+    })
+
+    // STEP 4.5: Wire the clear buttons, each to the input it shares a parent with.
+    findAllSearchClearButtonsInJSX(blockStatement).forEach((button) => {
+      const input = findSiblingSearchInput(
+        button,
+        searchInputs.map((entry) => entry.node)
+      )
+      const usage = input ? usageBySearchInput.get(input) : undefined
+      if (usage) {
+        wireSearchClearButton(button, getStateVarsForUsage(usage))
+      }
     })
 
     // STEP 5: Wire pagination widgets
@@ -1908,7 +1937,13 @@ export const createNextArrayMapperPaginationPlugin: ComponentPluginFactory<{}> =
 
     // STEP 6: Update getStaticProps if this is a page
     if (isPage) {
-      updateGetStaticProps(chunks, registry, dependencies, uidl.outputOptions?.folderPath)
+      updateGetStaticProps(
+        chunks,
+        registry,
+        dependencies,
+        uidl.outputOptions?.folderPath,
+        localized
+      )
     }
 
     return structure
@@ -1964,6 +1999,20 @@ function insertSentinelAfterProvider(
     if (node.alternate) {
       traverse(node.alternate)
     }
+    // `{activeTabIndex === 0 && (<div>…<DataProvider/>…</div>)}` — a tab
+    // panel, a gated section: the provider sits on the RIGHT of a logical
+    // expression (or in a ternary's `test`), which is not a child, a body or
+    // an argument. Left unvisited, the products list under the first tab of
+    // a shop was never paginated or seeded, and rendered nothing.
+    if (node.left) {
+      traverse(node.left)
+    }
+    if (node.right) {
+      traverse(node.right)
+    }
+    if (node.test) {
+      traverse(node.test)
+    }
     if (node.expression) {
       traverse(node.expression)
     }
@@ -2007,6 +2056,20 @@ function findAllDataProvidersInJSX(blockStatement: types.BlockStatement): any[]
     if (node.alternate) {
       traverse(node.alternate)
     }
+    // `{activeTabIndex === 0 && (<div>…<DataProvider/>…</div>)}` — a tab
+    // panel, a gated section: the provider sits on the RIGHT of a logical
+    // expression (or in a ternary's `test`), which is not a child, a body or
+    // an argument. Left unvisited, the products list under the first tab of
+    // a shop was never paginated or seeded, and rendered nothing.
+    if (node.left) {
+      traverse(node.left)
+    }
+    if (node.right) {
+      traverse(node.right)
+    }
+    if (node.test) {
+      traverse(node.test)
+    }
 
     if (node.expression) {
       traverse(node.expression)
@@ -2110,6 +2173,20 @@ function findAllSearchInputsInJSX(
     if (node.alternate) {
       traverse(node.alternate)
     }
+    // `{activeTabIndex === 0 && (<div>…<DataProvider/>…</div>)}` — a tab
+    // panel, a gated section: the provider sits on the RIGHT of a logical
+    // expression (or in a ternary's `test`), which is not a child, a body or
+    // an argument. Left unvisited, the products list under the first tab of
+    // a shop was never paginated or seeded, and rendered nothing.
+    if (node.left) {
+      traverse(node.left)
+    }
+    if (node.right) {
+      traverse(node.right)
+    }
+    if (node.test) {
+      traverse(node.test)
+    }
     if (node.expression) {
       traverse(node.expression)
     }
@@ -2173,6 +2250,20 @@ function findPaginationNodesWithOwners(
     if (node.alternate) {
       traverse(node.alternate)
     }
+    // `{activeTabIndex === 0 && (<div>…<DataProvider/>…</div>)}` — a tab
+    // panel, a gated section: the provider sits on the RIGHT of a logical
+    // expression (or in a ternary's `test`), which is not a child, a body or
+    // an argument. Left unvisited, the products list under the first tab of
+    // a shop was never paginated or seeded, and rendered nothing.
+    if (node.left) {
+      traverse(node.left)
+    }
+    if (node.right) {
+      traverse(node.right)
+    }
+    if (node.test) {
+      traverse(node.test)
+    }
     if (node.expression) {
       traverse(node.expression)
     }
@@ -2239,7 +2330,8 @@ function updateDataProviderForPaginatedSearch(
   usage: DataSourceUsage,
   vars: ReturnType<typeof getStateVarsForUsage>,
   fileName: string,
-  cacheDeclarations: types.Statement[]
+  cacheDeclarations: types.Statement[],
+  localized: boolean
 ): void {
   const attrs = dp.openingElement.attributes
 
@@ -2283,6 +2375,7 @@ function updateDataProviderForPaginatedSearch(
 
   // Add filters if present
   appendFiltersParam(paramsProps, usage.filters, buildFilterDestinationExpression)
+  appendItemsPathParam(paramsProps, usage.itemsPath, 'itemsPath')
 
   // Build useMemo dependencies including filter state IDs and dynamic sort state IDs
   const memoDeps: types.Expression[] = [types.identifier(vars.combinedStateVar)]
@@ -2293,6 +2386,9 @@ function updateDataProviderForPaginatedSearch(
     pushStateIdsAsDeps(memoDeps, seenDeps, usage.dynamicSort.depStateIds)
   }
   pushUrlSearchParamMemoDeps(memoDeps, usage)
+  if (localized) {
+    appendClientLocaleParam(paramsProps, memoDeps)
+  }
 
   const cachedInitialData = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations)
 
@@ -2416,7 +2512,8 @@ function updateDataProviderForPaginationOnly(
   usage: DataSourceUsage,
   vars: ReturnType<typeof getStateVarsForUsage>,
   fileName: string,
-  cacheDeclarations: types.Statement[]
+  cacheDeclarations: types.Statement[],
+  localized: boolean
 ): void {
   const attrs = dp.openingElement.attributes
 
@@ -2438,6 +2535,7 @@ function updateDataProviderForPaginationOnly(
 
   // Add filters if present
   appendFiltersParam(paramsProps, usage.filters, buildFilterDestinationExpression)
+  appendItemsPathParam(paramsProps, usage.itemsPath, 'itemsPath')
 
   // Build useMemo dependencies including filter state IDs and dynamic sort state IDs
   const memoDeps: types.Expression[] = [types.identifier(vars.pageStateVar)]
@@ -2448,6 +2546,9 @@ function updateDataProviderForPaginationOnly(
     pushStateIdsAsDeps(memoDeps, seenDeps, usage.dynamicSort.depStateIds)
   }
   pushUrlSearchParamMemoDeps(memoDeps, usage)
+  if (localized) {
+    appendClientLocaleParam(paramsProps, memoDeps)
+  }
 
   // Add params
   const cachedInitialData = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations)
@@ -2522,7 +2623,8 @@ function updateDataProviderForSearchOnly(
   usage: DataSourceUsage,
   vars: ReturnType<typeof getStateVarsForUsage>,
   fileName: string,
-  cacheDeclarations: types.Statement[]
+  cacheDeclarations: types.Statement[],
+  localized: boolean
 ): void {
   const attrs = dp.openingElement.attributes
 
@@ -2554,6 +2656,7 @@ function updateDataProviderForSearchOnly(
 
   // Add filters if present
   appendFiltersParam(paramsProps, usage.filters, buildFilterDestinationExpression)
+  appendItemsPathParam(paramsProps, usage.itemsPath, 'itemsPath')
 
   // Build useMemo dependencies including filter state IDs and dynamic sort state IDs
   const memoDeps: types.Expression[] = [types.identifier(vars.debouncedSearchQueryVar)]
@@ -2564,6 +2667,9 @@ function updateDataProviderForSearchOnly(
     pushStateIdsAsDeps(memoDeps, seenDeps, usage.dynamicSort.depStateIds)
   }
   pushUrlSearchParamMemoDeps(memoDeps, usage)
+  if (localized) {
+    appendClientLocaleParam(paramsProps, memoDeps)
+  }
 
   const cachedInitialData = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations)
 
@@ -2621,7 +2727,12 @@ function updateDataProviderForSearchOnly(
   )
 }
 
-function updateDataProviderForPlain(dp: any, fileName: string, usage: DataSourceUsage): void {
+function updateDataProviderForPlain(
+  dp: any,
+  fileName: string,
+  usage: DataSourceUsage,
+  localized: boolean
+): void {
   const attrs = dp.openingElement.attributes
 
   const clientCache = usage.cache?.client ? usage.cache : undefined
@@ -2658,13 +2769,24 @@ function updateDataProviderForPlain(dp: any, fileName: string, usage: DataSource
     )
   }
 
-  // Find the params attribute
-  const paramsAttrIndex = attrs.findIndex(
+  // Find the params attribute. A plain list may have none at all — but the
+  // fetch it was just given sends `params` regardless, and in a localized
+  // project those have to carry the locale, so the attribute is created.
+  let paramsAttrIndex = attrs.findIndex(
     (attr: any) => attr.type === 'JSXAttribute' && attr.name.name === 'params'
   )
 
   if (paramsAttrIndex === -1) {
-    return
+    if (!localized) {
+      return
+    }
+    attrs.push(
+      types.jsxAttribute(
+        types.jsxIdentifier('params'),
+        types.jsxExpressionContainer(types.objectExpression([]))
+      )
+    )
+    paramsAttrIndex = attrs.length - 1
   }
 
   const paramsAttr = attrs[paramsAttrIndex] as types.JSXAttribute
@@ -2695,6 +2817,9 @@ function updateDataProviderForPlain(dp: any, fileName: string, usage: DataSource
   pushStateIdsAsDeps(memoDeps, memoSeen, usage.filterStateIds)
   pushPropIdsAsDeps(memoDeps, memoSeen, usage.filterPropIds)
   pushUrlSearchParamMemoDeps(memoDeps, usage)
+  if (localized && paramsExpression.type === 'ObjectExpression') {
+    appendClientLocaleParam(paramsExpression.properties, memoDeps)
+  }
 
   // Wrap params in useMemo with filter state dependencies
   const memoizedParams = types.callExpression(types.identifier('useMemo'), [
@@ -2743,11 +2868,18 @@ function stabilizeDataProviderWithoutRepeater(dp: any): void {
     return
   }
 
-  // Wrap params in useMemo with empty dependencies array
-  // This ensures the object reference stays stable across re-renders
+  // Wrap params in useMemo with an empty dependencies array so the object
+  // reference stays stable across re-renders. The one thing that may vary is
+  // the locale a client-fetched item carries (put there by the data-source
+  // plugin): a locale switch must rebuild the params, or the item would keep
+  // its previous language.
+  const memoDeps: types.Expression[] = []
+  if (paramsExpression.type === 'ObjectExpression' && hasLocaleParam(paramsExpression.properties)) {
+    memoDeps.push(buildClientLocaleExpression())
+  }
   const memoizedParams = types.callExpression(types.identifier('useMemo'), [
     types.arrowFunctionExpression([], paramsExpression),
-    types.arrayExpression([]),
+    types.arrayExpression(memoDeps),
   ])
 
   // Replace the params attribute
@@ -3377,7 +3509,8 @@ function updateGetStaticProps(
   chunks: any[],
   registry: StateRegistry,
   dependencies: Record<string, any>,
-  folderPath?: string[]
+  folderPath: string[] | undefined,
+  localized: boolean
 ): void {
   const getStaticPropsChunk = chunks.find((c) => c.name === 'getStaticProps')
   if (!getStaticPropsChunk || getStaticPropsChunk.type !== ChunkType.AST) {
@@ -3549,6 +3682,13 @@ function updateGetStaticProps(
         )
       }
 
+      appendItemsPathParam(fetchParams, usage.itemsPath, 'itemsPath')
+
+      // The prefetch is per locale — getStaticProps runs once per language.
+      if (localized) {
+        fetchParams.push(buildServerLocaleParam())
+      }
+
       // Check if this fetch already exists
       const existingFetchIndex = arrayPattern.elements.findIndex(
         (el: any) => el?.type === 'Identifier' && el.name === vars.propsPrefix
@@ -3625,8 +3765,10 @@ function updateGetStaticProps(
         const staticFiltersForCount = (usage.filters || []).filter(
           (f: any) => !ASTUtils.isUIDLDynamicReference(f.destination)
         )
-        const hasStaticFilters = staticFiltersForCount.length > 0
-        const countVarName = hasStaticFilters
+        // A count scoped to an inner array is a different number from the
+        // whole-payload one, so it gets its own variable just like a filtered one.
+        const hasScopedCount = staticFiltersForCount.length > 0 || !!usage.itemsPath
+        const countVarName = hasScopedCount
           ? `${usage.dataSourceIdentifier}_ds_${usage.index}_count`
           : `${usage.dataSourceIdentifier}_count`
 
@@ -3698,7 +3840,7 @@ function updateGetStaticProps(
     // Group usages by their filters (stringify for comparison)
     const usagesByFilters = new Map<string, DataSourceUsage[]>()
     for (const usage of usagesForDataSource) {
-      const filtersKey = JSON.stringify(usage.filters || [])
+      const filtersKey = JSON.stringify([usage.filters || [], usage.itemsPath || []])
       const existing = usagesByFilters.get(filtersKey) || []
       existing.push(usage)
       usagesByFilters.set(filtersKey, existing)
@@ -3713,10 +3855,12 @@ function updateGetStaticProps(
       )
       const hasStaticFilters = staticFiltersForCount.length > 0
 
-      // Create unique count variable name based on filters
-      const countVarName = hasStaticFilters
-        ? `${firstUsage.dataSourceIdentifier}_ds_${firstUsage.index}_count`
-        : `${firstUsage.dataSourceIdentifier}_count`
+      // Create unique count variable name based on filters (and inner-array
+      // scope — must match the naming at the maxPages site above)
+      const countVarName =
+        hasStaticFilters || firstUsage.itemsPath
+          ? `${firstUsage.dataSourceIdentifier}_ds_${firstUsage.index}_count`
+          : `${firstUsage.dataSourceIdentifier}_count`
 
       // Check if this count was already processed
       const countKey = `${key}:${filtersKey}`
@@ -3768,6 +3912,8 @@ function updateGetStaticProps(
           )
         }
 
+        appendItemsPathParam(countParams, firstUsage.itemsPath, 'collectionPath')
+
         fetchesArray.elements.push(
           types.callExpression(
             types.memberExpression(