Recoilのatomの初期値をatomEffectsでnext/routerから引いてくる
初期値をURLから指定するケースで使える
code:ts
// defaultは設定しない = 設定されるまでRecoilLoadable(Suspense)扱い
// effectsを利用して初回参照時にnext/routerからurlのuser_idを設定する
const currentUserId = atom<number>({
key: 'currentUserId',
})
/*~*/
import SingletonRouter from 'next/router'
const setUserIdFromUrlEffect: AtomEffect<number> = ({
trigger,
setSelf,
}) => {
const init = () => {
const { query, isReady } = SingletonRouter
if(!isReady){
return
}
// URLからuserIdを読み込む
// zodとかでparseしてもよい
const userId = Number(query.userId)
if(Number.isNaN(userId) || userId === 0){
throw userId ${userId} is not a number
}
setSelf(userId)
}
// "atomへの初回の参照時だけ"というRecoilの方言
if (trigger === 'get') {
init()
}
}
逆パターンでatomをurlに残したい場合は公式の以下を参考にすればok