Support populateCache as a function

[shuding]

We added the populateCache option (as well as other options for optimistic UI) recently, a normal use case looks like the following:

mutate(addTodo(todo), {
  optimisticData: [...todos, todo],
  populateCache: true,
  rollbackOnError: true,
  revalidate: false,
})

Say that the addTodo calls the POST /api/todos endpoint, which returns the full, updated list.

Transform Before Populating the Cache

However, it's also common that the POST /api/todos endpoint only returns the new added item, not the full list. So naturally ​the next step is to support populateCache as a synchronous function that transforms the returned data before writing back to the cache:

mutate(addTodo(todo), {
 ​optimisticData: [...todos, todo],
 ​populateCache: addedTodo => [...todos, addedTodo],
 ​rollbackOnError: true,
 ​revalidate: true,
})

Note that revalidate: true is needed now.

Also populateCache is synchronous only to avoid possible race conditions.

Opt-out

With this design, if an error is throw when calling populateCache, we can skip populating the cache for this specific mutation.

This enables a way to conditionally populating the cache.

[ludovic-montel]

Hi @shuding, thank you for this improvement!

I have a similar need with the library. I would like to use optimisticData as a function, that takes as argument the current store value. It would allow me to extract the mutation functions more easily out of the component that uses the store.

Could you do that ?

Thanks!

[huozhi]

that takes as argument the current store value

@ludovic-montel For this do you mean the current returned data property from swr hook? Guess it would also be possible to evaluate outside of mutate function, since swr has returned mutate and data at the same time.

Or are you using the global mutate building the function outside of components and store? I think this case sounds fair

[shuding]

I think then the populateCache option needs to accept the current data as well, something like:

mutate(addTodo(todo), {
  ​optimisticData: todos => [...todos, todo],
  ​populateCache: (addedTodo, todos) => [...todos, addedTodo],
  ​rollbackOnError: true,
  ​revalidate: true,
})

So this can be wrapped in an event callback which is totally pure and doesn't depend on the hook state.

[huozhi]

Yeah building up hook with useSWRConfig().mutate could be generic and independent from the specific hook key/data

[ludovic-montel]

Or are you using the global mutate building the function outside of components and store? I think this case sounds fair

@huozhi yes, exactly, it would allow to use the global mutate function with the optimisticData, it would be great!

[shuding]

This can be a great separate feature request 👍

[ludovic-montel]

Thanks for your answers, I just added a feature request in the Discussion of the repository (#1850)