API

createStore

const useStore = createStore<T>(initializer, {
  defaultDeps,
  intercept,
  onFirstSubscribe,
  onSubscribe,
  onUnsubscribe,
  onLastUnsubscribe,
});
 
// Inside component or custom hook
const state = useStore(selectDeps);

Parameters

initializer A function that returns an initial state
options? (optional)
- defaultDeps Set default reactivity (learn more)
- intercept Intercept set state
- onFirstSubscribe Handle first subscribe event
- onSubscribe Handle subscribe event
- onUnsubscribe Handle unsubscribe event
- onLastUnsubscribe Handle last unsubscribe event

Return Value

useStore()
- Parameters (optional)
  - selectDeps Customize when to re-render
- Return Value
  - state
Methods
- useStore.get Get state
- useStore.set Set state
- useStore.subscribe Subscribe the store state
- useStore.getSubscribers Get store subscribers
- useStore.setDefaultValues Set default/initial values from inside a component (must be called inside component before it gets any subscribers)
- useStore.Watch A helper component that will watch the state changes (learn more)

createStores

const useStores = createStores<TKey, T>(initializer, {
  ...options, // Same as createStore options
  hashKeyFn,
  onBeforeChangeKey,
  onStoreInitialized,
});
 
// Inside component or custom hook
const state = useStores(storeKey, selectDeps);
const state = useStores(selectDeps);

Parameters

initializer A function that returns an initial single store state
options? (optional)
- hashKeyFn Custom function to transform the store key (object) into a hash string (learn more)
- onBeforeChangeKey Handle change key passed to the hook
- onStoreInitialized Handle single store state initialized event
- ... same as useStore's

Return Value

useStores()
- Parameters (optional)
  - storeKey Choose which store state will be used (learn more)
  - selectDeps Customize when to re-render
- Return Value
  - state
Methods
- useStores.get Get state of specific store (specific store key)
- useStores.getAll Get all stores state
- useStores.getAllWithSubscriber Get all stores state that has subscriber
- useStores.set Set state of specific store (specific store key)
- useStores.setAll Set all stores state
- useStores.subscribe Subscribe to a store state
- useStores.getSubscribers Get subscribers of a store state
- useStores.getStore Get a store
- useStores.getStores Get all stores
- useStores.setDefaultValues Set default/initial values from inside a component (must be called inside component before it gets any subscribers)
- useStores.Watch A helper component that will watch the state changes (learn more)

createQuery

const useQuery = createQuery<TKey, TResponse, TData, TError>(queryFn, {
  ...options, // Same as createStores options
  select,
  staleTime,
  cacheTime,
  fetchOnMount,
  fetchOnWindowFocus,
  enabled,
  retry,
  retryDelay,
  keepPreviousData,
  getNextPageParam,
  refetchInterval,
  onSuccess,
  onError,
  onSettled,
});
 
// Inside component or custom hook
const state = useQuery(storeKey, selectDeps);
const state = useQuery(selectDeps);

Parameters

queryFn
options? (optional)
- select Transform or select a portion of the raw response
- staleTime Determine how long a response is categorized as fresh, defaults to 3 seconds
- cacheTime Determine how long the query data should be stored in memory, defaults to 5 minutes
- fetchOnMount Should we fetch/refetch when the component mounted?
- fetchOnWindowFocus Should we fetch/refetch when a window focus event triggered?
- fetchOnReconnect Should we fetch/refetch when a window online event triggered?
- enabled Should we fetch/refetch for any reason?
- retry Maximum error retry count (learn more)
- retryDelay Error retry delay in milliseconds
- keepPreviousData Return the previous key's data until the current key's fetching finished
- getNextPageParam Determine the value that should be used when getting next page
- refetchInterval Auto refetching / polling interval (learn more)
- onSuccess Triggered after fetch, refetch, & fetch next/prev page succeed
- onError Triggered after fetch, refetch, & fetch next/prev page failed
- onSettled Triggered after fetch, refetch, & fetch next/prev page (both succeed or failed)
- ... same as useStores's

Return Value

useQuery()
- Parameters (optional)
  - storeKey Choose which query store state will be used (learn more)
  - selectDeps Customize when to re-render
- Return Value
  - state
Methods
- useQuery.setInitialResponse Set default/initial response from inside a component (must be called inside component before it gets any subscribers)
- useQuery.reset Reset query to empty state for all query keys
- useQuery.resetSpecificKey Reset a specific query to empty state
- useQuery.invalidate Invalidate query for all query keys (learn more)
- useQuery.invalidateSpecificKey Invalidate a specific query
- useQuery.optimisticUpdate Optimistic update (learn more)
- useQuery.suspend Use query with suspense mode (learn more)
- ... same as useStores's

createMutation

const useMutation = createMutation<T>(initializer, {
  ...options, // Same as createStore options
  onMutate,
  onSuccess,
  onError,
  onSettled,
});
 
// Inside component or custom hook
const state = useMutation(selectDeps);

Parameters

mutationFn
options? (optional)
- onMutate Handle mutate event (right after the mutation function fired)
- onSuccess Handle success event (promise resolved)
- onError Handle error event (promise rejected)
- onSettled Handle success or error event
- ... same as useStore's

Return Value

useMutation()
- Parameters (optional)
  - selectDeps Customize when to re-render
- Return Value
  - state
Methods
- ... same as useStore's

Firebase/Supabase Integration Experimental Features