元のコード

• apiPostForm や apiGet が直接書かれている。
• apiv3 化するのと、SWR についても考える

  /**
   * the upload event handler
   * @param {any} file
   */
  const uploadHandler = useCallback(async(file) => {
    try {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      let res: any = await apiGet('/attachments.limit', {
        fileSize: file.size,
      });

      if (!res.isUploadable) {
        throw new Error(res.errorMessage);
      }

      const formData = new FormData();
 ...

      res = await apiPostForm('/attachments.add', formData);
      const attachment = res.attachment;
      const fileName = attachment.originalName;
...
  }, [codeMirrorEditor, currentPagePath, mutateCurrentPage, mutateCurrentPageId, mutateIsLatestRevision, pageId]);

手順

• 調査

  • apiv1 と apiv3 の違い
  • api とその実装
  • SWR とどんな関係がある、ない、

• 実装

  • apiv3 化
  • できるなら SWR 化

メモ

• axios

What is Axios?
Axios is a promise-based HTTP Client for node.js and the browser.
It is isomorphic (= it can run in the browser and nodejs with the same codebase). 
On the server-side it uses the native node.js http module,
while on the client (browser) it uses XMLHttpRequests

• await と async
  • https://qiita.com/roaris/items/2ead578cc22108cea80c external_link
  • Promise : 非同期処理の状態を持つオブジェクト。.then メソッドを続けることで、非同期処理が完了したときの処理を書くことができる
  • async と await : async 関数の中では、await <Promiseオブジェクト>とすることで、非同期処理を順番に実行できる。同期処理のようにかける。
• SWR
  • https://zenn.dev/yukikoma/articles/17adad7fedd5af#useswr%E3%81%A8%E3%81%AF%E4%BD%95%E8%80%85%E3%81%AA%E3%81%AE%E3%81%8B%E3%80%82%E6%A6%82%E8%A6%81 external_link
  • やはり使用感的には API を使用する場面、キャッシュや状態管理を任せられそうなので SWR 化を視野に入れる。