Archived
87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import { ref, computed, onUnmounted, watch } from 'vue'
|
|
import { createSWR } from '../../core'
|
|
import type { Key, Fetcher, SWRConfig as CoreSWRConfig } from '../../core'
|
|
import type { SWRRefs, SWRRef, SWRConfig } from './types'
|
|
|
|
// Create a basic Vue SWR implementation
|
|
export function createSWRComposables<Data = any, Error = any>(
|
|
key: Key,
|
|
fetcher: Fetcher<Data>,
|
|
config?: SWRConfig<Data, Error>
|
|
): SWRRefs<Data, Error> {
|
|
const swr = createSWR<Data, Error>({ fetcher, ...config })
|
|
|
|
const data = ref<Data | undefined>()
|
|
const error = ref<Error | undefined>()
|
|
const loading = ref(false)
|
|
const validating = ref(false)
|
|
|
|
// Subscribe to SWR changes
|
|
const unsubscribe = swr.subscribe(key, (newData, newError, newValidating, newLoading) => {
|
|
data.value = newData
|
|
error.value = newError
|
|
validating.value = newValidating
|
|
loading.value = newLoading
|
|
})
|
|
|
|
// Cleanup on unmount
|
|
onUnmounted(() => {
|
|
unsubscribe()
|
|
})
|
|
|
|
return {
|
|
data,
|
|
error,
|
|
loading,
|
|
validating,
|
|
mutate: (mutateData, options) => swr.mutate(key, mutateData as any, options),
|
|
revalidate: (options) => swr.revalidate(key, options)
|
|
}
|
|
}
|
|
|
|
export function createSWRRef<Data = any, Error = any>(
|
|
key: Key,
|
|
fetcher: Fetcher<Data>,
|
|
config?: SWRConfig<Data, Error>
|
|
): SWRRef<Data, Error> {
|
|
return createSWRComposables(key, fetcher, config) as SWRRef<Data, Error>
|
|
}
|
|
|
|
// Export individual refs for convenience
|
|
export const swrDataRef = <T>(key: Key, fetcher: Fetcher<T>, config?: SWRConfig<T>) =>
|
|
createSWRRef(key, fetcher, config).data
|
|
|
|
export const swrErrorRef = <T>(key: Key, fetcher: Fetcher<T>, config?: SWRConfig<T>) =>
|
|
createSWRRef(key, fetcher, config).error
|
|
|
|
export const swrLoadingRef = <T>(key: Key, fetcher: Fetcher<T>, config?: SWRConfig<T>) =>
|
|
createSWRRef(key, fetcher, config).loading
|
|
|
|
export const swrValidatingRef = <T>(key: Key, fetcher: Fetcher<T>, config?: SWRConfig<T>) =>
|
|
createSWRRef(key, fetcher, config).validating
|
|
|
|
// Hook-like function for Vue
|
|
export function useSWR<Data = any, Error = any>(
|
|
key: Key,
|
|
fetcher: Fetcher<Data>,
|
|
config?: SWRConfig<Data, Error>
|
|
): SWRRefs<Data, Error> {
|
|
return createSWRComposables(key, fetcher, config)
|
|
}
|
|
|
|
export function useSWRMutate<Data = any, Error = any>(
|
|
key: Key,
|
|
fetcher: Fetcher<Data>,
|
|
config?: SWRConfig<Data, Error>
|
|
): SWRRefs<Data, Error> {
|
|
return createSWRComposables(key, fetcher, config)
|
|
}
|
|
|
|
export function useSWRInstance<Data = any, Error = any>(
|
|
key: Key,
|
|
fetcher: Fetcher<Data>,
|
|
config?: SWRConfig<Data, Error>
|
|
): SWRRefs<Data, Error> {
|
|
return createSWRComposables(key, fetcher, config)
|
|
}
|