supabase-cache-helpers
supabase-cache-helpers copied to clipboard
Cache not updating after mutation when using fallback data in `useQuery`
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:
- Implement
useQuery
withfallbackData
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 }, );
- Trigger a mutation using
useUpdateMutation
to update a user record:const { trigger: updateUser } = useUpdateMutation(supabase.from('users'), ['id']);
- 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 viaSWRConfig
, resolves the issue and updates the cache as expected.