From 9552ad09191d32594257458b3f4a09cc47a5ee4c Mon Sep 17 00:00:00 2001
From: Matej Kubinec <32638572+matejkubinec@users.noreply.github.com>
Date: Wed, 16 Aug 2023 09:48:04 +0200
Subject: [PATCH] PMM-12344 Clear state before querying details (#1532)

---
 .../panel/components/Details/Details.hooks.ts  | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/pmm-app/src/pmm-qan/panel/components/Details/Details.hooks.ts b/pmm-app/src/pmm-qan/panel/components/Details/Details.hooks.ts
index 2805c31739..9ec71629ff 100644
--- a/pmm-app/src/pmm-qan/panel/components/Details/Details.hooks.ts
+++ b/pmm-app/src/pmm-qan/panel/components/Details/Details.hooks.ts
@@ -1,23 +1,31 @@
 import { useContext, useEffect, useState } from 'react';
 import { QueryAnalyticsProvider } from 'pmm-qan/panel/provider/provider';
-import { Databases } from 'shared/core';
 import DetailsService from './Details.service';
 import { DatabasesType, QueryExampleResponseItem } from './Details.types';
 
 export const useDetails = (): [boolean, QueryExampleResponseItem[], DatabasesType] => {
   const {
     panelState: {
-      queryId, groupBy, from, to, labels,
+      queryId,
+      groupBy,
+      from,
+      to,
+      labels,
     },
   } = useContext(QueryAnalyticsProvider);
   const [loading, setLoading] = useState<boolean>(false);
   const [examples, setExamples] = useState<QueryExampleResponseItem[]>([]);
-  const [databaseType, setDatabaseType] = useState<DatabasesType>(Databases.mysql);
+  const [databaseType, setDatabaseType] = useState<DatabasesType>();
 
   useEffect(() => {
     (async () => {
       try {
         setLoading(true);
+        // clear state so we don't get
+        // invalid data in between query changes
+        setExamples([]);
+        setDatabaseType(undefined);
+
         const result = await DetailsService.getExample({
           filterBy: queryId,
           groupBy,
@@ -29,8 +37,10 @@ export const useDetails = (): [boolean, QueryExampleResponseItem[], DatabasesTyp
         const examples = result.query_examples;
         const databaseType = result.query_examples[0].service_type;
 
-        setExamples(examples);
+        // clear database type first
+        // won't be an issue once we upgrade to React 18 (batched updates)
         setDatabaseType(databaseType);
+        setExamples(examples);
       } catch (e) {
         console.error(e);
       } finally {