![見出し画像](https://assets.st-note.com/production/uploads/images/83947831/rectangle_large_type_2_2d02b74ecfd9f433ac1d1b3155b15ef9.png?width=1200)
nextjsでzustandライブラリを使ってfetch APIを叩いてみた~スケルトンローディングを添えて~
こんにちわ。nap5です。
nextjsでzustandライブラリを使ってfetch APIを叩いてみたので、紹介したいと思います。
Twitterにも投稿してみました。
I mocked up this grid layout using useBebopHooks.
— nap5 (@napzak5) August 3, 2022
useBebopHooks is using zustand library.#react #javascript #zustand #100DaysOfCode
referencehttps://t.co/uLhPadHFcO
demo codehttps://t.co/m5pg2tnZVL
demo sitehttps://t.co/TMLtnULRVC
zustandライブラリはこちらです。
デモコードです。
デモサイトです。
zustandでは以下のようにfetch APIをフック化して使うことができるようになります。
import create from 'zustand';
const useBebop = create((set) => {
return {
data: null,
setData: async ({message}) => {
console.log(`message`, message);
const response = await fetch('/api/hello');
const {data} = await response.json();
set((state) => {
state.data = data;
});
},
};
});
export default useBebop;
呼び出し側では以下のように使います。
const Home = ({pageName, notifier}) => {
const {data, setData} = useBebop((state) => {
return {
setData: state.setData,
data: state.data,
};
});
return (
<Layout pageName={pageName} notifier={notifier}>
<section
className={css`
max-width: 1200px;
margin: auto;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
`}
>
<h2>HomePage</h2>
<Button
colorScheme={'blue'}
onClick={(e) => {
if (data === null) {
setData({message: 'bebop'});
} else {
console.log(`used cache`);
}
}}
>
Fetch
</Button>
<Grid gutter={`1rem`} data={data} />
<p>something...</p>
<p>something...</p>
<p>something...</p>
</section>
</Layout>
);
};
export default Home;
nextjsでImageを使うときはサイズのカスタマイズハンドリングが若干難しく、以下の記事を参考にしてデモのようなレイアウトを達成しました。
最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。
また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。
最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。
https://www.udemy.com/course/count-down-up-using-javascript-animation-api/
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか?