BREAKING: Deprecate revalidate with mutate (#1332)

examples/axios-typescript/libs/useRequest.ts

@@ -6,7 +6,7 @@ export type GetRequest = AxiosRequestConfig | null
 interface Return<Data, Error>
   extends Pick<
     SWRResponse<AxiosResponse<Data>, AxiosError<Error>>,
-    'isValidating' | 'revalidate' | 'error' | 'mutate'
+    'isValidating' | 'error' | 'mutate'
   > {
   data: Data | undefined
   response: AxiosResponse<Data> | undefined
@@ -24,7 +24,7 @@ export default function useRequest<Data = unknown, Error = unknown>(
   request: GetRequest,
   { initialData, ...config }: Config<Data, Error> = {}
 ): Return<Data, Error> {
-  const { data: response, error, isValidating, revalidate, mutate } = useSWR<
+  const { data: response, error, isValidating, mutate } = useSWR<
     AxiosResponse<Data>,
     AxiosError<Error>
   >(
@@ -53,7 +53,6 @@ export default function useRequest<Data = unknown, Error = unknown>(
     response,
     error,
     isValidating,
-    revalidate,
     mutate
   }
 }

examples/focus-revalidate/pages/index.js

@@ -5,7 +5,7 @@ import { login, logout } from '../libs/auth'
 import useSWR from 'swr'
 
 export default () => {
-  const { data, revalidate } = useSWR('/api/user', fetch)
+  const { data, mutate } = useSWR('/api/user', fetch)
 
   if (!data) return <h1>loading...</h1>
   if (data.loggedIn) {
@@ -14,15 +14,15 @@ export default () => {
       <img src={data.avatar} width={80} />
       <Button onClick={() => {
         logout()
-        revalidate() // after logging in/out, we revalidate the SWR
+        mutate() // after logging in/out, we mutate the SWR
       }}>Logout</Button>
     </div>
   } else {
     return <div>
       <h1>Please login</h1>
       <Button onClick={() => {
         login()
-        revalidate()
+        mutate()
       }}>Login</Button>
     </div>
   }

examples/refetch-interval/pages/index.js

@@ -5,7 +5,7 @@ import fetch from '../libs/fetch'
 import useSWR from 'swr'
 
 export default () => {
-  const { data, revalidate } = useSWR('/api/data', fetch, {
+  const { data, mutate } = useSWR('/api/data', fetch, {
     // revalidate the data per second
     refreshInterval: 1000
   })
@@ -21,7 +21,7 @@ export default () => {
         ev.preventDefault()
         setValue('')
         await fetch(`/api/data?add=${value}`)
-        revalidate()
+        mutate()
       }}>
         <input placeholder='enter something' value={value} onChange={ev => setValue(ev.target.value)} />
       </form>
@@ -30,7 +30,7 @@ export default () => {
       </ul>
       <Button onClick={async () => {
         await fetch(`/api/data?clear=1`)
-        revalidate()
+        mutate()
       }}>Clear All</Button>
     </div>
   )

infinite/index.ts

@@ -216,13 +216,6 @@ export const infinite = ((<Data, Error>(useSWRNext: SWRHook) => (
         get: () => swr.data,
         enumerable: true
       },
-      // revalidate will be deprecated in the 1.x release
-      // because mutate() covers the same use case of revalidate().
-      // This remains only for backward compatibility
-      revalidate: {
-        get: () => swr.revalidate,
-        enumerable: true
-      },
       isValidating: {
         get: () => swr.isValidating,
         enumerable: true

src/types.ts

@@ -151,10 +151,6 @@ export type Key = ValueKey | (() => ValueKey)
 export interface SWRResponse<Data, Error> {
   data?: Data
   error?: Error
-  /**
-   * @deprecated `revalidate` is deprecated, please use `mutate()` for the same purpose.
-   */
-  revalidate: () => Promise<boolean>
   mutate: KeyedMutator<Data>
   isValidating: boolean
 }

src/use-swr.ts

@@ -598,13 +598,8 @@ export const useSWRHandler = <Data = any, Error = any>(
     throw isUndefined(error) ? revalidate({ dedupe: true }) : error
   }
 
-  // Define the SWR state.
-  // `revalidate` will be deprecated in the 1.x release
-  // because `mutate()` covers the same use case of `revalidate()`.
-  // This remains only for backward compatibility
   return Object.defineProperties(
     {
-      revalidate,
       mutate: boundMutate
     },
     {

test/use-swr-config-callbacks.test.tsx

@@ -9,13 +9,13 @@ describe('useSWR - config callbacks', () => {
     let count = 0
 
     function Page(props: { text: string }) {
-      const { data, revalidate } = useSWR(
+      const { data, mutate } = useSWR(
         'config callbacks - onSuccess',
         () => createResponse(count++),
         { onSuccess: () => (state = props.text) }
       )
       return (
-        <div onClick={revalidate}>
+        <div onClick={() => mutate()}>
           hello, {data}, {props.text}
         </div>
       )
@@ -46,19 +46,19 @@ describe('useSWR - config callbacks', () => {
     let count = 0
 
     function Page(props: { text: string }) {
-      const { data, revalidate, error } = useSWR(
+      const { data, mutate, error } = useSWR(
         'config callbacks - onError',
         () => createResponse(new Error(`Error: ${count++}`)),
         { onError: () => (state = props.text) }
       )
       if (error)
         return (
-          <div title={props.text} onClick={revalidate}>
+          <div title={props.text} onClick={() => mutate()}>
             {error.message}
           </div>
         )
       return (
-        <div onClick={revalidate}>
+        <div onClick={() => mutate()}>
           hello, {data}, {props.text}
         </div>
       )

test/use-swr-integration.test.tsx

@@ -187,22 +187,18 @@ describe('useSWR', () => {
 
   it('should broadcast isValidating', async () => {
     function useBroadcast3() {
-      const { isValidating, revalidate } = useSWR(
-        'broadcast-3',
-        () => sleep(100),
-        {
-          // need to turn of deduping otherwise
-          // revalidating will be ignored
-          dedupingInterval: 10
-        }
-      )
-      return { isValidating, revalidate }
+      const { isValidating, mutate } = useSWR('broadcast-3', () => sleep(100), {
+        // need to turn of deduping otherwise
+        // revalidating will be ignored
+        dedupingInterval: 10
+      })
+      return { isValidating, mutate }
     }
     function Initiator() {
-      const { isValidating, revalidate } = useBroadcast3()
+      const { isValidating, mutate } = useBroadcast3()
       useEffect(() => {
         const timeout = setTimeout(() => {
-          revalidate()
+          mutate()
         }, 200)
         return () => clearTimeout(timeout)
         // the revalidate function is always the same reference because the key of the useSWR is static (broadcast-3)

test/use-swr-revalidate.test.tsx

@@ -8,8 +8,8 @@ describe('useSWR - revalidate', () => {
     let value = 0
 
     function Page() {
-      const { data, revalidate } = useSWR('dynamic-3', () => value++)
-      return <button onClick={revalidate}>data: {data}</button>
+      const { data, mutate } = useSWR('dynamic-3', () => value++)
+      return <button onClick={() => mutate()}>data: {data}</button>
     }
 
     render(<Page />)
@@ -29,10 +29,10 @@ describe('useSWR - revalidate', () => {
     let value = 0
 
     function Page() {
-      const { data: v1, revalidate } = useSWR('dynamic-4', () => value++)
+      const { data: v1, mutate } = useSWR('dynamic-4', () => value++)
       const { data: v2 } = useSWR('dynamic-4', () => value++)
       return (
-        <button onClick={revalidate}>
+        <button onClick={() => mutate()}>
           {v1}, {v2}
         </button>
       )
@@ -56,11 +56,11 @@ describe('useSWR - revalidate', () => {
     let faster = false
 
     function Page() {
-      const { data, revalidate } = useSWR('race', () =>
+      const { data, mutate } = useSWR('race', () =>
         createResponse(faster ? 1 : 0, { delay: faster ? 50 : 100 })
       )
 
-      return <button onClick={revalidate}>data: {data}</button>
+      return <button onClick={() => mutate()}>data: {data}</button>
     }
 
     render(<Page />)
@@ -83,14 +83,16 @@ describe('useSWR - revalidate', () => {
 
   it('should keep isValidating be true when there are two concurrent requests', async () => {
     function Page() {
-      const { isValidating, revalidate } = useSWR(
+      const { isValidating, mutate } = useSWR(
         'keep isValidating for concurrent requests',
         () => createResponse(null, { delay: 100 }),
         { revalidateOnMount: false }
       )
 
       return (
-        <button onClick={revalidate}>{isValidating ? 'true' : 'false'}</button>
+        <button onClick={() => mutate()}>
+          {isValidating ? 'true' : 'false'}
+        </button>
       )
     }
 
@@ -114,7 +116,7 @@ describe('useSWR - revalidate', () => {
   it('should respect sequences of revalidation calls although in dedupingInterval', async () => {
     let count = 0
     function Page() {
-      const { data, revalidate } = useSWR(
+      const { data, mutate } = useSWR(
         'respect sequences of revalidation calls although in dedupingInterval',
         () => {
           const currCount = ++count
@@ -124,7 +126,7 @@ describe('useSWR - revalidate', () => {
           dedupingInterval: 30
         }
       )
-      return <div onClick={() => revalidate()}>count: {data}</div>
+      return <div onClick={() => mutate()}>count: {data}</div>
     }
 
     render(<Page />)