useSWRMutation: optimistic updates for multiple keys + extracting custom hook

[gweiermann]

Hey, I’d love some feedback on how to handle optimistic updates with useSWRMutation when multiple cache keys are involved, and how to structure this cleanly in a reusable hook.

Setup

With my current API design I have several routes where the data overlaps, e.g.:

• /api/all-users
• /api/all-users-with-joined-data

I want to use a mutation to add a new user. A simplified version looks like this:

const [newUser, setNewUser] = useState(null)

const { trigger } = useSWRMutation("/api/add-user", apiAddUser, {
  onSuccess: () => {
    mutate("/api/all-users-with-joined-data", undefined, { revalidate: true })
  },
})

trigger(newUser)

Here, one key is passed directly to useSWRMutation and another is handled in onSuccess. To make it more consistent, I can introduce a dummy key:

const [newUser, setNewUser] = useState(null)

const { trigger } = useSWRMutation(dummyKey(), apiAddUser, {
  onSuccess: () => {
    mutate("/api/all-users")
    mutate("/api/all-users-with-joined-data")
  },
})

trigger(newUser)

So far, so good.

Problem 1: Optimistic updates for multiple keys

This becomes awkward once I want optimistic updates.

Using optimisticData with trigger(...), I can optimistically update the first key, but not the second. For the second key I’d have to manually update it later (e.g. in onSuccess), which means the second optimistic update is delayed until after the mutation finishes:

const [newUser, setNewUser] = useState(null)

const { trigger: addUser } = useSWRMutation("/api/add-user", apiAddUser, {
  onSuccess: () => {
    mutate("/api/all-users-with-joined-data", undefined, {
      optimisticData: (oldData) => optimisticAddUserFull(oldData, newUser),
    })
  },
  onError: (err) => console.error("Failed to add user", err),
})

trigger(newUser, {
  optimisticData: (oldData) => optimisticAddUser(oldData, newUser),
})

Question 1:

Is there a way to:

• apply optimisticData to multiple keys immediately (before the network request resolves),
• still revalidate those keys only after success,
• and still benefit from rollback / error handling that useSWRMutation provides?

Or is manually calling mutate with optimisticData on each key the intended approach here?

Problem 2: Extracting into a reusable hook while using optimisticData

I’d like to move the useSWRMutation call into a separate hook:

export function useAddUser() {
  // Where do I get `newUser` for optimistic updates?

  const state = useSWRMutation(dummyKey(), apiAddUser, {
    onSuccess: () => {
      mutate("/api/all-users", undefined, {
        optimisticData: (oldData) => optimisticAddUser(oldData, newUser),
      })
      mutate("/api/all-users-with-joined-data", undefined, {
        optimisticData: (oldData) => optimisticAddUserFull(oldData, newUser),
      })
    },
  })

  // Maybe wrap state.trigger to intercept `newUser` and store it in state?
  // That feels a bit hacky.

  return state
}

The problem: inside the hook I’ve lost access to the newUser value that was passed to trigger. I could try to wrap/monkey-patch trigger to capture the argument and store it in some state, but that feels like an implementation detail I shouldn’t rely on.

Question 2:

Is there a recommended pattern for:

• writing a reusable useAddUser hook,
• that supports optimistic updates and multiple keys,
• without doing hacky things like intercepting trigger arguments just to reuse them in onSuccess / mutate calls?

Or is this whole approach (multiple overlapping keys + shared optimistic updates) considered a code smell, and I should rather rethink my API/cache design?

I’m very interested in your opinions and patterns you use in similar situations!