• 「選択」ボタンを押すと記事アイテムが選択可能になる、選択すると背景色が変わる
  • デザインを変えなくていいというメリットがある
  • 個別記事へのリンクをDisableする必要はある
• どのアイテムが選択されているかはPostListコンポーネントが保持する
  • react-hook-formのuseWatch？ でもヘッダーと違ってこれはformじゃないんだから素のuseStateで保持する
  • 複数削除・複数表示、等々のイベントハンドラを受け取って、自分が持っているuuidリストを注入してSubmitする
• 選択モードボタンと全選択ボタンをどこに設置するか
  • いずれフッターメニューを作るのでそこに

あとでやる

• 全選択ボタン：フッターメニュー作ったら
• 複数選択してプレビュー表示：「プレビュー表示の仕組みを作る」issueでやる

• Layoutはグローバルステートプロバイダーではありません。このニーズのために、すでに知られている技術、例えばcontextを使用することを検討してください。
  • javascript - How to pass props to layout.js from page.js in the app directory of Next.js? - Stack Overflow
• レイアウトはデータを取得できます。詳細については、データ取得のセクションを参照してください。ルーティング: ページとレイアウト | Next.js
  • 親レイアウトとその子の間でデータを渡すことはできません。ただし、ルートで同じデータを複数回取得することができ、Reactはパフォーマンスに影響を与えることなく自動的に要求を重複排除します。
• Supabase認証ヘルパー（auth-helpers）など、Supabaseについて試行錯誤した結果、現時点で知っていることまとめ
• nextjs-supabase-auth-tutorial/app/page.tsx at master · haruyasu/nextjs-supabase-auth-tutorial · GitHub
• Supabase Auth with the Next.js App Router | Supabase Docs
  • createServerComponentClient なるものがある！ なのでNext13.4にアップデートしたら着手する

import { cookies } from 'next/headers'
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'

