feat(rtk-query): add fallback message if there are no rtk-query apis

.prettierignore

@@ -10,3 +10,4 @@ __snapshots__
 dev
 .yarn/*
 **/.yarn/*
+demo/public/**

packages/redux-devtools-rtk-query-monitor/src/RtkQueryInspector.tsx

@@ -124,7 +124,7 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends Component<
       this.selectors.selectAllVisbileQueries(selectorsSource);
 
     const currentQueryInfo =
-      this.selectors.selectorCurrentQueryInfo(selectorsSource);
+      this.selectors.selectCurrentQueryInfo(selectorsSource);
 
     const currentRtkApi = getApiStateOf(currentQueryInfo, apiStates);
     const currentQuerySubscriptions = getQuerySubscriptionsOf(
@@ -137,6 +137,8 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends Component<
     const currentApiStats =
       this.selectors.selectApiStatsOfCurrentQuery(selectorsSource);
 
+    const hasNoApis = apiStates == null;
+
     return (
       <div
         ref={this.inspectorRef}
@@ -167,6 +169,7 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends Component<
           apiState={currentRtkApi}
           isWideLayout={isWideLayout}
           apiStats={currentApiStats}
+          hasNoApis={hasNoApis}
         />
       </div>
     );

packages/redux-devtools-rtk-query-monitor/src/components/NoRtkQueryApi.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ReactNode } from 'react';
+import { StyleUtilsContext } from '../styles/createStylingFromTheme';
+
+export function NoRtkQueryApi(): ReactNode {
+  return (
+    <StyleUtilsContext.Consumer>
+      {({ styling }) => (
+        <div {...styling('noApiFound')}>
+          No rtk-query api found.<br/>Make sure to follow{' '}
+          <a
+            href="https://redux-toolkit.js.org/rtk-query/overview#basic-usage"
+            target="_blank"
+            rel="noreferrer"
+          >
+            the instructions
+          </a>
+          .
+        </div>
+      )}
+    </StyleUtilsContext.Consumer>
+  );
+}

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreview.tsx

@@ -11,10 +11,12 @@ import { QueryPreviewInfo } from './QueryPreviewInfo';
 import { QueryPreviewApi } from './QueryPreviewApi';
 import { QueryPreviewSubscriptions } from './QueryPreviewSubscriptions';
 import { QueryPreviewTags } from './QueryPreviewTags';
+import { NoRtkQueryApi } from './NoRtkQueryApi';
 
 export interface QueryPreviewProps
   extends Omit<QueryPreviewTabProps, 'base16Theme' | 'invertTheme'> {
   selectedTab: QueryPreviewTabs;
+  hasNoApis: boolean;
   onTabChange: (tab: QueryPreviewTabs) => void;
 }
 
@@ -95,6 +97,7 @@ export class QueryPreview extends React.PureComponent<QueryPreviewProps> {
       querySubscriptions,
       tags,
       apiStats,
+      hasNoApis,
     } = this.props;
 
     const { component: TabComponent } =
@@ -111,6 +114,7 @@ export class QueryPreview extends React.PureComponent<QueryPreviewProps> {
                 tabs={tabs}
                 renderTabLabel={this.renderTabLabel}
               />
+              {hasNoApis && <NoRtkQueryApi />}
             </div>
           )}
         </StyleUtilsContext.Consumer>

packages/redux-devtools-rtk-query-monitor/src/selectors.ts

@@ -48,7 +48,7 @@ export interface InspectorSelectors<S> {
     ReturnType<typeof extractAllApiQueries>
   >;
   readonly selectAllVisbileQueries: InspectorSelector<S, QueryInfo[]>;
-  readonly selectorCurrentQueryInfo: InspectorSelector<S, QueryInfo | null>;
+  readonly selectCurrentQueryInfo: InspectorSelector<S, QueryInfo | null>;
   readonly selectSearchQueryRegex: InspectorSelector<S, RegExp | null>;
   readonly selectCurrentQueryTags: InspectorSelector<S, RtkQueryTag[]>;
   readonly selectApiStatsOfCurrentQuery: InspectorSelector<S, ApiStats | null>;
@@ -112,7 +112,7 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
     }
   );
 
-  const selectorCurrentQueryInfo = createSelector(
+  const selectCurrentQueryInfo = createSelector(
     selectAllQueries,
     ({ monitorState }: SelectorsSource<S>) => monitorState.selectedQueryKey,
     (allQueries, selectedQueryKey) => {
@@ -133,13 +133,13 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
 
   const selectCurrentQueryTags = createSelector(
     selectApiStates,
-    selectorCurrentQueryInfo,
+    selectCurrentQueryInfo,
     (apiState, currentQueryInfo) => getQueryTagsOf(currentQueryInfo, apiState)
   );
 
   const selectApiStatsOfCurrentQuery = createSelector(
     selectApiStates,
-    selectorCurrentQueryInfo,
+    selectCurrentQueryInfo,
     (apiState, currentQueryInfo) =>
       generateApiStatsOfCurrentQuery(currentQueryInfo, apiState)
   );
@@ -150,7 +150,7 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
     selectAllQueries,
     selectAllVisbileQueries,
     selectSearchQueryRegex,
-    selectorCurrentQueryInfo,
+    selectCurrentQueryInfo,
     selectCurrentQueryTags,
     selectApiStatsOfCurrentQuery,
   };

packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts

@@ -289,6 +289,16 @@ const getSheetFromColorMap = (map: ColorMap) => {
       },
     },
 
+    noApiFound: {
+      width: '100%',
+      textAlign: 'center',
+      padding: '1.4em',
+      '& a': {
+        fontSize: 'inherit',
+        textDecoration: 'underline',
+      },
+    },
+
     searchSelectLabel: {
       display: 'inline-block',
       padding: 4,

packages/redux-devtools-rtk-query-monitor/src/utils/rtk-query.ts

@@ -41,6 +41,15 @@ export function isApiSlice(val: unknown): val is RtkQueryApiState {
   return true;
 }
 
+/**
+ * Indexes api states by their `reducerPath`.
+ *
+ * Returns `null` if there are no api slice or `reduxStoreState`
+ * is not an object.
+ *
+ * @param reduxStoreState
+ * @returns
+ */
 export function getApiStatesOf(
   reduxStoreState: unknown
 ): null | Readonly<Record<string, RtkQueryApiState>> {