TypeScript

SWR 对于用 TypeScript 编写的应用很友好，具有开箱即用的类型安全性。

¥SWR is friendly for apps written in TypeScript, with type safety out of the box.

基本用法

¥Basic Usage

默认情况下，SWR 还会从 key 推断 fetcher 的参数类型，因此你可以自动获得首选类型。

¥By default, SWR will also infer the argument types of fetcher from key, so you can have the preferred types automatically.

useSWR

// `key` is inferred to be `string`
useSWR('/api/user', key => {})
useSWR(() => '/api/user', key => {})
 
// `key` will be inferred as { a: string; b: { c: string; d: number } }
useSWR({ a: '1', b: { c: '3', d: 2 } }, key => {})
useSWR(() => ({ a: '1', b: { c: '3', d: 2 } }), key => {})
 
// `arg0` will be inferred as string.  `arg1` will be inferred as number
useSWR(['user', 8], ([arg0, arg1]) => {})
useSWR(() => ['user', 8], ([arg0, arg1]) => {})

你还可以显式指定 key 和 fetcher 参数的类型。

¥You can also explicitly specify the types for key and fetcher's arguments.

import useSWR, { Fetcher } from 'swr'
 
const uid = '<user_id>'
const fetcher: Fetcher<User, string> = (id) => getUserById(id)
 
const { data } = useSWR(uid, fetcher)
// `data` will be `User | undefined`.

默认情况下，fetcher 函数内的抛出的错误的类型为 any。也可以显式指定类型。

¥By default, the error thrown inside the fetcher function has type any. The type can also be explicitly specified.

const { data, error } = useSWR<User, Error>(uid, fetcher);
// `data` will be `User | undefined`.
// `error` will be `Error | undefined`.

useSWRInfinite

与 swr/infinite 相同，你可以依赖自动类型推断或自己显式指定类型。

¥Same for swr/infinite, you can either rely on the automatic type inference or explicitly specify the types by yourself.

import { SWRInfiniteKeyLoader } from 'swr/infinite'
 
const getKey: SWRInfiniteKeyLoader = (index, previousPageData) => {
  // ...
}
 
const { data } = useSWRInfinite(getKey, fetcher)

useSWRSubscription

内联订阅功能并使用 SWRSubscriptionOptions 手动指定 next 的类型。

¥Inline subscribe function and manually specify the type of next using SWRSubscriptionOptions.

import useSWRSubscription from 'swr/subscription'
import type { SWRSubscriptionOptions } from 'swr/subscription'
 
const { data, error } = useSWRSubscription('key', 
  (key, { next }: SWRSubscriptionOptions<number, Error>) => {
  //^ key will be inferred as `string`
  //....
  })
  return {
    data,
    //^ data will be inferred as `number | undefined`
    error
    //^ error will be inferred as `Error | undefined`
  }
}

使用 SWRSubscription 声明订阅函数

¥declare subscribe function using SWRSubscription

import useSWRSubscription from 'swr/subscription'
import type { SWRSubscription } from 'swr/subscription'
 
/** 
 
 * The first generic is Key
 
 * The second generic is Data
 
 * The Third generic is Error
 */
const sub: SWRSubscription<string, number, Error> = (key, { next }) => {                         
  //......
}
const { data, error } = useSWRSubscription('key', sub)

泛型

¥Generics

指定 data 的类型很容易。默认情况下，它将使用 fetcher 的返回类型（undefined 表示非就绪状态）作为 data 类型，但你也可以将其作为参数传递：

¥Specifying the type of data is easy. By default, it will use the return type of fetcher (with undefined for the non-ready state) as the data type, but you can also pass it as a parameter:

// 🔹 A. Use a typed fetcher:
// `getUser` is `(endpoint: string) => User`.
const { data } = useSWR('/api/user', getUser)
 
// 🔹 B. Specify the data type:
// `fetcher` is generally returning `any`.
const { data } = useSWR<User>('/api/user', fetcher)

如果你想为 SWR 的其他选项添加类型，也可以直接导入这些类型：

¥If you want to add types for other options of SWR, you can also import those types directly:

import useSWR from 'swr'
import type { SWRConfiguration } from 'swr'
 
const config: SWRConfiguration = {
  fallbackData: "fallback",
  revalidateOnMount: false
  // ...
}
 
const { data } = useSWR<string[]>('/api/data', fetcher, config)

中间件类型

¥Middleware Types

你可以导入一些额外的类型定义，以帮助向自定义中间件添加类型。

¥There're some extra type definitions you can import to help adding types to your custom middleware.

import useSWR, { Middleware, SWRHook } from 'swr'
 
const swrMiddleware: Middleware = (useSWRNext: SWRHook) => (key, fetcher, config) => {
  // ...
  return useSWRNext(key, fetcher, config)
}

Next.js SSG 和 SSR 暂停