-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: only fetch data since last fetch, closes #122
- add endpoint and graphQL types - create hook `useEntitesUpdatedSince` which updates cache, pages query with `cache-only` - store `updatedSince` in *localStorage* for now - used on `NotesPage` and `TagsPage` - missing client typescript types for graphQL types, blocked on #159 - filter notes with `deletedAt` in `useFilteredNotes` since deleted notes sometimes get sent to client now (to indicate deletion) - `useDataState` treats loading state like background loads, as happens with `refetch`
- Loading branch information
1 parent
a846b33
commit 882fa52
Showing
10 changed files
with
246 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| import { gql, useApolloClient, useLazyQuery } from '@apollo/client'; | ||
| import { useEffect } from 'react'; | ||
| import { NOTES_QUERY } from '../containers/NotesPage/NotesPage'; | ||
| import { TAGS_QUERY } from '../containers/TagsPage'; | ||
| import { NotesForList } from '../generated/NotesForList'; | ||
| import { TagsQuery } from '../generated/TagsQuery'; | ||
| import { | ||
| BASE_NOTE_FRAGMENT, | ||
| BASE_TAG_FRAGMENT, | ||
| } from '../utils/sharedQueriesAndFragments'; | ||
| import useDataState, { DataState } from '../utils/useDataState'; | ||
| import useIsOnline from './useIsOnline'; | ||
|
|
||
| export const ENTITIES_UPDATED_SINCE_QUERY = gql` | ||
| query EntitiesUpdatedSince($updatedSince: Date!) { | ||
| entitiesUpdatedSince(updatedSince: $updatedSince) { | ||
| notes { | ||
| ...BaseNote | ||
| } | ||
| tags { | ||
| ...BaseTag | ||
| } | ||
| timestamp | ||
| } | ||
| } | ||
| ${BASE_NOTE_FRAGMENT} | ||
| ${BASE_TAG_FRAGMENT} | ||
| `; | ||
| export const ENTITIES_UPDATED_SINCE_STORAGE_KEY = 'updatedSince'; | ||
| const getUpdatedSince = () => | ||
| parseInt(localStorage.getItem(ENTITIES_UPDATED_SINCE_STORAGE_KEY) as any) || | ||
| 0; | ||
| const ENTITIES_UPDATED_SINCE_INTERVAL_MS = 60 * 1000; | ||
|
|
||
| // todo: types, blocked on graphQL/apollo type generation not working (2022-08-07) | ||
| const useEntitiesUpdatedSince = () => { | ||
| const apolloClient = useApolloClient(); | ||
| const isOnline = useIsOnline(); | ||
|
|
||
| const [fetchEntitiesUpdatedSince, entitiesUpdatedSince] = useDataState( | ||
| useLazyQuery(ENTITIES_UPDATED_SINCE_QUERY, { | ||
| onCompleted({ entitiesUpdatedSince }) { | ||
| const { cache } = apolloClient; | ||
| const lastUpdate = getUpdatedSince(); | ||
|
|
||
| if (entitiesUpdatedSince.notes.length) { | ||
| const notesCacheValue = cache.readQuery<NotesForList>({ | ||
| query: NOTES_QUERY, | ||
| }); | ||
|
|
||
| let cachedNotes; | ||
|
|
||
| if (lastUpdate) { | ||
| if (!notesCacheValue) { | ||
| throw Error( | ||
| '[NotesPage: ENTITIES_UPDATED_SINCE_QUERY.onCompleted] Failed to read cache for notes.' | ||
| ); | ||
| } | ||
|
|
||
| entitiesUpdatedSince.notes.forEach((note) => { | ||
| if (note.createdAt > lastUpdate) { | ||
| cachedNotes = [...notesCacheValue.notes, note]; | ||
| } | ||
| }); | ||
| } else { | ||
| cachedNotes = entitiesUpdatedSince.notes; | ||
| } | ||
|
|
||
| cache.writeQuery({ | ||
| query: NOTES_QUERY, | ||
| data: { notes: cachedNotes }, | ||
| }); | ||
| } | ||
|
|
||
| if (entitiesUpdatedSince.tags.length) { | ||
| const tagsCacheValue = cache.readQuery<TagsQuery>({ | ||
| query: TAGS_QUERY, | ||
| }); | ||
|
|
||
| let cachedTags; | ||
|
|
||
| if (lastUpdate) { | ||
| if (!tagsCacheValue) { | ||
| throw Error( | ||
| '[NotesPage: ENTITIES_UPDATED_SINCE_QUERY.onCompleted] Failed to read cache for tags.' | ||
| ); | ||
| } | ||
|
|
||
| entitiesUpdatedSince.notes.forEach((tag) => { | ||
| if (tag.createdAt > lastUpdate) { | ||
| cachedTags = [...tagsCacheValue.tags, tag]; | ||
| } | ||
| }); | ||
| } else { | ||
| cachedTags = entitiesUpdatedSince.tags; | ||
| } | ||
|
|
||
| cache.writeQuery({ | ||
| query: TAGS_QUERY, | ||
| data: { tags: cachedTags }, | ||
| }); | ||
| } | ||
|
|
||
| localStorage.setItem( | ||
| ENTITIES_UPDATED_SINCE_STORAGE_KEY, | ||
| entitiesUpdatedSince.timestamp | ||
| ); | ||
| }, | ||
| }) | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (!isOnline) { | ||
| return; | ||
| } | ||
|
|
||
| fetchEntitiesUpdatedSince({ | ||
| variables: { | ||
| updatedSince: getUpdatedSince(), | ||
| }, | ||
| }); | ||
| }, [fetchEntitiesUpdatedSince, isOnline]); | ||
|
|
||
| useEffect(() => { | ||
| if (entitiesUpdatedSince.state !== DataState.DATA || !isOnline) { | ||
| return; | ||
| } | ||
|
|
||
| const notesRefetchInterval = setInterval(() => { | ||
| entitiesUpdatedSince.refetch({ | ||
| updatedSince: getUpdatedSince(), | ||
| }); | ||
| }, ENTITIES_UPDATED_SINCE_INTERVAL_MS); | ||
|
|
||
| return () => { | ||
| clearInterval(notesRefetchInterval); | ||
| }; | ||
| }, [entitiesUpdatedSince, isOnline]); | ||
|
|
||
| return entitiesUpdatedSince; | ||
| }; | ||
|
|
||
| export default useEntitiesUpdatedSince; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.