refactor(app): code refactor

Author: sectsect

apps/solidjs-boilerplate/src/components/modules/PostContent/PostContent.tsx

@@ -1,35 +1,25 @@
 /* eslint-disable no-nested-ternary */
 import type { Component } from 'solid-js';
-import { Switch, Match } from 'solid-js';
+import { createEffect, ErrorBoundary, Suspense } from 'solid-js';
 
 import { useParams } from '@solidjs/router';
-import { createQuery } from '@tanstack/solid-query';
 import toast from 'solid-toast';
 
 import Head from '@/components/modules/Head/Head';
-import type { Post } from '@/types/api/post.interface';
-
-const apiEndpointUrl = import.meta.env.VITE_PUBLIC_API_URL;
-
-const fetchData = async (id: string): Promise<Post> =>
-  (await fetch(`${apiEndpointUrl}/posts/${id}`)).json();
+import useFetchPost from '@/hooks/useFetchPost';
 
 const PostContent: Component = () => {
   const params = useParams();
   const { id } = params;
 
   // w/ createQuery() on '@tanstack/solid-query'
-  const query = createQuery(() => ({
-    // Array Keys with variables
-    // @ https://tanstack.com/query/v4/docs/react/guides/query-keys?from=reactQueryV3&original=https%3A%2F%2Freact-query-v3.tanstack.com%2Fguides%2Fquery-keys#array-keys-with-variables
-    queryKey: [`/posts/`, id],
-    // Pass parameter w/ inline anonymous functions. @ https://stackoverflow.com/a/68111112/4542456
-    queryFn: () => fetchData(id),
-  }));
+  const query = useFetchPost(id);
 
-  if (query.isError) {
-    toast.error('Failed to fetch data.');
-  }
+  createEffect(() => {
+    if (query.isError) {
+      toast.error('Failed to fetch data.');
+    }
+  });
 
   // w/ createResource()
   // const [post] = createResource<Post, string>(id, fetchData);
@@ -46,20 +36,14 @@ const PostContent: Component = () => {
 
       <section>
         <div class="inner">
-          <Switch>
-            <Match when={query.isLoading}>
-              <div>Loading...</div>
-            </Match>
-            <Match when={query.isError}>
-              <div>Error: {(query.error as Error).message}</div>
-            </Match>
-            <Match when={query.isSuccess}>
-              <>
-                <h1 class="mb-5 text-4xl leading-none">{query.data?.title}</h1>
-                <p class="whitespace-pre-wrap">{query.data?.body}</p>
-              </>
-            </Match>
-          </Switch>
+          <ErrorBoundary
+            fallback={<div>Error: {(query.error as Error).message}</div>}
+          >
+            <Suspense fallback={<div>Loading...</div>}>
+              <h1 class="mb-5 text-4xl leading-none">{query.data?.title}</h1>
+              <p class="whitespace-pre-wrap">{query.data?.body}</p>
+            </Suspense>
+          </ErrorBoundary>
         </div>
       </section>
 

apps/solidjs-boilerplate/src/hooks/useFetchPost.tsx

@@ -0,0 +1,38 @@
+import type { CreateQueryResult } from '@tanstack/solid-query';
+import { createQuery } from '@tanstack/solid-query';
+
+import type { Post } from '@/types/api/post.interface';
+
+// import type { Post } from '@/types/api/post.interface';
+
+const apiEndpointUrl = import.meta.env.VITE_PUBLIC_API_URL;
+
+// const fetchData = async (id: string): Promise<Post> =>
+//   (await fetch(`${apiEndpointUrl}/posts/${id}`)).json();
+
+const useFetchPost = (id: string) => {
+  // const query = createQuery(() => ({
+  //   queryKey: ['/posts'],
+  //   queryFn: fetchData,
+  // }));
+
+  const query: CreateQueryResult<Post, Error> = createQuery(() => ({
+    // Array Keys with variables
+    // @ https://tanstack.com/query/v4/docs/react/guides/query-keys?from=reactQueryV3&original=https%3A%2F%2Freact-query-v3.tanstack.com%2Fguides%2Fquery-keys#array-keys-with-variables
+    queryKey: [`/posts/`, id],
+    // Pass parameter w/ inline anonymous functions. @ https://stackoverflow.com/a/68111112/4542456
+    // queryFn: () => fetchData(id),
+    queryFn: async () => {
+      const result = await fetch(`${apiEndpointUrl}/posts/${id}`);
+      if (!result.ok) throw new Error('Failed to fetch data');
+      return result.json();
+    },
+
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    throwOnError: true, // Throw an error if the query fails
+  }));
+
+  return query;
+};
+
+export default useFetchPost;