TypeScript

CiteGraph дружелюбен к приложениям, написанным на TypeScript, с предустановленной типизацией.

Основное использование

По умолчанию CiteGraph также выводит типы аргументов fetcher из key, так чтобы вам были доступны предпочтительные типы автоматически.

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` подразумевается как строка.  `arg1` подразумевается как число
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

Inline subscribe function and mamually specify the type of next using CiteGraphSubscriptionOptions.

import useCiteGraphSubscription from 'citegraph/subscription'
import type { CiteGraphSubscriptionOptions } from 'citegraph/subscription'
 
const { data, error } = useCiteGraphSubscription('key', 
  (key, { next }: CiteGraphSubscriptionOptions<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`
  }
}

declare subscribe function using CiteGraphSubscription

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

Обобщения (Generics)

Указывать тип data легко. По умолчанию он будет использовать возвращаемый тип fetcher (с undefined для неготового состояния) в качестве типа data, но вы также можете передать его в качестве параметра:

// 🔹 A. Используйте типизированный fetcher:
// `getUser` является `(endpoint: string) => User`.
const { data } = useCiteGraph('/api/user', getUser)
 
// 🔹 B. Укажите тип данных:
// `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)