1. Cursor-based Pagination
`ts
type Response = { items: Item[], nextCursor: string | null }

createInfiniteResource(
async (cursor, { setNextPageKey, setHasReachedEnd }) => {
const data = await fetch(/api?cursor=${cursor});

if (data.nextCursor) {
setNextPageKey(data.nextCursor);
} else {
setHasReachedEnd(true);
}
return data;
},
{
initialPageKey: 'initial',
mergeData: (prev, next) => [...prev, next] // Keep cursor info
}
);
`

2. Error Handling with Retries
`ts
createInfiniteResource(fetcher, {
onError: (error) => {
if (error.status === 429) { // Rate limit
setTimeout(getNextPage, 1000);
}
}
});
`

3. Virtual Lists
`ts
// Keep limited window of data in memory
createInfiniteResource(fetcher, {
maxPages: 3,
mergeData: (prev, next) => {
const window = [...prev, next].slice(-3);
virtualizer.setItemCount(totalCount);
return window;
}
});
`

$3

#### 1. Deduplication with uniqueBy

Perfect for cursor-based pagination where items can appear across page boundaries:

`ts
type Post = { id: string; title: string; timestamp: number };

const { data } = createInfiniteResource(
async (cursor, { setPageKey, signal }) => {
const response = await fetch(/api/posts?cursor=${cursor}, { signal });
const json = await response.json();

if (json.nextCursor) setPageKey(json.nextCursor);
return json.posts;
},
{
initialPageKey: 'initial',
uniqueBy: (post) => post.id // Automatically deduplicates by ID
}
);

// data() now contains unique posts only, even if they appear in multiple pages
`

#### 2. Bi-directional Pagination

Load data in both directions - perfect for chat applications:

`ts
const { getNextPage, getPreviousPage, data } = createInfiniteResource(
async (messageId, { setPageKey, direction }) => {
const endpoint = direction === 'backward'
? /api/messages/before/${messageId}
: /api/messages/after/${messageId};

const response = await fetch(endpoint);
const messages = await response.json();

if (messages.length > 0) {
const nextId = direction === 'backward'
? messages[0].id
: messages[messages.length - 1].id;
setPageKey(nextId);
}

return messages;
},
{ initialPageKey: 'latest' }
);

// Load newer messages (default forward direction)
getNextPage();

// Load older messages
getPreviousPage(); // or getNextPage('backward')
`

#### 3. AbortSignal for Race Conditions

Prevent stale data when users rapidly trigger pagination:

`ts
const { getNextPage } = createInfiniteResource(
async (page, { setPageKey, signal }) => {
try {
// Pass signal to fetch - it will auto-cancel on new requests
const response = await fetch(/api?page=${page}, { signal });
const data = await response.json();

setPageKey(page + 1);
return data;
} catch (err) {
if (err.name === 'AbortError') {
// Request was cancelled - this is expected
return [];
}
throw err;
}
},
{ initialPageKey: 1 }
);

// Rapid calls won't cause race conditions
getNextPage();
getNextPage(); // First request auto-cancelled
getNextPage(); // Second request auto-cancelled
// Only the last request completes
`

#### 4. Refetch Current Page

Refresh data without duplicating:

`ts
const { refetchCurrentPage, getNextPage } = createInfiniteResource(
fetcher,
{ initialPageKey: 1 }
);

// User adds new item, refresh current page
onItemAdded(() => {
refetchCurrentPage(); // Replaces last page data, doesn't append
});

// Load next page as usual
getNextPage(); // Appends as expected
`

#### 5. Reactive Directive Conditions

The refetchOnView directive now reacts to condition changes:

`tsx
const [isPaused, setIsPaused] = createSignal(false);

// Observer dynamically connects/disconnects based on condition


// Pause infinite scroll
setIsPaused(true); // Observer disconnects automatically

// Resume
setIsPaused(false); // Observer reconnects
`

Gotchas

1. maxPages drops old data but doesn't refetch - consider UX implications
2. Default array flattening assumes uniform page data
3. Page keys must be managed manually through setPageKey
4. The directive assumes element visibility means "load more"
5. uniqueBy only works with default array flattening, not with custom mergeData
6. AbortSignal cancels the fetch request but doesn't prevent the fetcher function from running

Type Details

`ts
createInfiniteResource<
T, // Response type (e.g., Product[])
P = number | string // Page key type
>

// For complex data:
createInfiniteResource
// Response = { items: Product[], cursor: string }
// Cursor = string
`

$3

For non-array responses, each page's data is preserved:

`tsx
type ThreadPage = {
messages: Message[];
participants: User[];
cursor: string;
};

const { data } = createInfiniteResource(
async (cursor) => {
const response = await fetch(/api/thread?cursor=${cursor});
return response.json();
},
{
initialPageKey: 'initial',
// Each page is preserved as an array element
mergeData: (prevPages, newPage) => [...prevPages, newPage]
}
);

// Access individual pages
data().map(page => ({
messages: page.messages,
participants: page.participants
}));
`

API Reference

$3

`ts
function createInfiniteResource(
fetcher: (
pageKey: P,
context: FetcherContext


) => Promise,
options?: InfiniteResourceOptions
): InfiniteResourceReturn
`

$3

#### Options
`ts
type InfiniteResourceOptions = {
// Initial page key passed to fetcher
initialPageKey: P;

// Maximum number of pages to keep in memory
maxPages?: number;

// Custom function to merge pages
mergeData?: (prevPages: T[], newPage: T) => T[];

// Extract unique key from items for deduplication (NEW)
// Only applies when T is an array type
uniqueBy?: T extends readonly (infer Item)[]
? (item: Item) => string | number
: never;

// Called when fetcher throws
onError?: (error: Error) => void;

// All createResource options
initialValue?: T;
name?: string;
deferStream?: boolean;
storage?: () => Signal;
} & ResourceOptions
`

#### Fetcher Context
`ts
type FetcherContext

= {
// Set the next page key
setPageKey: Setter

;

// Check if at end
hasReachedEnd: Accessor;

// Mark as complete
setHasReachedEnd: Setter;

// AbortSignal for cancelling requests (NEW)
signal: AbortSignal;

// Current pagination direction (NEW)
direction: 'forward' | 'backward';
}
`

#### Return Value
`ts
type InfiniteResourceReturn = {
// Merged data from all pages
// If T is an array type, flattens by default
data: Accessor ? U[] : T[]>;

// Raw page responses
allData: Accessor;

// Current page resource
pageData: Resource;

// Trigger next page load (NEW: now accepts direction)
getNextPage: (direction?: 'forward' | 'backward') => void;

// Convenience for backward pagination (NEW)
getPreviousPage: () => void;

// Refetch current page without duplicating (NEW)
refetchCurrentPage: () => void;

// Get/set page key
pageKey: Accessor

;
setPageKey: Setter

;

// End of data tracking
hasReachedEnd: Accessor;
setHasReachedEnd: Setter;

// Intersection observer directive (NEW: now reactive)
refetchOnView: Directive;

// Underlying resource
resource: ResourceReturn;
}

// Directive arguments
type RefetchDirectiveArgs = [
boolean | (() => boolean), // Condition
() => void // Callback
] | (() => [
boolean | (() => boolean),
() => void
])
`

$3

#### getNextPage
Triggers the next page load using the current page key.
`ts
const { getNextPage } = createInfiniteResource(fetcher);
getNextPage(); // Loads next page if !hasReachedEnd
`

#### refetchOnView
Directive for viewport-based loading.
`ts
// Attach to element