Increase cache time to 24 hours and limit thread pages in cache (#1973)

# READ CAREFULLY THEN REMOVE

Remove bullet points that are not relevant.

PLEASE REFRAIN FROM USING AI TO WRITE YOUR CODE AND PR DESCRIPTION. IF YOU DO USE AI TO WRITE YOUR CODE PLEASE PROVIDE A DESCRIPTION AND REVIEW IT CAREFULLY. MAKE SURE YOU UNDERSTAND THE CODE YOU ARE SUBMITTING USING AI.

- Pull requests that do not follow these guidelines will be closed without review or comment.
- If you use AI to write your PR description your pr will be close without review or comment.
- If you are unsure about anything, feel free to ask for clarification.

## Description

Please provide a clear description of your changes.

---

## Type of Change

Please delete options that are not relevant.

- [ ] 🐛 Bug fix (non-breaking change which fixes an issue)
- [ ] ✨ New feature (non-breaking change which adds functionality)
- [ ] 💥 Breaking change (fix or feature with breaking changes)
- [ ] 📝 Documentation update
- [ ] 🎨 UI/UX improvement
- [ ] 🔒 Security enhancement
- [ ] ⚡ Performance improvement

## Areas Affected

Please check all that apply:

- [ ] Email Integration (Gmail, IMAP, etc.)
- [ ] User Interface/Experience
- [ ] Authentication/Authorization
- [ ] Data Storage/Management
- [ ] API Endpoints
- [ ] Documentation
- [ ] Testing Infrastructure
- [ ] Development Workflow
- [ ] Deployment/Infrastructure

## Testing Done

Describe the tests you've done:

- [ ] Unit tests added/updated
- [ ] Integration tests added/updated
- [ ] Manual testing performed
- [ ] Cross-browser testing (if UI changes)
- [ ] Mobile responsiveness verified (if UI changes)

## Security Considerations

For changes involving data or authentication:

- [ ] No sensitive data is exposed
- [ ] Authentication checks are in place
- [ ] Input validation is implemented
- [ ] Rate limiting is considered (if applicable)

## Checklist

- [ ] I have read the [CONTRIBUTING](https://github.com/Mail-0/Zero/blob/staging/.github/CONTRIBUTING.md) document
- [ ] My code follows the project's style guidelines
- [ ] I have performed a self-review of my code
- [ ] I have commented my code, particularly in complex areas
- [ ] I have updated the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix/feature works
- [ ] All tests pass locally
- [ ] Any dependent changes are merged and published

## Additional Notes

Add any other context about the pull request here.

## Screenshots/Recordings

Add screenshots or recordings here if applicable.

---

_By submitting this pull request, I confirm that my contribution is made under the terms of the project's license._

    
<!-- This is an auto-generated description by cubic. -->
---

## Summary by cubic
Increased the cache duration for queries to 24 hours and limited the number of cached thread pages to 3 to reduce unnecessary refetching.

- **Performance**
  - Updated cache settings to keep data longer and prevent excessive thread page caching.

<!-- End of auto-generated description by cubic. -->



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Improved caching for mail threads, allowing cached data to be retained for up to 24 hours.
* **Bug Fixes**
  * Limited the number of cached pages for the infinite thread list to the most recent three, ensuring better performance and up-to-date data.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MrgSub

apps/mail/providers/query-provider.tsx

@@ -3,7 +3,7 @@ import {
   type PersistedClient,
   type Persister,
 } from '@tanstack/react-query-persist-client';
-import { QueryCache, QueryClient, hashKey } from '@tanstack/react-query';
+import { QueryCache, QueryClient, hashKey, type InfiniteData } from '@tanstack/react-query';
 import { createTRPCContext } from '@trpc/tanstack-react-query';
 import { createTRPCClient, httpBatchLink } from '@trpc/client';
 import { useMemo, type PropsWithChildren } from 'react';
@@ -53,7 +53,7 @@ export const makeQueryClient = (connectionId: string | null) =>
         retry: false,
         refetchOnWindowFocus: false,
         queryKeyHashFn: (queryKey) => hashKey([{ connectionId }, ...queryKey]),
-        gcTime: 1000 * 60 * 1 * 1, // 60 minutes, we're storing in DOs,
+        gcTime: 1000 * 60 * 60 * 24, // 24 hours,
       },
       mutations: {
         onError: (err) => console.error(err.message),
@@ -107,6 +107,7 @@ export const trpcClient = createTRPCClient<AppRouter>({
   ],
 });
 
+type TrpcHook = ReturnType<typeof useTRPC>;
 export function QueryProvider({
   children,
   connectionId,
@@ -123,7 +124,25 @@ export function QueryProvider({
       persistOptions={{
         persister,
         buster: CACHE_BURST_KEY,
-        maxAge: 1000 * 60 * 1 * 1, // 60 minutes, we're storing in DOs,
+        maxAge: 1000 * 60 * 60 * 24, // 24 hours
+      }}
+      onSuccess={() => {
+        const threadQueryKey = [['mail', 'listThreads'], { type: 'infinite' }];
+        queryClient.setQueriesData(
+          { queryKey: threadQueryKey },
+          (data: InfiniteData<TrpcHook['mail']['listThreads']['~types']['output']>) => {
+            if (!data) return data;
+            // We only keep few pages of threads in the cache before we invalidate them
+            // invalidating will attempt to refetch every page that was in cache, if someone have too many pages in cache, it will refetch every page every time
+            // We don't want that, just keep like 3 pages (20 * 3 = 60 threads) in cache
+            return {
+              pages: data.pages.slice(0, 3),
+              pageParams: data.pageParams.slice(0, 3),
+            };
+          },
+        );
+        // invalidate the query, it will refetch when the data is it is being accessed
+        queryClient.invalidateQueries({ queryKey: threadQueryKey });
       }}
     >
       <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>