use Utility API

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

plugins/search/src/apis.ts

@@ -14,12 +14,18 @@
  * limitations under the License.
  */
 
+import { createApiRef, DiscoveryApi } from '@backstage/core';
 import { Entity, ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
-import { DiscoveryApi } from '@backstage/core';
+
 import { CatalogApi } from '@backstage/plugin-catalog-react';
 import { SearchQuery, SearchResultSet } from '@backstage/plugin-search-backend';
 import qs from 'qs';
 
+export const searchApiRef = createApiRef<SearchApi>({
+  id: 'plugin.search.queryservice',
+  description: 'Used to make requests against the search API',
+});
+
 export type Result = {
   name: string;
   description: string | undefined;
@@ -31,7 +37,7 @@ export type Result = {
 
 export type SearchResults = Array<Result>;
 
-class SearchApi {
+export class SearchApi {
   private catalogApi: CatalogApi;
   private discoveryApi: DiscoveryApi;
 
@@ -74,5 +80,3 @@ class SearchApi {
     return response.json();
   }
 }
-
-export default SearchApi;

plugins/search/src/components/SearchResult/SearchResult.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import {
-  discoveryApiRef,
   EmptyState,
   Link,
   Progress,
@@ -22,12 +21,12 @@ import {
   TableColumn,
   useApi,
 } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Divider, Grid, makeStyles, Typography } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React, { useEffect, useState } from 'react';
 import { useAsync } from 'react-use';
-import SearchApi, { Result, SearchResults } from '../../apis';
+import { Result, SearchResults, searchApiRef } from '../../apis';
+
 import { Filters, FiltersButton, FiltersState } from '../Filters';
 
 const useStyles = makeStyles(theme => ({
@@ -117,8 +116,7 @@ const TableHeader = ({
 };
 
 export const SearchResult = ({ searchQuery }: SearchResultProps) => {
-  const catalogApi = useApi(catalogApiRef);
-  const discoveryApi = useApi(discoveryApiRef);
+  const searchApi = useApi(searchApiRef);
 
   const [showFilters, toggleFilters] = useState(false);
   const [selectedFilters, setSelectedFilters] = useState<FiltersState>({
@@ -128,8 +126,6 @@ export const SearchResult = ({ searchQuery }: SearchResultProps) => {
 
   const [filteredResults, setFilteredResults] = useState<SearchResults>([]);
 
-  const searchApi = new SearchApi(catalogApi, discoveryApi);
-
   const { loading, error, value: results } = useAsync(() => {
     return searchApi.getSearchResult();
   }, []);

plugins/search/src/index.ts

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+// TODO: export searchApiRef from ./apis once interface is stable and settled.
 export { searchPlugin, searchPlugin as plugin, SearchPage } from './plugin';
 export {
   Filters,

plugins/search/src/plugin.ts

@@ -14,10 +14,14 @@
  * limitations under the License.
  */
 import {
+  createApiFactory,
   createPlugin,
   createRouteRef,
   createRoutableExtension,
+  discoveryApiRef,
 } from '@backstage/core';
+import { SearchApi, searchApiRef } from './apis';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { SearchPage as SearchPageComponent } from './components/SearchPage';
 
 export const rootRouteRef = createRouteRef({
@@ -27,6 +31,15 @@ export const rootRouteRef = createRouteRef({
 
 export const searchPlugin = createPlugin({
   id: 'search',
+  apis: [
+    createApiFactory({
+      api: searchApiRef,
+      deps: { catalogApi: catalogApiRef, discoveryApi: discoveryApiRef },
+      factory: ({ catalogApi, discoveryApi }) => {
+        return new SearchApi(catalogApi, discoveryApi);
+      },
+    }),
+  ],
   register({ router }) {
     router.addRoute(rootRouteRef, SearchPageComponent);
   },