export default async function Home() {
  const supabase = createServerComponentClient({ cookies })
  const { data } = await supabase.from('todos').select()
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

設計

• ひとまず[uuid]ページから作ろうかな。getEntryとtagListの二つで足りるから。searchEntriesは少し複雑そうなので後回しにする
  • まずはgraphql-playgroundからリゾルバーを切り離してdomainに置こう
• もしかしてApollo Serverをローカルホストで立ち上げておいてからフロント側のcodegenをすればスキーマファイルをクラサバ共有しなくてもいけるか？
  • もしそれならgraphql-composeも使えるぞ
  • いずれにせよcodegenはフロント側は必須で、API側はもしかすると省略できるかも
• リゾルバーは/domainに置いていいかな
• Playground用に全てのエンドポイントを集約したリゾルバーリストを作っておいて、それを/pages/api以下で個々バラして使うのか。まずはリゾルバーリストを作るか
• graphql-composeは使えない
  • クラサバ同型でschema.graphqlファイルを読み取ってcodegenする必要があるため、スキーマをtsファイルで持つことができない
  • ベーシックに.graphqlファイルのテキストベースで実装してみる

参考

• piglovesyou/graphql-let: A webpack loader / babel-plugin / babel-plugin-macros / CLI / generated file manager of GraphQL code generator.
• Mutation 後のキャッシュ更新処理についての設計指針(GraphQL, Apollo) - tomoima525's blog
  • refetchしないでキャッシュを上書きしてしまう
• GraphQL API設計で気をつけること | wawoon
• API Reference: Landing page plugins - Apollo GraphQL Docs
  • Playgroundをオフラインで立ち上げる
• GraphQL Code Generator + React Queryの紹介 | HiCustomer Lab - HiCustomer Developer's Blog
• Apollo なら爆速で GraphQL サーバーと GraphQL クライアントアプリが作れる - Qiita
• Quick Start Guide · graphql-compose
• Next.js で始める GraphQL - 30歳からのプログラミング
• kyonenya/graphql-next-playground

メモ

• リゾルバーの型定義はこれ
  • import { GraphQLFieldResolver } from 'graphql';
• リゾルバーの第一引数：ネストされたクエリの親がなんとか
  • HOW TO GRAPHQLでGraphQLの勉強をはじめました その④ | ヨシダレッド
  • Resolvers - Apollo GraphQL Docs

1000件程度一気に記事をインポートしようとするとvercelのAPI制限に引っかかる。
数百件づつ分割して同時にAPIを叩けば回避できそう。

Serverless Function Execution Timeout (Seconds): 10

The maximum number of concurrent executions for Serverless Functions is 1000 by default.
Limits – Vercel Docs

設計

クライアントサイドでやりくりする案件。

useMutationフック自体を複数そのつど初期化するのか？
createEntriesWithQueueみたいなカスタムフックを新しく作って、引数やバリデーション、叩くAPIのパスはcreateEntriesと同じにして、mutation関数だけqueueにする

参考

• promise-queue: 100件から常に3件取り出して並列実行 - Qiita
• async-promise-queue vs es6-promise-pool vs p-limit vs p-queue vs promise-limit vs promise-pool vs promise-queue vs promise-throttle vs tiny-async-pool | npm trends
  • p-limitがダウンロード数では圧倒的上位。でもStar数ではp-queue
  • p-queueの機能限定盤がp-limitであるらしい。p-queueを使おう
• p-queue を使ってみた - aminevsky.blog
  • v6で止めておくのが賢明そう

• 設定ページの作成
• 記事を期間指定して取得するクエリ
• APIから得た記事データをフロント側でJSONに変換
• 既存のDayOneデータとメタデータをマージする（やらなくてもいい）
  • というかこれさえなければ設定ページを作らなくて済んだかも…

要件

• query keyの一元管理をする。invalidateするときのキーが間違っていることがある
• useMutationフックの置き場所をuseCase層に置く？ invalidate系の処理もuseCaseに書いてよいはず
  • 全件削除したら全件再取得、一件更新したら一件再取得など、invalidateは立派なビジネスロジックを成している
  • queryClientはフック外で初期化できないので、引数として渡せばいい
  • queryClientは関数内で宣言できるので結論ぜんぶuseCaseに書けばいい、クエリキーも一緒に
• 要らないコンポーネントを削除 SettingsPageが消せるはず
• useJsonImport -> useLoadJson?

参考

• Query Keys | React Query | TanStack

react-selectを用いて実装済

現状、カスタムフックを使って useState を使ってしまっているが、要らないはず。formのsubmit時にPromise化されたFileReader使用関数を実行すればよい。

const inputFile = document.querySelector('input[type="file"]');
inputFile.addEventListener('change', handleFileUpload);

async function handleFileUpload(event) {
  const file = event.target.files[0];
  const fileText = await readFileAsText(file);
  const jsonObject = JSON.parse(fileText);

  console.log(jsonObject); // This will be your JSON object
}

function readFileAsText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    
    reader.onload = event => resolve(event.target.result);
    reader.onerror = error => reject(error);
    
    reader.readAsText(file);
  });
}

• FileReader APIをPromise化する方法 - Qiita
  • 「reader.onloadのところを、reader.addEventListener("load", () => ...)というように変更しました。
    通常、JavaScriptではel.onclick = () => {}というように、.onを使ってEventListenerを追加するやり方は推奨されていないのです」
  • へー

反省点

DayOneのクローンアプリは筋が悪い。エディタは捨ててReadOnlyに倒す方がいい。

• DayOne（iOSの日記アプリ）を捨ててWebアプリを運用しようとしても、いまいち自分のWebアプリを信用しきれず、記事データをDayOne側にも手動で同期させたくなるはず
• Webアプリ側で編集したりタグ付けたりして、それをDayOneに移してDayOne側でも編集して……となってしまう
  • データの流れは一方向にすべき
• エディタの質でネイティブアプリに勝てることはない

機能

DayOneができない機能だけを補完して、痒いところに手の届くアプリにする。

機能：複数選択して一括印刷

自分は論文を書く前に、これまで書き溜めた草稿を選定した上で、それを印刷して読み直す習慣がある。ここを自動化したい。

• 記事一覧ページで、まず検索ワードやタグで絞り込み、その中からさらに複数選択して印刷
• iOSのマークダウンエディタはどれも満足な印刷機能を持っていない
  • Ulyssesならできるが、サブスクリプションが必要で、しかもCSSを弄るのがかなり面倒
• マークダウンを正しく美しくレンダリングする機能があるだけで充分

機能：記事データの一括インポート

↑を実現するための機能。

• DayOneからエクスポートしたJSONファイルを読み込んでこちらのDBに流し込む
• vercelのAPIリクエスト制限（1回につき5秒まで）をくぐり抜けるため、数百件づつに分けてAPIを叩く必要がある
  • Serverless Function Execution Timeout (Seconds) | 5 (Hobby)
  • Limits – Vercel Docs
  • promise-queue: 100件から常に3件取り出して並列実行 - Qiita

