style: refactor fetch and context (#10795)
AkaraChen
1 year ago
committed by
GitHub
parent
328965ed7c
commit
1cc7dc6360
@ -0,0 +1,23 @@
|
||||
'use client'
|
||||
|
||||
import type { FC, PropsWithChildren } from 'react'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
||||
|
||||
const STALE_TIME = 1000 * 60 * 30 // 30 minutes
|
||||
|
||||
const client = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: STALE_TIME,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export const TanstackQueryIniter: FC<PropsWithChildren> = (props) => {
|
||||
const { children } = props
|
||||
return <QueryClientProvider client={client}>
|
||||
{children}
|
||||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
</QueryClientProvider>
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
import {
|
||||
useQueryClient,
|
||||
} from '@tanstack/react-query'
|
||||
|
||||
export const useInvalid = (key: string[]) => {
|
||||
const queryClient = useQueryClient()
|
||||
return () => {
|
||||
queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey: key,
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
import { type Context, type Provider, createContext, useContext } from 'react'
|
||||
import * as selector from 'use-context-selector'
|
||||
|
||||
const createCreateCtxFunction = (
|
||||
useContextImpl: typeof useContext,
|
||||
createContextImpl: typeof createContext) => {
|
||||
return function<T>({ name, defaultValue }: CreateCtxOptions<T> = {}): CreateCtxReturn<T> {
|
||||
const emptySymbol = Symbol(`empty ${name}`)
|
||||
// @ts-expect-error it's ok here
|
||||
const context = createContextImpl<T>(defaultValue ?? emptySymbol)
|
||||
const useContextValue = () => {
|
||||
const ctx = useContextImpl(context)
|
||||
if (ctx === emptySymbol)
|
||||
throw new Error(`No ${name ?? 'related'} context found.`)
|
||||
|
||||
return ctx
|
||||
}
|
||||
const result = [context.Provider, useContextValue, context] as CreateCtxReturn<T>
|
||||
result.context = context
|
||||
result.provider = context.Provider
|
||||
result.useContextValue = useContextValue
|
||||
return result
|
||||
}
|
||||
}
|
||||
|
||||
type CreateCtxOptions<T> = {
|
||||
defaultValue?: T
|
||||
name?: string
|
||||
}
|
||||
|
||||
type CreateCtxReturn<T> = [Provider<T>, () => T, Context<T>] & {
|
||||
context: Context<T>
|
||||
provider: Provider<T>
|
||||
useContextValue: () => T
|
||||
}
|
||||
|
||||
// example
|
||||
// const [AppProvider, useApp, AppContext] = createCtx<AppContextValue>()
|
||||
|
||||
export const createCtx = createCreateCtxFunction(useContext, createContext)
|
||||
|
||||
export const createSelectorCtx = createCreateCtxFunction(
|
||||
selector.useContext,
|
||||
selector.createContext as typeof createContext,
|
||||
)
|
||||
Loading…
Reference in New Issue