ref(storybook) use react query for module loading (#82931)

Use react query for story loading

static/app/views/stories/index.tsx

@@ -46,13 +46,13 @@ export default function Stories({location}: Props) {
             </TreeContainer>
           </Sidebar>
 
-          {story.error ? (
+          {story.isError ? (
             <VerticalScroll style={{gridArea: 'body'}}>
               <ErrorStory error={story.error} />
             </VerticalScroll>
-          ) : story.resolved ? (
+          ) : story.isSuccess ? (
             <Main style={{gridArea: 'body'}}>
-              <StoryFile filename={story.filename} resolved={story.resolved} />
+              <StoryFile filename={story.data.filename} resolved={story.data.resolved} />
             </Main>
           ) : (
             <VerticalScroll style={{gridArea: 'body'}}>

static/app/views/stories/storiesContext.tsx

@@ -1,5 +1,6 @@
 export default function storiesContext() {
   const context = require.context('sentry', true, /\.stories.tsx$/, 'lazy');
+
   return {
     files: () => context.keys().map(file => file.replace(/^\.\//, 'app/')),
     importStory: (filename: string) => context(filename.replace(/^app\//, './')),

static/app/views/stories/useStoriesLoader.tsx

@@ -1,69 +1,28 @@
-import {useCallback, useEffect, useState} from 'react';
-
+import {useQuery} from 'sentry/utils/queryClient';
 import storiesContext from 'sentry/views/stories/storiesContext';
 import type {ResolvedStoryModule} from 'sentry/views/stories/types';
 
-interface Props {
+interface UseStoriesLoaderOptions {
   filename: string;
 }
 
-interface EmptyState {
-  error: undefined;
-  filename: undefined | string;
-  resolved: undefined;
-}
-
-interface ResolvedState {
-  error: undefined;
+interface StoryDescriptor {
   filename: string;
   resolved: ResolvedStoryModule;
 }
 
-interface ErrorState {
-  error: Error;
-  filename: undefined | string;
-  resolved: undefined;
+function importStory(filename: string): Promise<StoryDescriptor> {
+  return storiesContext()
+    .importStory(filename)
+    .then(story => ({
+      filename,
+      resolved: story,
+    }));
 }
 
-type State = EmptyState | ResolvedState | ErrorState;
-
-export default function useStoriesLoader({filename}: Props) {
-  const [mod, setMod] = useState<State>({
-    error: undefined,
-    filename,
-    resolved: undefined,
+export default function useStoriesLoader({filename}: UseStoriesLoaderOptions) {
+  return useQuery({
+    queryKey: [filename],
+    queryFn: () => importStory(filename),
   });
-
-  const asyncImportStory = useCallback(async () => {
-    if (!filename) {
-      return;
-    }
-    try {
-      setMod({
-        error: undefined,
-        filename,
-        resolved: undefined,
-      });
-      const resolved = await storiesContext().importStory(filename);
-      setMod({
-        error: undefined,
-        filename,
-
-        resolved,
-      });
-    } catch (error) {
-      setMod({
-        error,
-        filename,
-
-        resolved: undefined,
-      });
-    }
-  }, [filename]);
-
-  useEffect(() => {
-    asyncImportStory();
-  }, [asyncImportStory]);
-
-  return mod;
 }