[{"data":1,"prerenderedAt":475},["ShallowReactive",2],{"\u002Fnotes\u002Ftanstack-query-offline":3},{"id":4,"title":5,"body":6,"description":466,"draft":467,"extension":468,"meta":469,"navigation":132,"path":470,"publishDate":471,"seo":472,"stem":473,"__hash__":474},"notes\u002Fnotes\u002Ftanstack-query-offline.md","TanStack Query setup for offline caching",{"type":7,"value":8,"toc":464},"minimark",[9,13,460],[10,11,12],"p",{},"Code snippet to easily setup offline caching for TanStack Query in a React Native app.",[14,15,20],"pre",{"className":16,"code":17,"language":18,"meta":19,"style":19},"language-tsx shiki shiki-themes github-light github-light github-dark","import { persister } from \"@\u002Flib\u002Fmmkv\";\nimport { QueryClient, onlineManager } from \"@tanstack\u002Freact-query\";\nimport { PersistQueryClientProvider } from \"@tanstack\u002Freact-query-persist-client\";\nimport { useEffect, type PropsWithChildren } from \"react\";\nimport { useReactQueryDevTools } from \"@dev-plugins\u002Freact-query\";\nimport NetInfo from \"@react-native-community\u002Fnetinfo\";\n\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      staleTime: Number.POSITIVE_INFINITY,\n      gcTime: Number.POSITIVE_INFINITY,\n    },\n  },\n});\n\nexport function QueryProvider({ children }: PropsWithChildren) {\n  useReactQueryDevTools(queryClient);\n\n  useEffect(() => {\n    return NetInfo.addEventListener((state) => {\n      const status = !!state.isConnected;\n      onlineManager.setOnline(status);\n    });\n  }, []);\n\n  return (\n    \u003CPersistQueryClientProvider\n      client={queryClient}\n      onSuccess={() =>\n        queryClient.resumePausedMutations().then(() => queryClient.invalidateQueries())\n      }\n      persistOptions={{ persister, maxAge: Number.POSITIVE_INFINITY }}\n    >\n      {children}\n    \u003C\u002FPersistQueryClientProvider>\n  );\n}\n","tsx","",[21,22,23,46,61,76,97,112,127,134,157,163,169,175,181,187,193,199,204,235,244,249,264,289,306,318,324,330,335,344,353,365,379,407,413,424,430,436,448,454],"code",{"__ignoreMap":19},[24,25,28,32,36,39,43],"span",{"class":26,"line":27},"line",1,[24,29,31],{"style":30},"--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#F97583","import",[24,33,35],{"style":34},"--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8"," { persister } ",[24,37,38],{"style":30},"from",[24,40,42],{"style":41},"--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF"," \"@\u002Flib\u002Fmmkv\"",[24,44,45],{"style":34},";\n",[24,47,49,51,54,56,59],{"class":26,"line":48},2,[24,50,31],{"style":30},[24,52,53],{"style":34}," { QueryClient, onlineManager } ",[24,55,38],{"style":30},[24,57,58],{"style":41}," \"@tanstack\u002Freact-query\"",[24,60,45],{"style":34},[24,62,64,66,69,71,74],{"class":26,"line":63},3,[24,65,31],{"style":30},[24,67,68],{"style":34}," { PersistQueryClientProvider } ",[24,70,38],{"style":30},[24,72,73],{"style":41}," \"@tanstack\u002Freact-query-persist-client\"",[24,75,45],{"style":34},[24,77,79,81,84,87,90,92,95],{"class":26,"line":78},4,[24,80,31],{"style":30},[24,82,83],{"style":34}," { useEffect, ",[24,85,86],{"style":30},"type",[24,88,89],{"style":34}," PropsWithChildren } ",[24,91,38],{"style":30},[24,93,94],{"style":41}," \"react\"",[24,96,45],{"style":34},[24,98,100,102,105,107,110],{"class":26,"line":99},5,[24,101,31],{"style":30},[24,103,104],{"style":34}," { useReactQueryDevTools } ",[24,106,38],{"style":30},[24,108,109],{"style":41}," \"@dev-plugins\u002Freact-query\"",[24,111,45],{"style":34},[24,113,115,117,120,122,125],{"class":26,"line":114},6,[24,116,31],{"style":30},[24,118,119],{"style":34}," NetInfo ",[24,121,38],{"style":30},[24,123,124],{"style":41}," \"@react-native-community\u002Fnetinfo\"",[24,126,45],{"style":34},[24,128,130],{"class":26,"line":129},7,[24,131,133],{"emptyLinePlaceholder":132},true,"\n",[24,135,137,140,144,147,150,154],{"class":26,"line":136},8,[24,138,139],{"style":30},"const",[24,141,143],{"style":142},"--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF"," queryClient",[24,145,146],{"style":30}," =",[24,148,149],{"style":30}," new",[24,151,153],{"style":152},"--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0"," QueryClient",[24,155,156],{"style":34},"({\n",[24,158,160],{"class":26,"line":159},9,[24,161,162],{"style":34},"  defaultOptions: {\n",[24,164,166],{"class":26,"line":165},10,[24,167,168],{"style":34},"    queries: {\n",[24,170,172],{"class":26,"line":171},11,[24,173,174],{"style":34},"      staleTime: Number.POSITIVE_INFINITY,\n",[24,176,178],{"class":26,"line":177},12,[24,179,180],{"style":34},"      gcTime: Number.POSITIVE_INFINITY,\n",[24,182,184],{"class":26,"line":183},13,[24,185,186],{"style":34},"    },\n",[24,188,190],{"class":26,"line":189},14,[24,191,192],{"style":34},"  },\n",[24,194,196],{"class":26,"line":195},15,[24,197,198],{"style":34},"});\n",[24,200,202],{"class":26,"line":201},16,[24,203,133],{"emptyLinePlaceholder":132},[24,205,207,210,213,216,219,223,226,229,232],{"class":26,"line":206},17,[24,208,209],{"style":30},"export",[24,211,212],{"style":30}," function",[24,214,215],{"style":152}," QueryProvider",[24,217,218],{"style":34},"({ ",[24,220,222],{"style":221},"--shiki-light:#E36209;--shiki-default:#E36209;--shiki-dark:#FFAB70","children",[24,224,225],{"style":34}," }",[24,227,228],{"style":30},":",[24,230,231],{"style":152}," PropsWithChildren",[24,233,234],{"style":34},") {\n",[24,236,238,241],{"class":26,"line":237},18,[24,239,240],{"style":152},"  useReactQueryDevTools",[24,242,243],{"style":34},"(queryClient);\n",[24,245,247],{"class":26,"line":246},19,[24,248,133],{"emptyLinePlaceholder":132},[24,250,252,255,258,261],{"class":26,"line":251},20,[24,253,254],{"style":152},"  useEffect",[24,256,257],{"style":34},"(() ",[24,259,260],{"style":30},"=>",[24,262,263],{"style":34}," {\n",[24,265,267,270,273,276,279,282,285,287],{"class":26,"line":266},21,[24,268,269],{"style":30},"    return",[24,271,272],{"style":34}," NetInfo.",[24,274,275],{"style":152},"addEventListener",[24,277,278],{"style":34},"((",[24,280,281],{"style":221},"state",[24,283,284],{"style":34},") ",[24,286,260],{"style":30},[24,288,263],{"style":34},[24,290,292,295,298,300,303],{"class":26,"line":291},22,[24,293,294],{"style":30},"      const",[24,296,297],{"style":142}," status",[24,299,146],{"style":30},[24,301,302],{"style":30}," !!",[24,304,305],{"style":34},"state.isConnected;\n",[24,307,309,312,315],{"class":26,"line":308},23,[24,310,311],{"style":34},"      onlineManager.",[24,313,314],{"style":152},"setOnline",[24,316,317],{"style":34},"(status);\n",[24,319,321],{"class":26,"line":320},24,[24,322,323],{"style":34},"    });\n",[24,325,327],{"class":26,"line":326},25,[24,328,329],{"style":34},"  }, []);\n",[24,331,333],{"class":26,"line":332},26,[24,334,133],{"emptyLinePlaceholder":132},[24,336,338,341],{"class":26,"line":337},27,[24,339,340],{"style":30},"  return",[24,342,343],{"style":34}," (\n",[24,345,347,350],{"class":26,"line":346},28,[24,348,349],{"style":34},"    \u003C",[24,351,352],{"style":142},"PersistQueryClientProvider\n",[24,354,356,359,362],{"class":26,"line":355},29,[24,357,358],{"style":152},"      client",[24,360,361],{"style":30},"=",[24,363,364],{"style":34},"{queryClient}\n",[24,366,368,371,373,376],{"class":26,"line":367},30,[24,369,370],{"style":152},"      onSuccess",[24,372,361],{"style":30},[24,374,375],{"style":34},"{() ",[24,377,378],{"style":30},"=>\n",[24,380,382,385,388,391,394,396,398,401,404],{"class":26,"line":381},31,[24,383,384],{"style":34},"        queryClient.",[24,386,387],{"style":152},"resumePausedMutations",[24,389,390],{"style":34},"().",[24,392,393],{"style":152},"then",[24,395,257],{"style":34},[24,397,260],{"style":30},[24,399,400],{"style":34}," queryClient.",[24,402,403],{"style":152},"invalidateQueries",[24,405,406],{"style":34},"())\n",[24,408,410],{"class":26,"line":409},32,[24,411,412],{"style":34},"      }\n",[24,414,416,419,421],{"class":26,"line":415},33,[24,417,418],{"style":152},"      persistOptions",[24,420,361],{"style":30},[24,422,423],{"style":34},"{{ persister, maxAge: Number.POSITIVE_INFINITY }}\n",[24,425,427],{"class":26,"line":426},34,[24,428,429],{"style":34},"    >\n",[24,431,433],{"class":26,"line":432},35,[24,434,435],{"style":34},"      {children}\n",[24,437,439,442,445],{"class":26,"line":438},36,[24,440,441],{"style":34},"    \u003C\u002F",[24,443,444],{"style":142},"PersistQueryClientProvider",[24,446,447],{"style":34},">\n",[24,449,451],{"class":26,"line":450},37,[24,452,453],{"style":34},"  );\n",[24,455,457],{"class":26,"line":456},38,[24,458,459],{"style":34},"}\n",[461,462,463],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":19,"searchDepth":48,"depth":48,"links":465},[],"Code snippet to easily setup offline caching for TanStack Query in a React Native app",false,"md",{},"\u002Fnotes\u002Ftanstack-query-offline","2025-01-28",{"title":5,"description":466},"notes\u002Ftanstack-query-offline","HDE_WggzsV11M3wdd689EMUCoh0gPOc3LpyKqJNfZx4",1793618031767]