Multistep react-hook-form with react-query

[zgrybus]

Problem: Losing Unsaved Form Changes in a Multistep Form

Stack:

• react
• react-hook-form
• react-query

Context:

We have implemented a multistep form that allows users to configure a tracking_item and add submarine_items to it. The form consists of two steps:

Step 1: Configure Tracking Item

The user sets the title and description of the tracking_item.
When the component mounts, we fetch the tracking_item using a React Query query.
If the tracking_item exists, we populate the form fields with its values. Otherwise, the fields remain empty.
The user can navigate to Step 2 with or without saving the form.

Step 2: Add Submarine Items

The user adds submarine_items to the tracking_item.
When a new submarine_item is added, we perform a mutation and invalidate the tracking_item query to ensure the data stays fresh.
The user can navigate back to Step 1 at any time.

Expected Behavior:

If the user enters Step 1, modifies the title, but does not save, we want this change to persist when they return to Step 1.
If they move to Step 2 without saving, add a submarine_item, and return to Step 1, their unsaved changes to title should still be there.

Actual Problem:

1. User navigates to Step 1 and enters a title and description.
2. User saves the data, which persists in the backend.
3. User navigates to Step 2 and adds a submarine_item.
4. Since a mutation occurred, we invalidate the tracking_item query, fetching the latest data and updating the state.
5. User returns to Step 1 and changes the title but does not save.
6. User moves back to Step 2 and adds another submarine_item.
7. Query invalidation happens again, and the form gets repopulated with the latest data from the API.
8. The unsaved title change is lost because the form gets reset with data from the API.

Key Issue:

Because query invalidation refetches data, any unsaved changes made in Step 1 are lost when the form is repopulated.
Would you like suggestions on how to solve this? Is there a way to fill the data only once? I don't see any value that useQuery returns (for example isFirstCall or something like that).

Code:

export const MultiStep = () => {
  const queryClient = useQueryClient()
  const [step, setStep] = useState(0)
  const { setValue } = useForm({
    defaultValues: {
      title: '',
      description: '',
      items: [{ text: '' }],
    },
  })
  const { data } = useQuery({
    queryKey: ['tracking_items'],
    queryFn: () =>
      // mocked values
      Promise.resolve({
        title: 'new_title',
        description: 'new_description',
        items: [{ text: 'my_item' }],
      }),
  })

  /*
   Here is the problem, as we always populate values with the newest data.
   How can we populate it only once?
 */
  useEffect(() => {
    if (data) {
      setValue('title', data.title)
      setValue('description', data.description)
      setValue('items', data.items)
    }
  }, [data, setValue])

  return (
    <>
      {step === 0 ? (
        <FirstStep
          onDetailsSave={() =>
            queryClient.invalidateQueries({ queryKey: ['tracking_items'] })
          }
        />
      ) : null}
      {step === 1 ? (
        <SecondStep
          onItemAdd={() =>
            queryClient.invalidateQueries({ queryKey: ['tracking_items'] })
          }
        />
      ) : null}
    </>
  )
}

[TkDodo]

don’t sync with useEffect, use the react values API from react hook form, as it’s made for this:

https://react-hook-form.com/docs/useform#values