20230904: integrated persist storage for cache

packages/ui/package.json

@@ -50,6 +50,7 @@
     "@types/react-transition-group": "^4.4.3",
     "@types/styled-components": "^5.1.15",
     "@xstate/react": "^1.6.1",
+    "apollo3-cache-persist": "^0.14.1",
     "copy-webpack-plugin": "^9.0.1",
     "crypto-browserify": "^3.12.0",
     "date-fns": "^2.25.0",

packages/ui/src/app/providers/QueryNodeProvider.tsx

@@ -7,6 +7,7 @@ import {
   NormalizedCacheObject,
   split,
 } from '@apollo/client'
+import { persistCache, LocalStorageWrapper } from 'apollo3-cache-persist'
 import { onError } from '@apollo/client/link/error'
 import { WebSocketLink } from '@apollo/client/link/ws'
 import { getMainDefinition } from '@apollo/client/utilities'
@@ -32,9 +33,12 @@ export const QueryNodeProvider = ({ children }: Props) => {
   const [apolloClient, setApolloClient] = useState<ApolloClient<NormalizedCacheObject>>()
 
   useEffect(() => {
-    setApolloClient(
-      getApolloClient(endpoints.queryNodeEndpoint, endpoints.queryNodeEndpointSubscription, setQnConnectionState)
-    )
+    async function init() {
+      setApolloClient(
+        await getApolloClient(endpoints.queryNodeEndpoint, endpoints.queryNodeEndpointSubscription, setQnConnectionState)
+      )
+    }
+    init();
   }, [endpoints.queryNodeEndpointSubscription, endpoints.queryNodeEndpoint])
 
   if (!apolloClient) {
@@ -52,7 +56,7 @@ export const QueryNodeProvider = ({ children }: Props) => {
   return <ApolloProvider client={apolloClient}>{children}</ApolloProvider>
 }
 
-const getApolloClient = (
+const getApolloClient = async (
   queryNodeEndpoint: string,
   queryNodeEndpointSubscription: string | undefined,
   stateCallback: (state: ConnectionState) => void
@@ -99,9 +103,15 @@ const getApolloClient = (
         queryLink
       )
 
+  const cache = new InMemoryCache();
+  await persistCache({
+    cache,
+    storage: new LocalStorageWrapper(window.localStorage)
+  });
+
   return new ApolloClient({
     link: splitLink,
-    cache: new InMemoryCache(),
+    cache: cache,
     connectToDevTools: true,
     defaultOptions: {
       watchQuery: {

packages/ui/src/forum/hooks/useCategoryLatestPost.ts

@@ -4,6 +4,9 @@ import { ForumPostOrderByInput, ForumThreadOrderByInput } from '@/common/api/que
 import { useGetForumPostsLazyQuery, useGetForumThreadsQuery } from '@/forum/queries'
 import { asForumPost, asForumThread } from '@/forum/types'
 
+import { GetForumPostsDocument } from '@/forum/queries'
+import * as Apollo from '@apollo/client'
+
 export const useCategoryLatestPost = (category_eq: string) => {
   const { data: threadData, loading: loadingThreads } = useGetForumThreadsQuery({
     variables: {
@@ -25,7 +28,10 @@ export const useCategoryLatestPost = (category_eq: string) => {
       })
   }, [threadData])
 
-  const [fetchPost, { data: postData, loading: loadingPosts }] = useGetForumPostsLazyQuery()
+  // const [fetchPost, { data: postData, loading: loadingPosts }] = useGetForumPostsLazyQuery()
+  const [fetchPost, { data: postData, loading: loadingPosts }] = 
+    Apollo.useLazyQuery(GetForumPostsDocument, {fetchPolicy: 'cache-only'});
+
   const rawPost = postData?.forumPosts[0]
 
   return {

packages/ui/src/forum/hooks/useThreadLatestPost.ts

@@ -1,14 +1,18 @@
 import { useMemo } from 'react'
 
+import { GetForumPostsDocument } from '@/forum/queries'
+import * as Apollo from '@apollo/client'
 import { ForumPostOrderByInput, ForumPostWhereInput } from '@/common/api/queries'
 import { useGetForumPostsQuery } from '@/forum/queries'
+
 import { asForumPost } from '@/forum/types'
 
 const orderBy = [ForumPostOrderByInput.UpdatedAtDesc]
 
 export const useThreadLatestPost = (threadId: string) => {
   const where = useMemo((): ForumPostWhereInput => ({ thread: { id_eq: threadId }, isVisible_eq: true }), [threadId])
-  const { data } = useGetForumPostsQuery({ variables: { where, orderBy, limit: 1 } })
+  // const { data } = useGetForumPostsQuery({ variables: { where, orderBy, limit: 1 } })
+  const { data } = Apollo.useQuery(GetForumPostsDocument, { variables: { where, orderBy, limit: 1 }, fetchPolicy:'cache-only'});
   const rawPost = data?.forumPosts[0]
   return { post: rawPost && asForumPost(rawPost) }
 }

yarn.lock

@@ -3699,6 +3699,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": ^5.50.0
     "@typescript-eslint/parser": ^5.50.0
     "@xstate/react": ^1.6.1
+    apollo3-cache-persist: ^0.14.1
     babel-jest: ^27.2.5
     babel-loader: ^8.2.2
     babel-plugin-import-graphql: ^2.8.1
@@ -8418,6 +8419,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"apollo3-cache-persist@npm:^0.14.1":
+  version: 0.14.1
+  resolution: "apollo3-cache-persist@npm:0.14.1"
+  peerDependencies:
+    "@apollo/client": ^3.2.5
+  checksum: 9f286707c9ecc628c0a44117e5ed67ccdb2a5befe28029aba69724595c2ddacfe47c43271d7607a4046cb5167f25da5f81c27579413c95254dfdb91039e9fc1c
+  languageName: node
+  linkType: hard
+
 "app-root-dir@npm:^1.0.2":
   version: 1.0.2
   resolution: "app-root-dir@npm:1.0.2"