supabase-cache-helpers icon indicating copy to clipboard operation
supabase-cache-helpers copied to clipboard

Cache not updating after mutation when using fallback data in `useQuery`

Open nekusu opened this issue 5 months ago • 4 comments

Describe the bug
When using mutation hooks with fallback data set in the useQuery hook, the cache does not update after triggering a mutation. Specifically, after passing fallback data to useQuery via fetchQueryFallbackData, useUpdateMutation doesn't seem to update the cache as expected.

To Reproduce
Steps to reproduce the behavior:

  1. Implement useQuery with fallbackData as shown in the example below:
    // Server component
    const [, fallbackData] = await fetchQueryFallbackData(
       supabase.from('users').select('id,avatar_url,name').eq('id', id).single(),
     );
    
    // Client component
    const { data: user } = useQuery(
      supabase.from('users').select('id,avatar_url,name').eq('id', id).single(),
      { fallbackData },
    );
    
  2. Trigger a mutation using useUpdateMutation to update a user record:
    const { trigger: updateUser } = useUpdateMutation(supabase.from('users'), ['id']);
    
  3. Observe that the cache doesn't update after the mutation is triggered, even though it should.

Expected behavior
The cache should be updated after a mutation when using useQuery with fallbackData.

Additional context

  • Next.js v14 using the app router.
  • Setting revalidateIfStale: true, either directly in the hook or globally via SWRConfig, resolves the issue and updates the cache as expected.

nekusu avatar Sep 13 '24 10:09 nekusu