1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
import { useEffect, useState } from 'react';
import useSWR from 'swr';
import {
articleBySlugQuery,
fetchAPI,
getArticleFromRawData,
} from '../../services/graphql';
import type { Article, Maybe, RawArticle } from '../../types';
export type UseArticleConfig = {
/**
* A fallback article
*/
fallback?: Article;
/**
* The article slug
*/
slug?: string;
};
/**
* Retrieve an article by slug.
*
* @param {UseArticleConfig} config - The config.
* @returns {Article|undefined} The matching article if it exists.
*/
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>>();
useEffect(() => {
const getArticle = async () => {
if (data) {
setArticle(await getArticleFromRawData(data.post));
} else {
setArticle(fallback);
}
};
getArticle();
}, [data, fallback]);
return article;
};
|
