useEffect × ReactQueryを使った、処理実行順序の制御

これは何？

カスタムフックの処理が実行される前に、useEffectの処理を先に行いたいケースが出てきた。その際にすぐに解決方法がわからなかったので備忘録として書く。

前提

• React18
• TypeScript: 4.7.4
• ReactQuery
• ReactHookForm

Tips

• ケース

  • 画面遷移時にuseFuga()を使用してPOSTリクエストが走る。
  • useFuga()はReactQueryで実装されたカスタムフック。
  • POSTリクエストの前に、POSTするdataの値を更新したい。
  • しかし、useEffect()はカスタムフックの後に実行される。
  • どうする？？？

• A:

  • useStateを作成
  • useEffectの中でstateの更新
  • stateの値をReactQueryのconfig:{enabled: }に設定する
  • これで、POSTするdataの値を更新した後にカスタムフックの呼び出しを行うことができる。

サンプルコード
  const [isUpdated,  setIsUpdated] = useState(false)

  useEffect(() => {
    const fields = getValues('hoge')
    const updatedFields = fields.map((field, index) => ({
      ...field,
      position: index + 1
    }))

    setValue('hogeAttributes', updatedFields)
    setIsUpdated(true)
  }, [])

  const { data, isLoading, isError, isSuccess } =
    useFuga({
      params: {
        data: getValues()
      },
      config: {
        enabled: isSetPinned
      }
    })