diff --git a/packages/postgrest-swr/__tests__/mutate/use-update-mutation.integration.spec.tsx b/packages/postgrest-swr/__tests__/mutate/use-update-mutation.integration.spec.tsx index 325762c99..3cdeea5a6 100644 --- a/packages/postgrest-swr/__tests__/mutate/use-update-mutation.integration.spec.tsx +++ b/packages/postgrest-swr/__tests__/mutate/use-update-mutation.integration.spec.tsx @@ -1,6 +1,6 @@ import { createClient, SupabaseClient } from '@supabase/supabase-js'; import { fireEvent, screen } from '@testing-library/react'; -import React, { useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useInsertMutation, useQuery, useUpdateMutation } from '../../src'; import type { Database } from '../database.types'; @@ -314,4 +314,103 @@ describe('useUpdateMutation', () => { await screen.findByText([NOTE_UPDATED].join(','), {}, { timeout: 10000 }); await screen.findByText('success: true', {}, { timeout: 10000 }); }); + + it('revalidate should not return undefined while validating', async () => { + const USERNAME = `${testRunPrefix}-revalidate-fetch`; + const NOTE = `${testRunPrefix}-revalidate-note`; + const NOTE_UPDATED = `${testRunPrefix}-revalidate-note-updated`; + + const { data: contact } = await client + .from('contact') + .insert({ username: USERNAME }) + .select('id') + .single() + .throwOnError(); + + const { data: contactNote } = await client + .from('contact_note') + .insert({ + contact_id: contact!.id, + text: NOTE, + updated_by_contact_id: contact!.id, + created_by_contact_id: contact!.id, + }) + .select('id') + .single() + .throwOnError(); + + function Page() { + const contactDataUndefinedCount = useRef(0); + const [success, setSuccess] = useState(false); + const { data: contacts } = useQuery( + client.from('contact').select('id, username'), + { + revalidateOnFocus: false, + revalidateOnReconnect: false, + }, + ); + const { data } = useQuery( + client + .from('contact_note') + .select('id,text') + .ilike('text', `${testRunPrefix}-revalidate-note%`), + { + revalidateOnFocus: false, + revalidateOnReconnect: false, + }, + ); + const { trigger: update } = useUpdateMutation( + client.from('contact_note'), + ['id'], + 'id,text', + { + onSuccess: () => setSuccess(true), + onError: (error) => console.error(error), + revalidateTables: [{ schema: 'public', table: 'contact' }], + }, + ); + useEffect(() => { + if (contacts === undefined) { + contactDataUndefinedCount.current++; + } + }, [contacts]); + return ( +
+
+ await update({ + id: contactNote!.id, + text: NOTE_UPDATED, + }) + } + /> + {(contacts ?? []).map((c) => c.username).join(',')} + + {(data ?? []) + .map((d) => d.text) + .sort() + .join(',')} + + {`success: ${success}`} + {`undefinedCount: ${contactDataUndefinedCount.current}`} +
+ ); + } + + renderWithConfig(, { provider: () => provider }); + await screen.findByText([NOTE].join(','), {}, { timeout: 10000 }); + + fireEvent.click(screen.getByTestId('update')); + + await screen.findByText([NOTE_UPDATED].join(','), {}, { timeout: 10000 }); + await screen.findByText('success: true', {}, { timeout: 10000 }); + + fireEvent.click(screen.getByTestId('update')); + fireEvent.click(screen.getByTestId('update')); + fireEvent.click(screen.getByTestId('update')); + // revalidation should not return undefined while validating. Data should stay stable + // while rvalidating. + await screen.findByText('undefinedCount: 1', {}, { timeout: 10000 }); + }); });