From fab07d6861a3b465e62ad7a39abb82f9daa1f068 Mon Sep 17 00:00:00 2001 From: mkbeefcake Date: Mon, 4 Sep 2023 12:32:37 +0000 Subject: [PATCH] 20230904: integrated persist storage for cache --- packages/ui/package.json | 1 + .../src/app/providers/QueryNodeProvider.tsx | 20 ++++++++++++++----- .../src/forum/hooks/useCategoryLatestPost.ts | 8 +++++++- .../ui/src/forum/hooks/useThreadLatestPost.ts | 6 +++++- yarn.lock | 10 ++++++++++ 5 files changed, 38 insertions(+), 7 deletions(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index 3d7fede27e..c5015d0189 100644 --- a/packages/ui/package.json +++ b/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", diff --git a/packages/ui/src/app/providers/QueryNodeProvider.tsx b/packages/ui/src/app/providers/QueryNodeProvider.tsx index 5fe2408e1f..962deeadfb 100644 --- a/packages/ui/src/app/providers/QueryNodeProvider.tsx +++ b/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>() 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 {children} } -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: { diff --git a/packages/ui/src/forum/hooks/useCategoryLatestPost.ts b/packages/ui/src/forum/hooks/useCategoryLatestPost.ts index 01145b746c..cfee13ccf4 100644 --- a/packages/ui/src/forum/hooks/useCategoryLatestPost.ts +++ b/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 { diff --git a/packages/ui/src/forum/hooks/useThreadLatestPost.ts b/packages/ui/src/forum/hooks/useThreadLatestPost.ts index 7d0b089dbc..7a082d8ec8 100644 --- a/packages/ui/src/forum/hooks/useThreadLatestPost.ts +++ b/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) } } diff --git a/yarn.lock b/yarn.lock index 9128de1a86..2758cc1b34 100644 --- a/yarn.lock +++ b/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"