Merge pull request #256 from psteinroe/fix/cursor-pagination

fix: cursor value parsing

.changeset/early-clouds-arrive.md

@@ -0,0 +1,5 @@
+---
+"@supabase-cache-helpers/postgrest-swr": patch
+---
+
+fix: cursor value parsing

packages/postgrest-swr/__tests__/query/use-cursor-infinite-scroll-query.spec.tsx

@@ -14,6 +14,11 @@ describe('useCursorInfiniteScrollQuery', () => {
   let testRunPrefix: string;
   let contacts: Database['public']['Tables']['contact']['Row'][];
 
+  let d1: Date;
+  let d2: Date;
+  let d3: Date;
+  let d4: Date;
+
   beforeAll(async () => {
     testRunPrefix = `${TEST_PREFIX}-${Math.floor(Math.random() * 100)}`;
     client = createClient(
@@ -22,13 +27,37 @@ describe('useCursorInfiniteScrollQuery', () => {
     );
     await client.from('contact').delete().ilike('username', `${TEST_PREFIX}%`);
 
+    d1 = new Date();
+    d1.setSeconds(d1.getSeconds() + 10);
+
+    d2 = new Date();
+    d2.setSeconds(d2.getSeconds() + 20);
+
+    d3 = new Date();
+    d3.setSeconds(d3.getSeconds() + 30);
+
+    d4 = new Date();
+    d4.setSeconds(d4.getSeconds() + 40);
+
     const { data } = await client
       .from('contact')
       .insert([
-        { username: `${testRunPrefix}-username-1` },
-        { username: `${testRunPrefix}-username-2` },
-        { username: `${testRunPrefix}-username-3` },
-        { username: `${testRunPrefix}-username-4` },
+        {
+          username: `${testRunPrefix}-username-1`,
+          created_at: d1.toISOString(),
+        },
+        {
+          username: `${testRunPrefix}-username-2`,
+          created_at: d2.toISOString(),
+        },
+        {
+          username: `${testRunPrefix}-username-3`,
+          created_at: d3.toISOString(),
+        },
+        {
+          username: `${testRunPrefix}-username-4`,
+          created_at: d4.toISOString(),
+        },
       ])
       .select('*')
       .throwOnError();
@@ -381,4 +410,55 @@ describe('useCursorInfiniteScrollQuery', () => {
 
     expect(screen.queryByTestId('loadMore')).toBeNull();
   });
+
+  it('should stop at lastCursor with timestamptz column', async () => {
+    function Page() {
+      const { data, loadMore, isValidating, error } =
+        useCursorInfiniteScrollQuery(
+          client
+            .from('contact')
+            .select('id,created_at,username')
+            .ilike('username', `${testRunPrefix}%`)
+            .order('created_at', { ascending: true })
+            .limit(1),
+          {
+            path: 'created_at',
+            until: d2.toISOString(),
+          }
+        );
+
+      return (
+        <div>
+          {loadMore && (
+            <div data-testid="loadMore" onClick={() => loadMore()} />
+          )}
+          <div data-testid="list">
+            {(data ?? []).map((p) => (
+              <div key={p.id}>{p.username}</div>
+            ))}
+          </div>
+        </div>
+      );
+    }
+
+    renderWithConfig(<Page />, { provider: () => provider });
+    await screen.findByText(
+      `${testRunPrefix}-username-1`,
+      {},
+      { timeout: 10000 }
+    );
+    const list = screen.getByTestId('list');
+    expect(list.childElementCount).toEqual(1);
+
+    fireEvent.click(screen.getByTestId('loadMore'));
+    await screen.findByText(
+      `${testRunPrefix}-username-2`,
+      {},
+      { timeout: 10000 }
+    );
+
+    expect(list.childElementCount).toEqual(2);
+
+    expect(screen.queryByTestId('loadMore')).toBeNull();
+  });
 });

packages/postgrest-swr/src/query/use-cursor-infinite-scroll-query.ts

@@ -1,5 +1,5 @@
 import { createCursorPaginationFetcher } from '@supabase-cache-helpers/postgrest-fetcher';
-import { get } from '@supabase-cache-helpers/postgrest-filter';
+import { get, parseValue } from '@supabase-cache-helpers/postgrest-filter';
 import {
   PostgrestPaginationCacheData,
   PostgrestPaginationResponse,
@@ -126,7 +126,9 @@ function useCursorInfiniteScrollQuery<
             },
           };
         }
-        const cursorValue = filter.split('.')[1];
+        const s = filter.split('.');
+        s.shift();
+        const cursorValue = s.join('.');
         return {
           cursor: cursorValue,
           order: {
@@ -180,11 +182,16 @@ function useCursorInfiniteScrollQuery<
       const [column, ascending, _] = orderingValue.split('.');
 
       const path = `${foreignTablePath ? `${foreignTablePath}.` : ''}${column}`;
-      const lastElem = get(flatData[flatData.length - 1], path) as string;
-      if (ascending === 'asc') {
-        hasLoadMore = lastElem < cursor.until;
-      } else {
-        hasLoadMore = lastElem > cursor.until;
+      const lastElem = parseValue(
+        get(flatData[flatData.length - 1], path) as string
+      );
+      const until = parseValue(cursor.until);
+      if (lastElem && until) {
+        if (ascending === 'asc') {
+          hasLoadMore = lastElem < until;
+        } else {
+          hasLoadMore = lastElem > until;
+        }
       }
     }