Using SWR with a controlled component

[nfiacco]

Hi! I have a controlled component for displaying saved text, which the user can also edit. I want to fetch the data initially using SWR, and then allow edits to be made without actually doing a mutation until the user hits "post".

Is the right approach to have local state that gets set upon the initial data being loaded? For example:

const {data, error} = useSWR("/api/post", fetcher);
const [post, setPost] = useState<string | undefined>(undefined);

useEffect(() => {
    setPost(data.post);
}, [data]);

An empty state is also valid here, but I'm assuming I should just use an empty string or null rather than undefined.

[nfiacco]

I also just tried modifying the returned data object directly, which seems to work surprisingly. Is this not correct?

[rpc5255]

Hey, how did you end up solving this? I posted a similar comment: #561 (comment)