2.0.0-beta.0

[shuding]

SWR 2.0 coming soon, and this is the first beta version!

Keep in mind that APIs might still change until the stable release. Documentation will also be updated once stable.

Highlights

useSWRMutation — dedicated API for remote mutations, e.g. POST (#1450)

Added in #1450, the new useSWRMutation hook covers all the use cases of:

• Requests that change data on the remote side: such as POST, PUT, DELETE, etc.
• Requests that need to be triggered manually, instead of automatically by SWR.
• Passing extra argument to fetcher, when triggering a request.
• Knowing the status of a mutation, similar to isValidating but for mutations.
• A lot more...

Here's a quick example of how it looks:

import useSWRMutation from 'swr/mutation'

async function sendRequest(url, { arg }) {
  return fetch(url, {
    method: 'POST',
    body: JSON.stringify(arg)
  })
}

function App() {
  const { trigger } = useSWRMutation('/api/user', sendRequest)

  return <button onClick={() => {
    trigger({ username: 'johndoe' })
  }}>Update Username</button>
}

In this example, the "fetcher", which is sendRequest, will receive the value { username: 'johndoe' } as the arg from the second parameter. The request will only be triggered when clicking the button.

The new useSWRMutation hook is actually more powerful than this, it also supports:

• Optimistic updates
• Automatic error rollback
• Detect and avoid race conditions between useSWR
• Populate the cache of useSWR after mutation finishes
• ...

More examples to come.

Breakings

Fetcher no longer accepts multiple arguments (#1864)

Previously, if the key is an array, the values will be passed to the fetcher function as arguments separately. In 2.0, the key will always be passed to the fetcher as is.

Before:

// SWR 1.x
useSWR([1, 2, 3], (a, b, c) => {
  assert(a === 1)
  assert(b === 2)
  assert(c === 3)
})

After 2.0.0:

// SWR 2.0.0
useSWR([1, 2, 3], (a) => {
  assert(a === [1, 2, 3])
})

Internal structure of the cached data (#1863)

This change affects the code that directly reads/writes to the cache, or provides a cache preset. For example if you have something like cache.set(key, value), you'll have to update your code.

Previously, the cached value of key will be the associated data, so this was guaranteed:

// SWR 1.x
assert(cache.get(key) === data)

And we keep other states (error, isValidating) with a special, prefixed key. Something like '$err$' + key.

Since 2.0.0, the internal structure will be an object that holds all the current states:

// SWR 2.0.0
assert(cache.get(key) === { data, error, isValidating })

What's Changed

• bugfix: make suspense and revalidateIfStale work together by @simowe in bugfix: make suspense and revalidateIfStale work together #1851
• feat: support functional optimisticData by @huozhi in feat: support functional optimisticData #1861
• test: fix an act warning by @koba04 in test: fix an act warning #1888
• breaking: Change the fetcher argument to be consistent with the passed key by @shuding in breaking: Change the fetcher argument to be consistent with the passed key #1864
• Keep all fields with one single key by @shuding in Keep all fields with one single key #1863
• fix: wrong spell by @baojie223 in fix: wrong spell #1902
• Update React 18 dependencies by @shuding in Update React 18 dependencies #1824
• build(deps): bump minimist from 1.2.5 to 1.2.6 by @dependabot in build(deps): bump minimist from 1.2.5 to 1.2.6 #1903
• type: make type inference simpler by @promer94 in type: make type inference simpler #1908
• type: fix type error on SWRConfig by @himself65 in type: fix type error on SWRConfig #1913
• feat: Hook for remote mutations by @shuding in feat: Hook for remote mutations #1450

New Contributors

• @simowe made their first contribution in bugfix: make suspense and revalidateIfStale work together #1851
• @baojie223 made their first contribution in fix: wrong spell #1902
• @himself65 made their first contribution in type: fix type error on SWRConfig #1913

Full Changelog: 1.2.2...2.0.0-beta.0

---

This discussion was created from the release 2.0.0-beta.0.

[ericponto]

I am having a little bit of trouble understanding how the error handling works with useSWRMutation. I copied the example from https://swr.vercel.app/examples/error-handling but updated it to use useSWRMutation and trigger instead of useSWR and mutate. Here is a code sandbox of that: https://codesandbox.io/s/exciting-ives-rvxuh2?file=/src/App.tsx

A couple things I noticed:

• when the fetcher throws an error, it doesn't seem to be caught completely
• when there is an error followed by a successful call, the error does not clear

These two behaviors are different from useSWR with mutate. Am I thinking about useSWRMutation and trigger incorrectly?

[shuding]

Great feedback, thank you! These seem like bugs so I'll create an issue to track.

[jordanmonier]

Would it be possible to use an ASYNC cache ?

For example on React Native, we might want to cache the data using the AsyncStorage so that when the user doesn't have an internet connection, SWR would use the cached version from AsyncStorage.

[huozhi]

You can still use a sync cache (like a Map instance) as your custom cache, and then sync the state to AsyncStorage in RN when the app is initializing or exiting. Using the sync cache is mostly beacause of the accuracy requirement in swr.

[shuding]

We will need to add an example of this in the React Native section of the docs.

[floatittech]

What About Partial Update During PATCH Request. It Fetch All Data After Patching . So How To Fetch Only That Data Which Is PATCHED During Request.

[tino-brst]

Maybe there is an example somewhere that I haven't found yet, but was wondering how would one implement the idea of Mutating based on current data using the new trigger function (i.e. what if what one passes to the trigger function trigger({ foo: 42 }) depends on the current local data). Is there something like how the mutate function from useSWR takes both data and (data) => newData ?

[lomocc]

Is it possible to share isMutating? @shuding
just like isValidating?

[shuding]

It's not shared by design, because each useSWRMutation hook can probably have different mutation types or payloads (e.g. one for POST and another one for DELETE). So they're separated.

[Pagebakers]

It'd be great if the MutationFetcher type could be exported from the package as well.

[huozhi]

You can checkout 2.0.0-rc.0 it's exported there

[Pagebakers]

It's exported from types.ts but not from the index.

https://github.com/vercel/swr/blob/2.0.0-rc.0/mutation/index.ts#L144

Right now we can only infer it like this.

type MutationFetcher<Data, Error> = SWRMutationConfiguration<Data, Error>['fetcher']

[robert-wettstaedt]

Also somewhat related: Why are the function parameter types of the MutationFetcher not inferred?

import { SWRMutationConfiguration } from 'swr/mutation'

type Fetcher = SWRMutationConfiguration<Data, Error, ExtraArg>['fetcher']
export const fetcher: Fetcher = (key, { arg }) => {}

Results in these type errors:

ERROR in src/index.tsx:4:34
TS7006: Parameter 'key' implicitly has an 'any' type.
    2 |
    3 | type Fetcher = SWRMutationConfiguration<Data, Error, ExtraArg>['fetcher']
  > 4 | export const fetcher: Fetcher = (key, { arg }) => {}
      |                                  ^^^
    5 |

ERROR in src/index.tsx:4:41
TS7031: Binding element 'arg' implicitly has an 'any' type.
    2 |
    3 | type Fetcher = SWRMutationConfiguration<Data, Error, ExtraArg>['fetcher']
  > 4 | export const fetcher: Fetcher = (key, { arg }) => {}
      |                                         ^^^
    5 |

---

Instead I need to do:

import { SWRMutationConfiguration } from 'swr/mutation'

type FetcherArgs = Parameters<NonNullable<SWRMutationConfiguration<Data, Error, ExtraArg>['fetcher']>>
export const fetcher = (...[key, { arg }]: FetcherArgs) => {}

Which is just way too verbose.

---

The same thing btw happens using the useSWRMutation hook:

import { Key } from 'swr'
import useSWRMutation from 'swr/mutation'

export const useFetcher = () => {
  useSWRMutation<Data, Error, Key, ExtraArg>('key', (_, { arg }) => {})
}

With the same errors:

ERROR in src/index.tsx:5:54
TS7006: Parameter '_' implicitly has an 'any' type.
    3 |
    4 | export const useFetcher = () => {
  > 5 |   useSWRMutation<Data, Error, Key, ExtraArg>('key', (_, { arg }) => {})
      |                                                      ^
    6 | }
    7 |

ERROR in src/index.tsx:5:59
TS7031: Binding element 'arg' implicitly has an 'any' type.
    3 |
    4 | export const useFetcher = () => {
  > 5 |   useSWRMutation<Data, Error, Key, ExtraArg>('key', (_, { arg }) => {})
      |                                                           ^^^
    6 | }
    7 |

---

With [email protected] btw

[raulmarindev]

@shuding @huozhi Thank you so much for your work guys! We are going to start using the 2.0.0-rc.0 version in our project today and we'll be back with any possible feedback.

[gur22-09]

useSWRMutation will definately solve a lot of use cases.
good stuff  🥇

[nmateo]

Could someone provide steps to install swr 2.0.0 release candidates on react native project ? my project runs on bare and expo, i tried to install it with yarn add vercel/swr #2.0.0-rc.3 but i'm getting:
package node_modules/swr/package.json was found, However this package itself specifies a 'main' module field that could not be resolved
Thanks in advance