Return data from mutate

[sergiodxa]

Now that mutate support passing an async function to get the data it will be helpful to get that data as return value of mutate.

const data = await mutate('/api/data', fetch('/api/data').then(res => res.json()))
// use data

This way if I want to use the data right now for something else I don't need to use the old way of first fetch and await and then pass the data to mutate and return it below.

const data = await fetch('/api/data').then(res => res.json());
mutate('/api/data', data)
// use data

[shuding]

Good suggestion 👍 That was what we wanted to do too.
And I think it would be great to do this together with #136 in v0.2 to have a more general, unified API. We will probably merge revalidate and mutate (maybe it needs to be renamed):

const { mutate } = useSWR(...)

// it supports:

mutate() // revalidate
mutate(newData) // update data
mutate(newData, false) // update data + no revalidation
mutate(promise) // update data from a promise
mutate(promise, false) // update data from a promise + no revalidation
mutate(data => newData) // update data from a function
mutate(data => newData, false) // update data from a function + no revalidation
mutate(async data => await getData()) // update data from an async function
mutate(async data => await getData(), false) // update data from an async function + no revalidation

const res = await mutate(...) // return the data

Same for the global import { mutate } from 'swr', it requires a key as the first parameter and everything else will stay the same.

[BrunoQuaresma]

I think would be nice to have this interface as well:

mutate(key, data => { ...data, [newId]: newData })

[juhaelee]

I think would be nice to have this interface as well:

mutate(key, data => { ...data, [newId]: newData })

would this new API allow us to essentially mutate an endpoint that was fetched from an adjacent component? for example:

<TodoList A /> :

const {data: todos} = useSWR('key1')

const addTodo = (todo) => {
   mutate('key1', [...todos, todo]);
   mutate('key2', (todoListBtodos) => [...todoListBTodos, todo]);
}

<TodoList B /> :

const {data: todos} = useSWR('key2');

[sergiodxa]

Yeah, you should be able to mutate any key used in your app even if you don’t have the current data in the scope of your mutate call.

[bflemi3]

Yeah, you should be able to mutate any key used in your app even if you don’t have the current data in the scope of your mutate call.

What if the key doesn't exist yet? Will the key be created in the cache upon mutation, or is the data argument (second argument) ignored since the key doesn't exist?

import { mutate } from 'swr'

const MyComponent = () => {
  const onChange = (value) => {
    mutate(
      'non/existent/key', 
      () => fetch('non/existent/key', { method: 'PUT', body: value })
    )
  }

  return (
    <div>...</div>
  )
}