fix(persons): bypass cache on the persons page (#22503)

PostHog · May 24, 2024 · bbd95a0 · bbd95a0
1 parent 08e0480
commit bbd95a0
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 7 deletions.
diff --git a/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts b/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts
@@ -61,6 +61,8 @@ export interface DataNodeLogicProps {
     cachedResults?: AnyResponseType
     /** Disabled data fetching and only allow cached results. */
     doNotLoad?: boolean
+    /** Queries always get refreshed. */
+    alwaysRefresh?: boolean
     /** Callback when data is successfully loader or provided from cache. */
     onData?: (data: Record<string, unknown> | null | undefined) => void
     /** Load priority. Higher priority (smaller number) queries will be loaded first. */
@@ -160,7 +162,8 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
             {
                 setResponse: (response) => response,
                 clearResponse: () => null,
-                loadData: async ({ refresh, queryId }, breakpoint) => {
+                loadData: async ({ refresh: refreshArg, queryId }, breakpoint) => {
+                    const refresh = props.alwaysRefresh || refreshArg
                     if (props.doNotLoad) {
                         return props.cachedResults
                     }
@@ -245,7 +248,12 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
                     }
                     if (isEventsQuery(props.query) && values.newQuery) {
                         const now = performance.now()
-                        const newResponse = (await query(addModifiers(values.newQuery, props.modifiers))) ?? null
+                        const newResponse =
+                            (await query(
+                                addModifiers(values.newQuery, props.modifiers),
+                                undefined,
+                                props.alwaysRefresh
+                            )) ?? null
                         actions.setElapsedTime(performance.now() - now)
                         if (newResponse?.results) {
                             actions.highlightRows(newResponse?.results)
@@ -269,7 +277,12 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
                     // TODO: unify when we use the same backend endpoint for both
                     const now = performance.now()
                     if (isEventsQuery(props.query) || isActorsQuery(props.query)) {
-                        const newResponse = (await query(addModifiers(values.nextQuery, props.modifiers))) ?? null
+                        const newResponse =
+                            (await query(
+                                addModifiers(values.nextQuery, props.modifiers),
+                                undefined,
+                                props.alwaysRefresh
+                            )) ?? null
                         actions.setElapsedTime(performance.now() - now)
                         const queryResponse = values.response as EventsQueryResponse | ActorsQueryResponse
                         return {
@@ -278,7 +291,12 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
                             hasMore: newResponse?.hasMore,
                         }
                     } else if (isPersonsNode(props.query)) {
-                        const newResponse = (await query(addModifiers(values.nextQuery, props.modifiers))) ?? null
+                        const newResponse =
+                            (await query(
+                                addModifiers(values.nextQuery, props.modifiers),
+                                undefined,
+                                props.alwaysRefresh
+                            )) ?? null
                         actions.setElapsedTime(performance.now() - now)
                         if (Array.isArray(values.response)) {
                             // help typescript by asserting we can't have an array here

diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx
@@ -100,6 +100,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
         key: vizKey,
         cachedResults: cachedResults,
         dataNodeCollectionId: context?.insightProps?.dataNodeCollectionId || dataKey,
+        alwaysRefresh: context?.alwaysRefresh,
     }
     const builtDataNodeLogic = dataNodeLogic(dataNodeLogicProps)
 

diff --git a/frontend/src/queries/types.ts b/frontend/src/queries/types.ts
@@ -18,6 +18,8 @@ export interface QueryContext {
     rowProps?: (record: unknown) => Omit<HTMLProps<HTMLTableRowElement>, 'key'>
     /** chart-specific rendering context **/
     chartRenderingMetadata?: ChartRenderingMetadata
+    /** Wether queries should always be refreshed. */
+    alwaysRefresh?: boolean
 }
 
 /** Pass custom rendering metadata to specific kinds of charts **/

diff --git a/frontend/src/scenes/cohorts/CohortEdit.tsx b/frontend/src/scenes/cohorts/CohortEdit.tsx
@@ -297,7 +297,7 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
                                     minutes.
                                 </div>
                             ) : (
-                                <Query query={query} setQuery={setQuery} />
+                                <Query query={query} setQuery={setQuery} context={{ alwaysRefresh: true }} />
                             )}
                         </div>
                     </>

diff --git a/frontend/src/scenes/groups/Group.tsx b/frontend/src/scenes/groups/Group.tsx
@@ -117,7 +117,11 @@ export function Group(): JSX.Element {
                         key: PersonsTabType.EVENTS,
                         label: <span data-attr="groups-events-tab">Events</span>,
                         content: groupEventsQuery ? (
-                            <Query query={groupEventsQuery} setQuery={setGroupEventsQuery} />
+                            <Query
+                                query={groupEventsQuery}
+                                setQuery={setGroupEventsQuery}
+                                context={{ alwaysRefresh: true }}
+                            />
                         ) : (
                             <Spinner />
                         ),

diff --git a/frontend/src/scenes/persons-management/tabs/Persons.tsx b/frontend/src/scenes/persons-management/tabs/Persons.tsx
@@ -9,7 +9,7 @@ export function Persons(): JSX.Element {
 
     return (
         <>
-            <Query query={query} setQuery={setQuery} />
+            <Query query={query} setQuery={setQuery} context={{ alwaysRefresh: true }} />
         </>
     )
 }
-Original file line number
+Diff line change
@@ Expand Up @@
                                         minutes.
                                     </div>
                                 ) : (
-                                    <Query query={query} setQuery={setQuery} />
+                                    <Query query={query} setQuery={setQuery} context={{ alwaysRefresh: true }} />
                                 )}
                             </div>
                         </>
@@ Expand Down @@