feat(react): fix apollo client cache issues in entities' profile pages

datahub-project · Jul 7, 2021 · e5a8d3d · e5a8d3d
1 parent 0cbe5a7
commit e5a8d3d
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 9 deletions.
diff --git a/datahub-web-react/src/app/entity/chart/profile/ChartProfile.tsx b/datahub-web-react/src/app/entity/chart/profile/ChartProfile.tsx
@@ -22,7 +22,11 @@ export enum TabType {
 const ENABLED_TAB_TYPES = [TabType.Ownership, TabType.Sources, TabType.Properties, TabType.Dashboards];
 
 export default function ChartProfile({ urn }: { urn: string }) {
-    const { loading, error, data } = useGetChartQuery({ variables: { urn } });
+    const { loading, error, data } = useGetChartQuery({
+        variables: { urn },
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+    });
     const [updateChart] = useUpdateChartMutation({
         update(cache, { data: newChart }) {
             cache.modify({

diff --git a/datahub-web-react/src/app/entity/dashboard/profile/DashboardProfile.tsx b/datahub-web-react/src/app/entity/dashboard/profile/DashboardProfile.tsx
@@ -26,7 +26,11 @@ const ENABLED_TAB_TYPES = [TabType.Ownership, TabType.Charts, TabType.Properties
  * Responsible for reading & writing users.
  */
 export default function DashboardProfile({ urn }: { urn: string }) {
-    const { loading, error, data } = useGetDashboardQuery({ variables: { urn } });
+    const { loading, error, data } = useGetDashboardQuery({
+        variables: { urn },
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+    });
     const [updateDashboard] = useUpdateDashboardMutation({
         update(cache, { data: newDashboard }) {
             cache.modify({

diff --git a/datahub-web-react/src/app/entity/dataFlow/profile/DataFlowProfile.tsx b/datahub-web-react/src/app/entity/dataFlow/profile/DataFlowProfile.tsx
@@ -27,7 +27,11 @@ export const DataFlowProfile = ({ urn }: { urn: string }): JSX.Element => {
         Ownership: 'Ownership',
         Properties: 'Properties',
     };
-    const { loading, error, data } = useGetDataFlowQuery({ variables: { urn } });
+    const { loading, error, data } = useGetDataFlowQuery({
+        variables: { urn },
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+    });
     const [updateDataFlow] = useUpdateDataFlowMutation({
         update(cache, { data: newDataFlow }) {
             cache.modify({

diff --git a/datahub-web-react/src/app/entity/dataJob/profile/DataJobProfile.tsx b/datahub-web-react/src/app/entity/dataJob/profile/DataJobProfile.tsx
@@ -27,7 +27,11 @@ const ENABLED_TAB_TYPES = [TabType.Ownership, TabType.Properties];
  */
 export const DataJobProfile = ({ urn }: { urn: string }): JSX.Element => {
     const entityRegistry = useEntityRegistry();
-    const { loading, error, data } = useGetDataJobQuery({ variables: { urn } });
+    const { loading, error, data } = useGetDataJobQuery({
+        variables: { urn },
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+    });
     const [updateDataJob] = useUpdateDataJobMutation({
         update(cache, { data: newDataJob }) {
             cache.modify({

diff --git a/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryTermProfile.tsx b/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryTermProfile.tsx
@@ -22,7 +22,11 @@ const ENABLED_TAB_TYPES = [TabType.Properties, TabType.RelatedEntity];
 
 export default function GlossaryTermProfile() {
     const { urn } = useUserParams();
-    const { loading, error, data } = useGetGlossaryTermQuery({ variables: { urn } });
+    const { loading, error, data } = useGetGlossaryTermQuery({
+        variables: { urn },
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+    });
 
     const entityRegistry = useEntityRegistry();
     const searchTypes = entityRegistry.getSearchEntityTypes();

diff --git a/datahub-web-react/src/app/entity/tag/TagProfile.tsx b/datahub-web-react/src/app/entity/tag/TagProfile.tsx
@@ -79,7 +79,11 @@ type TagPageParams = {
  */
 export default function TagProfile() {
     const { urn } = useParams<TagPageParams>();
-    const { loading, error, data } = useGetTagQuery({ variables: { urn } });
+    const { loading, error, data } = useGetTagQuery({
+        variables: { urn },
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+    });
     const entityRegistry = useEntityRegistry();
     const history = useHistory();
 

diff --git a/datahub-web-react/src/app/entity/user/UserProfile.tsx b/datahub-web-react/src/app/entity/user/UserProfile.tsx
@@ -22,7 +22,11 @@ const ENABLED_TAB_TYPES = [TabType.Ownership];
  */
 export default function UserProfile() {
     const { urn } = useUserParams();
-    const { loading, error, data } = useGetUserQuery({ variables: { urn } });
+    const { loading, error, data } = useGetUserQuery({
+        variables: { urn },
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+    });
     const username = data?.corpUser?.username;
 
     const ownershipResult = useGetAllEntitySearchResults({

diff --git a/datahub-web-react/src/app/entity/userGroup/UserGroupProfile.tsx b/datahub-web-react/src/app/entity/userGroup/UserGroupProfile.tsx
@@ -19,8 +19,11 @@ const messageStyle = { marginTop: '10%' };
  */
 export default function UserGroupProfile() {
     const { urn } = useUserParams();
-    const { loading, error, data } = useGetUserGroupQuery({ variables: { urn } });
-
+    const { loading, error, data } = useGetUserGroupQuery({
+        variables: { urn },
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+    });
     const name = data?.corpGroup?.name;
 
     const ownershipResult = useGetAllEntitySearchResults({