initialize react-query provider for mobile app

apps/mobile/src/app/_layout.tsx

@@ -4,12 +4,14 @@ import * as SecureStore from "expo-secure-store";
 import { View, Text } from "react-native";
 import { useEffect, useState } from "react";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import { QueryClientProvider } from "@tanstack/react-query";
 import { validateEnv } from "../utils/env";
 import { ThemeProvider } from "../contexts/ThemeContext";
 import { StatisticsProvider } from "../contexts/StatisticsContext";
 import { FitnessGoalsProvider } from "../contexts/FitnessGoalsContext";
 import { RecommendationsProvider } from "../contexts/RecommendationsContext";
 import { NotificationsProvider } from "../contexts/NotificationsContext";
+import { queryClient } from "../lib/query-client";
 import log from "../utils/logger";
 
 // Wrapper to use notification permissions hook after ClerkLoaded
@@ -172,6 +174,7 @@ export default function RootLayout() {
 
   return (
     <SafeAreaProvider>
+      <QueryClientProvider client={queryClient}>
         <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
           <ClerkLoaded>
             <ThemeProvider>
@@ -187,6 +190,7 @@ export default function RootLayout() {
             </ThemeProvider>
           </ClerkLoaded>
         </ClerkProvider>
+      </QueryClientProvider>
     </SafeAreaProvider>
   );
 }

apps/mobile/src/lib/query-client.ts

@@ -0,0 +1,18 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30000,
+      gcTime: 5 * 60 * 1000,
+      retry: 1,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: true,
+    },
+  },
+});
+
+export const userScopedKey = (
+  resource: string,
+  userId: string,
+): [string, string] => [resource, userId];