refactor(article): wrap useSWR with a custom hook to revalidate article

1 files changed, 24 insertions, 0 deletions

diff --git a/src/utils/hooks/use-article.tsx b/src/utils/hooks/use-article.tsx
new file mode 100644
index 0000000..3a173dd
--- /dev/null
+++ b/src/utils/hooks/use-article.tsx
@@ -0,0 +1,24 @@
+import { fetchAPI, getAPIUrl } from '@services/graphql/api';
+import { getArticleFromRawData } from '@services/graphql/articles';
+import { articleBySlugQuery } from '@services/graphql/articles.query';
+import { Article } from '@ts/types/app';
+import { RawArticle } from '@ts/types/raw-data';
+import useSWR from 'swr';
+
+/**
+ * Retrieve an article by slug.
+ *
+ * @param {string} slug - The article slug.
+ * @param {Article} fallback - A fallback article.
+ * @returns {Article} The matching article.
+ */
+const useArticle = (slug: string, fallback: Article): Article => {
+  const { data } = useSWR(
+    { api: getAPIUrl(), query: articleBySlugQuery, variables: { slug } },
+    fetchAPI<RawArticle, typeof articleBySlugQuery>
+  );
+
+  return data ? getArticleFromRawData(data.post) : fallback;
+};
+
+export default useArticle;