TypeScript

CiteGraph 对于使用 TypeScript 编写的 app 是友好的，开箱即用，类型安全。

基本用法

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

useCiteGraph

// `key` 被推断为 `string`
useCiteGraph('/api/user', key => {})
useCiteGraph(() => '/api/user', key => {})
 
// `key` 将被推断为 { a: string; b: { c: string; d: number } }
useCiteGraph({ a: '1', b: { c: '3', d: 2 } }, key => {})
useCiteGraph(() => ({ a: '1', b: { c: '3', d: 2 } }), key => {})
 
// `arg0` 将被推断为 string.  `arg1` 将被推断为 number
useCiteGraph(['user', 8], ([arg0, arg1]) => {})
useCiteGraph(() => ['user', 8], ([arg0, arg1]) => {})

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

import useCiteGraph, { Fetcher } from 'citegraph'
 
const uid = '<user_id>'
const fetcher: Fetcher<User, string> = (id) => getUserById(id)
 
const { data } = useCiteGraph(uid, fetcher)
// `data` 将会是 `User | undefined`.

默认情况下，在 fetcher 函数内部抛出的错误具有 any 类型。该类型也可以明确指定。

const { data, error } = useCiteGraph<User, Error>(uid, fetcher);
// `data` 将会是 `User | undefined`.
// `error` 将会是 `Error | undefined`.

useCiteGraphInfinite

同样适用于 citegraph/infinite，你可以依靠自动类型推断或自己显式地指定类型。

import { CiteGraphInfiniteKeyLoader } from 'citegraph/infinite'
 
const getKey: CiteGraphInfiniteKeyLoader = (index, previousPageData) => {
  // ...
}
 
const { data } = useCiteGraphInfinite(getKey, fetcher)

useCiteGraphSubscription

内联的 subscribe 函数，手动指定 next 类型为 CiteGraphSubscriptionOptions 的示例代码：

import useCiteGraphSubscription from 'citegraph/subscription'
import type { CiteGraphSubscriptionOptions } from 'citegraph/subscription'
 
const { data, error } = useCiteGraphSubscription('key', 
  (key, { next }: CiteGraphSubscriptionOptions<number, Error>) => {
  //^ key 将会被推导为 `string`
  //....
  })
  return {
    data,
    //^ data 将会被推导为 as `number | undefined`
    error
    //^ error 将会被推导为 as `Error | undefined`
  }
}

使用 CiteGraphSubscription 声明 subscribe 函数的示例代码：

import useCiteGraphSubscription from 'citegraph/subscription'
import type { CiteGraphSubscription } from 'citegraph/subscription'
 
/** 
 * 第一个泛型是 Key
 * 第二个泛型是 Data
 * 第三个泛型是 Error
 */
const sub: CiteGraphSubscription<string, number, Error> = (key, { next }) => {                         
  //......
}
const { data, error } = useCiteGraphSubscription('key', sub)

泛型

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

// 🔹 A. 使用一个有类型的 fetcher:
// `getUser` 是 `(endpoint: string) => User`.
const { data } = useCiteGraph('/api/user', getUser)
 
// 🔹 B. 指定 data 类型:
// `fetcher` 一般会返回 `any`.
const { data } = useCiteGraph<User>('/api/user', fetcher)

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

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

中间件类型

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

import useCiteGraph, { Middleware, CiteGraphHook } from 'citegraph'
 
const citegraphMiddleware: Middleware = (useCiteGraphNext: CiteGraphHook) => (key, fetcher, config) => {
  // ...
  return useCiteGraphNext(key, fetcher, config)
}

Next.js SSG 和 SSR Suspense