Infinite Query Hook

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