Infinite Query Hook

1'use client'
2
3import { createClient } from '@/lib/supabase/client'
4import { PostgrestQueryBuilder, type PostgrestClientOptions } 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
47// Default client options for PostgrestQueryBuilder
48type DefaultClientOptions = PostgrestClientOptions
49
50type SupabaseSelectBuilder<T extends SupabaseTableName> = ReturnType<
51  PostgrestQueryBuilder<
52    DefaultClientOptions,
53    DatabaseSchema,
54    DatabaseSchema['Tables'][T],
55    T
56  >['select']
57>
58
59// A function that modifies the query. Can be used to sort, filter, etc. If .range is used, it will be overwritten.
60type SupabaseQueryHandler<T extends SupabaseTableName> = (
61  query: SupabaseSelectBuilder<T>
62) => SupabaseSelectBuilder<T>
63
64interface UseInfiniteQueryProps<T extends SupabaseTableName, Query extends string = '*'> {
65  // The table name to query
66  tableName: T
67  // The columns to select, defaults to `*`
68  columns?: string
69  // The number of items to fetch per page, defaults to `20`
70  pageSize?: number
71  // A function that modifies the query. Can be used to sort, filter, etc. If .range is used, it will be overwritten.
72  trailingQuery?: SupabaseQueryHandler<T>
73}
74
75interface StoreState<TData> {
76  data: TData[]
77  count: number
78  isSuccess: boolean
79  isLoading: boolean
80  isFetching: boolean
81  error: Error | null
82  hasInitialFetch: boolean
83}
84
85type Listener = () => void
86
87function createStore<TData extends SupabaseTableData<T>, T extends SupabaseTableName>(
88  props: UseInfiniteQueryProps<T>
89) {
90  const { tableName, columns = '*', pageSize = 20, trailingQuery } = props
91
92  let state: StoreState<TData> = {
93    data: [],
94    count: 0,
95    isSuccess: false,
96    isLoading: false,
97    isFetching: false,
98    error: null,
99    hasInitialFetch: false,
100  }
101
102  const listeners = new Set<Listener>()
103
104  const notify = () => {
105    listeners.forEach((listener) => listener())
106  }
107
108  const setState = (newState: Partial<StoreState<TData>>) => {
109    state = { ...state, ...newState }
110    notify()
111  }
112
113  const fetchPage = async (skip: number) => {
114    if (state.hasInitialFetch && (state.isFetching || state.count <= state.data.length)) return
115
116    setState({ isFetching: true })
117
118    let query = supabase
119      .from(tableName)
120      .select(columns, { count: 'exact' }) as unknown as SupabaseSelectBuilder<T>
121
122    if (trailingQuery) {
123      query = trailingQuery(query)
124    }
125    const { data: newData, count, error } = await query.range(skip, skip + pageSize - 1)
126
127    if (error) {
128      console.error('An unexpected error occurred:', error)
129      setState({ error })
130    } else {
131      setState({
132        data: [...state.data, ...(newData as TData[])],
133        count: count || 0,
134        isSuccess: true,
135        error: null,
136      })
137    }
138    setState({ isFetching: false })
139  }
140
141  const fetchNextPage = async () => {
142    if (state.isFetching) return
143    await fetchPage(state.data.length)
144  }
145
146  const initialize = async () => {
147    setState({ isLoading: true, isSuccess: false, data: [] })
148    await fetchNextPage()
149    setState({ isLoading: false, hasInitialFetch: true })
150  }
151
152  return {
153    getState: () => state,
154    subscribe: (listener: Listener) => {
155      listeners.add(listener)
156      return () => listeners.delete(listener)
157    },
158    fetchNextPage,
159    initialize,
160  }
161}
162
163// Empty initial state to avoid hydration errors.
164const initialState: any = {
165  data: [],
166  count: 0,
167  isSuccess: false,
168  isLoading: false,
169  isFetching: false,
170  error: null,
171  hasInitialFetch: false,
172}
173
174function useInfiniteQuery<
175  TData extends SupabaseTableData<T>,
176  T extends SupabaseTableName = SupabaseTableName,
177>(props: UseInfiniteQueryProps<T>) {
178  const storeRef = useRef(createStore<TData, T>(props))
179
180  const state = useSyncExternalStore(
181    storeRef.current.subscribe,
182    () => storeRef.current.getState(),
183    () => initialState as StoreState<TData>
184  )
185
186  useEffect(() => {
187    // Recreate store if props change
188    if (
189      storeRef.current.getState().hasInitialFetch &&
190      (props.tableName !== props.tableName ||
191        props.columns !== props.columns ||
192        props.pageSize !== props.pageSize)
193    ) {
194      storeRef.current = createStore<TData, T>(props)
195    }
196
197    if (!state.hasInitialFetch && typeof window !== 'undefined') {
198      storeRef.current.initialize()
199    }
200  }, [props.tableName, props.columns, props.pageSize, state.hasInitialFetch])
201
202  return {
203    data: state.data,
204    count: state.count,
205    isSuccess: state.isSuccess,
206    isLoading: state.isLoading,
207    isFetching: state.isFetching,
208    error: state.error,
209    hasMore: state.count > state.data.length,
210    fetchNextPage: storeRef.current.fetchNextPage,
211  }
212}
213
214export {
215  useInfiniteQuery,
216  type SupabaseQueryHandler,
217  type SupabaseTableData,
218  type SupabaseTableName,
219  type UseInfiniteQueryProps,
220}