fix(shared): Avoid revalidating first page on infinite pagination (#7153)

Author: panteliselef

.changeset/thirty-pumas-hope.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': patch
+---
+
+Avoid revalidating first page on infinite pagination.

packages/clerk-js/src/test/create-fixtures.tsx

@@ -1,4 +1,5 @@
 import type { ClerkOptions, ClientJSON, EnvironmentJSON, LoadedClerk } from '@clerk/shared/types';
+import { useState } from 'react';
 import { vi } from 'vitest';
 
 import { Clerk as ClerkCtor } from '@/core/clerk';
@@ -83,6 +84,7 @@ const unboundCreateFixtures = (
 
     const MockClerkProvider = (props: any) => {
       const { children } = props;
+      const [swrConfig] = useState(() => ({ provider: () => new Map() }));
 
       const componentsWithoutContext = [
         'UsernameSection',
@@ -106,7 +108,7 @@ const unboundCreateFixtures = (
         <CoreClerkContextWrapper
           clerk={clerkMock}
           // Clear swr cache
-          swrConfig={{ provider: () => new Map() }}
+          swrConfig={swrConfig}
         >
           <EnvironmentProvider value={environmentMock}>
             <OptionsProvider value={optionsMock}>

packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganization.test.tsx

@@ -1,4 +1,5 @@
 import { useOrganization } from '@clerk/shared/react';
+import { createDeferredPromise } from '@clerk/shared/utils/index';
 import { describe, expect, it } from 'vitest';
 
 import { bindCreateFixtures } from '@/test/create-fixtures';
@@ -42,7 +43,7 @@ const undefinedPaginatedResource = {
 
 describe('useOrganization', () => {
   it('returns default values', async () => {
-    const { wrapper } = await createFixtures(f => {
+    const { wrapper, fixtures } = await createFixtures(f => {
       f.withOrganizations();
       f.withUser({
         email_addresses: ['[email protected]'],
@@ -65,10 +66,15 @@ describe('useOrganization', () => {
     expect(result.current.memberships).toEqual(expect.objectContaining(undefinedPaginatedResource));
     expect(result.current.domains).toEqual(expect.objectContaining(undefinedPaginatedResource));
     expect(result.current.membershipRequests).toEqual(expect.objectContaining(undefinedPaginatedResource));
+
+    expect(fixtures.clerk.organization?.getMemberships).not.toHaveBeenCalled();
+    expect(fixtures.clerk.organization?.getDomains).not.toHaveBeenCalled();
+    expect(fixtures.clerk.organization?.getMembershipRequests).not.toHaveBeenCalled();
+    expect(fixtures.clerk.organization?.getInvitations).not.toHaveBeenCalled();
   });
 
-  it('returns null when a organization is not active ', async () => {
-    const { wrapper } = await createFixtures(f => {
+  it('returns null when a organization is not active', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
       f.withOrganizations();
       f.withUser({
         email_addresses: ['[email protected]'],
@@ -83,6 +89,8 @@ describe('useOrganization', () => {
     expect(result.current.memberships).toBeNull();
     expect(result.current.domains).toBeNull();
     expect(result.current.membershipRequests).toBeNull();
+
+    expect(fixtures.clerk.organization).toBeNull();
   });
 
   describe('memberships', () => {
@@ -543,52 +551,34 @@ describe('useOrganization', () => {
       await waitFor(() => expect(result.current.invitations?.isLoading).toBe(false));
       expect(result.current.invitations?.isFetching).toBe(false);
 
-      fixtures.clerk.organization?.getInvitations.mockReturnValueOnce(
-        Promise.resolve({
-          data: [
-            createFakeOrganizationInvitation({
-              id: '1',
-              emailAddress: '[email protected]',
-              organizationId: '1',
-              createdAt: new Date('2022-01-01'),
-            }),
-            createFakeOrganizationInvitation({
-              id: '2',
-              emailAddress: '[email protected]',
-              organizationId: '1',
-              createdAt: new Date('2022-01-01'),
-            }),
-          ],
-          total_count: 4,
-        }),
-      );
-
-      fixtures.clerk.organization?.getInvitations.mockReturnValueOnce(
-        Promise.resolve({
-          data: [
-            createFakeOrganizationInvitation({
-              id: '3',
-              emailAddress: '[email protected]',
-              organizationId: '1',
-              createdAt: new Date('2022-01-01'),
-            }),
-            createFakeOrganizationInvitation({
-              id: '4',
-              emailAddress: '[email protected]',
-              organizationId: '1',
-              createdAt: new Date('2022-01-01'),
-            }),
-          ],
-          total_count: 4,
-        }),
-      );
+      const deferred = createDeferredPromise();
 
+      fixtures.clerk.organization?.getInvitations.mockReturnValueOnce(deferred.promise);
       act(() => result.current.invitations?.fetchNext?.());
 
       await waitFor(() => expect(result.current.invitations?.isFetching).toBe(true));
       expect(result.current.invitations?.isLoading).toBe(false);
 
+      deferred.resolve({
+        data: [
+          createFakeOrganizationInvitation({
+            id: '3',
+            emailAddress: '[email protected]',
+            organizationId: '1',
+            createdAt: new Date('2022-01-01'),
+          }),
+          createFakeOrganizationInvitation({
+            id: '4',
+            emailAddress: '[email protected]',
+            organizationId: '1',
+            createdAt: new Date('2022-01-01'),
+          }),
+        ],
+        total_count: 4,
+      });
+
       await waitFor(() => expect(result.current.invitations?.isFetching).toBe(false));
+
       expect(result.current.invitations?.data).toEqual(
         expect.arrayContaining([
           expect.objectContaining({