Infinite Query Hook

1'use client'
2
3import { createClient } from '@/lib/supabase/client'
4import { PostgrestQueryBuilder } from '@supabase/postgrest-js'
5import { type SupabaseClient } from '@supabase/supabase-js'
6import { useEffect, useRef, useSyncExternalStore } from 'react'
7
8const supabase = createClient()
9
10// The following types are used to make the hook type-safe. It extracts the database type from the supabase client.
11type SupabaseClientType = typeof supabase
12
13// Utility type to check if the type is any
14type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N
15
16// Extracts the database type from the supabase client. If the supabase client doesn't have a type, it will fallback properly.
17type Database =
18  SupabaseClientType extends SupabaseClient<infer U>
19    ? IfAny<
20        U,
21        {
22          public: {
23            Tables: Record<string, any>
24            Views: Record<string, any>
25            Functions: Record<string, any>
26          }
27        },
28        U
29      >
30    : {
31        public: {
32          Tables: Record<string, any>
33          Views: Record<string, any>
34          Functions: Record<string, any>
35        }
36      }
37
38// Change this to the database schema you want to use
39type DatabaseSchema = Database['public']
40
41// Extracts the table names from the database type
42type SupabaseTableName = keyof DatabaseSchema['Tables']
43
44// Extracts the table definition from the database type
45type SupabaseTableData<T extends SupabaseTableName> = DatabaseSchema['Tables'][T]['Row']
46
47type SupabaseSelectBuilder<T extends SupabaseTableName> = ReturnType<
48  PostgrestQueryBuilder<DatabaseSchema, DatabaseSchema['Tables'][T], T>['select']
49>
50
51// A function that modifies the query. Can be used to sort, filter, etc. If .range is used, it will be overwritten.
52type SupabaseQueryHandler<T extends SupabaseTableName> = (
53  query: SupabaseSelectBuilder<T>
54) => SupabaseSelectBuilder<T>
55
56interface UseInfiniteQueryProps<T extends SupabaseTableName, Query extends string = '*'> {
57  // The table name to query
58  tableName: T
59  // The columns to select, defaults to `*`
60  columns?: string
61  // The number of items to fetch per page, defaults to `20`
62  pageSize?: number
63  // A function that modifies the query. Can be used to sort, filter, etc. If .range is used, it will be overwritten.
64  trailingQuery?: SupabaseQueryHandler<T>
65}
66
67interface StoreState<TData> {
68  data: TData[]
69  count: number
70  isSuccess: boolean
71  isLoading: boolean
72  isFetching: boolean
73  error: Error | null
74  hasInitialFetch: boolean
75}
76
77type Listener = () => void
78
79function createStore<TData extends SupabaseTableData<T>, T extends SupabaseTableName>(
80  props: UseInfiniteQueryProps<T>
81) {
82  const { tableName, columns = '*', pageSize = 20, trailingQuery } = props
83
84  let state: StoreState<TData> = {
85    data: [],
86    count: 0,
87    isSuccess: false,
88    isLoading: false,
89    isFetching: false,
90    error: null,
91    hasInitialFetch: false,
92  }
93
94  const listeners = new Set<Listener>()
95
96  const notify = () => {
97    listeners.forEach((listener) => listener())
98  }
99
100  const setState = (newState: Partial<StoreState<TData>>) => {
101    state = { ...state, ...newState }
102    notify()
103  }
104
105  const fetchPage = async (skip: number) => {
106    if (state.hasInitialFetch && (state.isFetching || state.count <= state.data.length)) return
107
108    setState({ isFetching: true })
109
110    let query = supabase
111      .from(tableName)
112      .select(columns, { count: 'exact' }) as unknown as SupabaseSelectBuilder<T>
113
114    if (trailingQuery) {
115      query = trailingQuery(query)
116    }
117    const { data: newData, count, error } = await query.range(skip, skip + pageSize - 1)
118
119    if (error) {
120      console.error('An unexpected error occurred:', error)
121      setState({ error })
122    } else {
123      setState({
124        data: [...state.data, ...(newData as TData[])],
125        count: count || 0,
126        isSuccess: true,
127        error: null,
128      })
129    }
130    setState({ isFetching: false })
131  }
132
133  const fetchNextPage = async () => {
134    if (state.isFetching) return
135    await fetchPage(state.data.length)
136  }
137
138  const initialize = async () => {
139    setState({ isLoading: true, isSuccess: false, data: [] })
140    await fetchNextPage()
141    setState({ isLoading: false, hasInitialFetch: true })
142  }
143
144  return {
145    getState: () => state,
146    subscribe: (listener: Listener) => {
147      listeners.add(listener)
148      return () => listeners.delete(listener)
149    },
150    fetchNextPage,
151    initialize,
152  }
153}
154
155// Empty initial state to avoid hydration errors.
156const initialState: any = {
157  data: [],
158  count: 0,
159  isSuccess: false,
160  isLoading: false,
161  isFetching: false,
162  error: null,
163  hasInitialFetch: false,
164}
165
166function useInfiniteQuery<
167  TData extends SupabaseTableData<T>,
168  T extends SupabaseTableName = SupabaseTableName,
169>(props: UseInfiniteQueryProps<T>) {
170  const storeRef = useRef(createStore<TData, T>(props))
171
172  const state = useSyncExternalStore(
173    storeRef.current.subscribe,
174    () => storeRef.current.getState(),
175    () => initialState as StoreState<TData>
176  )
177
178  useEffect(() => {
179    // Recreate store if props change
180    if (
181      storeRef.current.getState().hasInitialFetch &&
182      (props.tableName !== props.tableName ||
183        props.columns !== props.columns ||
184        props.pageSize !== props.pageSize)
185    ) {
186      storeRef.current = createStore<TData, T>(props)
187    }
188
189    if (!state.hasInitialFetch && typeof window !== 'undefined') {
190      storeRef.current.initialize()
191    }
192  }, [props.tableName, props.columns, props.pageSize, state.hasInitialFetch])
193
194  return {
195    data: state.data,
196    count: state.count,
197    isSuccess: state.isSuccess,
198    isLoading: state.isLoading,
199    isFetching: state.isFetching,
200    error: state.error,
201    hasMore: state.count > state.data.length,
202    fetchNextPage: storeRef.current.fetchNextPage,
203  }
204}
205
206export {
207  useInfiniteQuery,
208  type SupabaseQueryHandler,
209  type SupabaseTableData,
210  type SupabaseTableName,
211  type UseInfiniteQueryProps,
212}