nextjsでzustandライブラリを使ってfetch APIを叩いてみた～スケルトンローディングを添えて～

こんにちわ。nap5です。

nextjsでzustandライブラリを使ってfetch APIを叩いてみたので、紹介したいと思います。

Twitterにも投稿してみました。

I mocked up this grid layout using useBebopHooks.

useBebopHooks is using zustand library.#react #javascript #zustand #100DaysOfCode

referencehttps://t.co/uLhPadHFcO

demo codehttps://t.co/m5pg2tnZVL

demo sitehttps://t.co/TMLtnULRVC

— nap5 (@napzak5) August 3, 2022

zustandライブラリはこちらです。

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

デモコードです。

sad-taussig-tcjxf5 - CodeSandbox

デモサイトです。

Welcome to cowboy bebop

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を使うときはサイズのカスタマイズハンドリングが若干難しく、以下の記事を参考にしてデモのようなレイアウトを達成しました。

next/image - Make image fill available space without specifying height or width

最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。

また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/

Web標準のJavascript Animation APIを使ったインタラクティブなカウントアップダウンの作り方

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。