Create get request in SearchResultMenuItem

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -4,8 +4,6 @@ import React, {
 
 import { Modal, ModalBody } from 'reactstrap';
 
-import { useSWRxSearch } from '~/stores/search';
-
 import { useSearchModal } from '../stores/search';
 
 import { SearchForm } from './SearchForm';
@@ -16,7 +14,6 @@ const SearchModal = (): JSX.Element => {
   const [searchKeyword, setSearchKeyword] = useState('');
 
   const { data: searchModalData, close: closeSearchModal } = useSearchModal();
-  const { data: searchResult } = useSWRxSearch(searchKeyword, null, { limit: 10 });
 
   const changeSearchTextHandler = useCallback((searchText: string) => {
     setSearchKeyword(searchText);
@@ -41,7 +38,7 @@ const SearchModal = (): JSX.Element => {
           onClickClearButton={clickClearButtonHandler}
         />
         <div className="border-top mt-4 mb-3" />
-        <SearchResultMenuItem searchResult={searchResult} />
+        <SearchResultMenuItem searchKeyword={searchKeyword} />
         <SearchHelp />
       </ModalBody>
     </Modal>

apps/app/src/features/search/client/components/SearchResultMenuItem.tsx

@@ -2,14 +2,16 @@ import React from 'react';
 
 import { PagePathLabel, UserPicture } from '@growi/ui/dist/components';
 
-import type { IFormattedSearchResult } from '~/interfaces/search';
+import { useSWRxSearch } from '~/stores/search';
 
 
 type Props = {
-  searchResult?: IFormattedSearchResult
+  searchKeyword: string,
 }
 export const SearchResultMenuItem = (props: Props): JSX.Element => {
-  const { searchResult } = props;
+  const { searchKeyword } = props;
+
+  const { data: searchResult } = useSWRxSearch(searchKeyword, null, { limit: 10 });
 
   if (searchResult == null || searchResult.data.length === 0) {
     return <></>;