• clientを外から渡すようにすれば同一クライアント内でbeginとrollbackできるのでは？
• executeRawで直に_EntryToTagテーブルを参照するしかない：Insert multiple rows with multiple fields with prisma raw query - Stack Overflow
• createManyは現状不可能、諦めろ：createMany を使用したネストされたリレーション · Issue #5455 · Prisma/prisma · GitHub
• createManyのバルクインサート、タグなしでバルクインサートしてからタグ付けをバルクアップデートしようとしていたが、バルクアップデートなんてないらしい
• updateManyは役に立たない：PrismaのupdateManyは複数レコードに異なるデータで更新できる関数ではない
• 演算子一覧：Prisma Client API (Reference)
  • inで配列検索
• リレーション先のタグもwhereで絞り込める：Prismaで、リレーション先のデータに対するWHEREクエリを作る | WP-kyoto
• 降順はorderBy：30歳からのプログラミング
• Tagに対してfindManyしてpostを取ってくる方法もあるのか。なるほど……
  • RDBなので逆からも取れます：PrismaでManyToManyなテーブルを作る | WP-kyoto
• 期間はこれ：Prisma で期間で where する方法
• Prisma Client API (Reference)
  • containsで済むね
• Full-text search (Preview)
  • 全文検索って必要か？ キーワード一致だけでいいんだけど
• Pagination (Reference)
  • limit, offsetはこれ
• deleteするとき紐づいたタグもDeleteするの、規約に従って生成されたテーブル名を_EntryToTagと指定すればいいと気づいた。AとBってのは最悪だけど
  • こんなことしなくていい、disconnectするだけ
• 生のSQLを投げるのもできるらしい。テスト時にトランザクションでrollbackするやつまた使えるんじゃないか
  • できなかった
  • Raw database access (Reference)
• 結局 Implicit が良さそうという結論になった
• connectOrCreate 複数レコードの問題 · ディスカッション #12059 · Prisma/prisma
• database - How to use connectOrCreate with many to many in prisma - Stack Overflow
• そもそも前提が違うのか？ まずはTagを一つの独立したオブジェクトとして扱って、Tagを登録しておいてからそれにEntryを紐づける、みたいな発想のほうがいいのか
  • create時にTagもcreateしちゃうの、あんまし良くないかも。既存のタグと重複したらどうすんだ
    • この点いちおうテストしておくテストしたらやっぱり重複した……
    • でもいずれにせよ createMany するときはまず既存のタグを取得して（新規があれば登録して）からconnectしていく発想になるか
• ManyToManyのリレーション、なんも分からん。どうすればいいんだ
  • 多対多の関係のモデリングとクエリ
  • Many-to-many relations
• update時は面倒
  • Relation queries (Concepts)
• createManyでリレーションはできない、手動でやるしか
  • Relation queries (Concepts)
• Prisma使っててテストをやるときどうすればいいの
• CRUD (Reference)
• Modeling and querying many-to-many relations
• Postgres→MySQLの移行、面倒だし他のPostres無料枠ありのサービスにしようかと思った
  • https://twitter.com/MusharofChy/status/1601502727401779200?s=20&t=GDU7JMzjtxwY721KHwSUiQ
  • が、Fly.ioはHerokuと同じく面倒そうなのでやめる
• 日付はDateTime型か、UTCに揃えるべきか
  • Prismaで日付データを扱う | WP-kyoto
  • Prisma MySQL でUTC以外の任意のタイムゾーンを利用するのが難しい件 | 404 motivation not found
• PlanetScaleでは prisma db push の使用が推奨される
  • PrismaとPlanetScale
• ManyToManyのリレーションは暗黙的なほうを使う、せっかくよしなにやってくれるので
  • Prismaでリレーションを定義する
• PlanetScaleで導入
  • PlanetScaleをNext.jsとPrismaで始める
• リレーション用のtagsテーブルにidを設定していなかったら怒られた
  • いずれにせよ既存のテーブルはいったん捨てるのと、多対多のリレーションをどうするか調べる
• supabaseと相性が悪いらしい。未修正のバグを踏んづけた
  • Error: db error: ERROR: canceling statement due to statement timeout
    • prisma/issues/16853
    • prisma db push でいけた。prisma migrate が失敗するのは supabase も Planet Scale も一緒