Move QueryClientProvider to top component

Author: reakaleek

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchQuery.ts

@@ -24,6 +24,10 @@ export const useSearchQuery = () => {
     return useQuery<SearchResponse>({
         queryKey: ['search', { searchTerm: debouncedSearchTerm }],
         queryFn: async () => {
+            if (!debouncedSearchTerm || debouncedSearchTerm.length < 1) {
+                return SearchResponse.parse({ results: [], totalResults: 0 })
+            }
+
             const response = await fetch(
                 '/docs/_api/v1/search?q=' +
                     encodeURIComponent(debouncedSearchTerm)

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAi.tsx

@@ -1,12 +1,16 @@
 import { SearchOrAskAiButton } from './SearchOrAskAiButton'
 import r2wc from '@r2wc/react-to-web-component'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import * as React from 'react'
 import { StrictMode } from 'react'
 
 const SearchOrAskAi = () => {
+    const queryClient = new QueryClient()
     return (
         <StrictMode>
-            <SearchOrAskAiButton />
+            <QueryClientProvider client={queryClient}>
+                <SearchOrAskAiButton />
+            </QueryClientProvider>
         </StrictMode>
     )
 }

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx

@@ -10,18 +10,15 @@ import {
     EuiHorizontalRule,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import * as React from 'react'
 
 export const SearchOrAskAiModal = () => {
     const searchTerm = useSearchTerm()
     const askAiTerm = useAskAiTerm()
     const { setSearchTerm, submitAskAiTerm } = useSearchActions()
 
-    const queryClient = new QueryClient()
-
     return (
-        <QueryClientProvider client={queryClient}>
+        <>
             <EuiFieldSearch
                 fullWidth
                 placeholder="Search the docs or ask Elastic Docs AI Assistant"
@@ -59,6 +56,6 @@ export const SearchOrAskAiModal = () => {
                     This feature is in beta. Got feedback? We'd love to hear it!
                 </EuiText>
             </div>
-        </QueryClientProvider>
+        </>
     )
 }