refactor(services, types): reorganize GraphQL fetchers and data types

The Typescript mapped types was useful for autocompletion in fetchers
but their are harder to maintain. I think it's better to keep each
query close to its fetcher to have a better understanding of the
fetched data. So I:
* colocate queries with their own fetcher
* colocate mutations with their own mutator
* remove Typescript mapped types for queries and mutations
* move data convertors inside graphql services
* rename most of data types and fetchers

1 files changed, 6 insertions, 22 deletions

diff --git a/src/utils/hooks/use-article.ts b/src/utils/hooks/use-article.ts
index f339f7f..5e54ee4 100644
--- a/src/utils/hooks/use-article.ts
+++ b/src/utils/hooks/use-article.ts
@@ -1,11 +1,7 @@
 import { useEffect, useState } from 'react';
 import useSWR from 'swr';
-import {
-  articleBySlugQuery,
-  fetchAPI,
-  getArticleFromRawData,
-} from '../../services/graphql';
-import type { Article, Maybe, RawArticle } from '../../types';
+import { convertPostToArticle, fetchPost } from '../../services/graphql';
+import type { Article, Maybe } from '../../types';
 
 export type UseArticleConfig = {
   /**
@@ -28,24 +24,12 @@ export const useArticle = ({
   slug,
   fallback,
 }: UseArticleConfig): Article | undefined => {
-  const { data } = useSWR(
-    slug ? { query: articleBySlugQuery, variables: { slug } } : null,
-    fetchAPI<RawArticle, typeof articleBySlugQuery>,
-    {}
-  );
-  const [article, setArticle] = useState<Maybe<Article>>();
+  const { data } = useSWR(slug, fetchPost, {});
+  const [article, setArticle] = useState<Maybe<Article>>(fallback);
 
   useEffect(() => {
-    const getArticle = async () => {
-      if (data) {
-        setArticle(await getArticleFromRawData(data.post));
-      } else {
-        setArticle(fallback);
-      }
-    };
-
-    getArticle();
-  }, [data, fallback]);
+    if (data) convertPostToArticle(data).then((post) => setArticle(post));
+  }, [data]);
 
   return article;
 };