use SWR with a controlled form

[ThePaulMcBride]

Does anyone have a good example of how to use SWR with a controlled form.

Lets say I have a form that show some data I got from the server using SWR. Would I need to take that data, store it as the initial value in a useState hook, then user the setter function to update it or does SWR have something built in to help with this?

Any pointers would be really appreciated!

[huozhi]

@ThePaulMcBride if you want to change the data in form directly, I think mutate API could help? hope this is sth you're looking for.

import useSWR from 'swr'

const {data, mutate} = useSWR(API)

function handleChange() {
   mutate(/* any data you want */)
}

return (
  <Form data={data} onChange={handleChange} />
)

[javascripter]

@ThePaulMcBride @huozhi

I encountered a similar issue when using swr to implement form edit screens at work.

I feel the above pattern of using data as the source of truth isn't a good pattern for forms. Usually, form state is local. The editing state (which is not final) will leak to other components if you happen to use same data in other places since cache is global.

Also, if in other places, mutate() is called or a revalidation occurs, the state will be lost.
On RN apps this is more problematic since the expectation is that if a user navigates (pushes) to another screen and pop to previous screen, form state should be kept. (but revalidation occurs due to focus revalidation).

So I think in general form state should be kept in a state rather than data.
Anyway, I came up with a simple hook that allows dynamic initialState. (until user actually edits state initialState is updated in stale-while-revalidate patten too. What do you think of this pattern?

function useFormState(initialValue) {
  const [isChanged, setIsChanged] = useState(false)
  const [state, setState] = useState(undefined)
  return [
    isChanged ? state : initialValue,
    (state) => {
      setIsChanged(true)
      setState(state)
    },
  ]
}

const { data: product } = useSWR(`/products/${id}`)
const [name, setName] = useFormState(product?.name ?? '')

A more polished version is also on my repo
https://github.com/javascripter/react-hooks-use-form-state

[sumanchapai]

i don't see how the name of the product will be set once the data is fetched from useSWR

[javascripter]

@sumanchapai

The key is name is simply derived from data and equal to the given initialValue rather than stored in state until isChanged is set. We don't need to worry about calling setState manually when data changes. Here, the purpose of state is to store user input, which is unrelated to data that's changing.

function useFormState(initialValue) {
  return [initialValue] // simplified
}
const [state] = useFormState(data)
// state === data on every render, so data can change

If data is not fetched initially, product is undefined so name will be an empty string on first render.
Then, when data arrives, another render is initiated by useSWR and the value of name becomes product.name. The same goes for when SWR has cached data. name is derived from cached data, then it's replaced by new data once fetched.

I've been using the above useFormState hook in production for months and it's been working pretty well for us.

[nandorojo]

I use SWR with Formik elegantly. Like you said, you set the initial data of the form to the object from your backend.

In my case, the user object that I can edit from the backend is different from the one I display.

const editableUser = useSWR('/api/user?editable=true')
const displayUser = useSWR(/api/'user')
const editUser = useEditUser()

const onSubmit = async (form) => {
  const newUser = await editUser(form)

  displayUser.mutate(newUser)
  closeForm()
}

if (!editableUser.data) return <Loading />

return <Formik onSubmit={onSubmit} initialValues={editableUser.data) />

Since I always want the editableUser to be non-stale, I use cachePolicy: 'no-cache'. I implement this by wrapping useSWR and disabling the cache. You can learn more about how to do this from the discussion here.

[rodbs]

@nandorojo I'm working with useSWR and Formik and I'd like to do something similar to what you say, but I don't understand your use of 3 different hooks. Could yo share the whole example? Gracias!

[nandorojo]

I don't really have a full example. The point is that we use 2 different API endpoints. I can fetch a "display" user from the backend, or an "editable" user. The "editable" user acts as the initialValues for the form.

Once I submit the form, I call editUser, which is a post request to the backend. The backend responds with the new "display" user, so I then update the SWR cache for that item.

The key thing here is that, our backend has different types for the edit user form vs. display user.

For example, the display user has createdAt, but the "editable" user type doesn't have that field, since it's generated by the server.

[rodbs]

ok, I think I understand what you mean!! And thanks for the swr-firestore package!! :)

[lasharela]

function App() {
  const { data } = useQuery() // data returns { firstName: '', lastName: '' }
  const { register, handleSubmit } = useForm({
    values: data,
    resetOptions: {
      keepDirtyValues: true, // keep dirty fields unchanged, but update defaultValues
    },
  })
}

What about this example from official documentation:
https://react-hook-form.com/faqs#Howtoinitializeformvalues

[rpc5255]

Is there a way to do this without react-hook-form or Formik. Say my component is this:

import { useState } from "react";
import useSWR from "swr";

type FormInput = {
    name: string
    comments: string
}

export default function Form() {
    const [name, setName] = useState<string>("");
    const [comments, setComments] = useState<string>("");
    const { data, error, isLoading } = useSWR<FormInput, Error>("/api/users");

    /* How do I set the name and comments once data is defined? Should I use useEffect?
    How do I make sure the data is not fetched again, so that it does override the user input? */

    function handleSubmit(e) {
        e.preventDefault()
        // POST {name, comments}
    }


    return (
        <form className="flex gap-2" onSubmit={handleSubmit}>
            <input type="text" name="username" value={name} onChange={(e)=>setName(e.target.value)} />
            <input type="text" name="comments" value={comments} onChange={(e)=>setComments(e.target.value)} />
            <button type="submit">Submit</button>
        </form>
    );
}