Infinite Query Hook

1'use client'
2
3import { PostgrestQueryBuilder, type PostgrestClientOptions } from '@supabase/postgrest-js'
4import { type SupabaseClient } from '@supabase/supabase-js'
5import { useEffect, 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}
75
76interface StoreState<TData> {
77  data: TData[]
78  count: number
79  isSuccess: boolean
80  isLoading: boolean
81  isFetching: boolean
82  error: Error | null
83  hasInitialFetch: boolean
84}
85
86type Listener = () => void
87
88function createStore<TData extends SupabaseTableData<T>, T extends SupabaseTableName>(
89  props: UseInfiniteQueryProps<T>
90) {
91  const { tableName, columns = '*', pageSize = 20, trailingQuery } = props
92
93  let state: StoreState<TData> = {
94    data: [],
95    count: 0,
96    isSuccess: false,
97    isLoading: false,
98    isFetching: false,
99    error: null,
100    hasInitialFetch: false,
101  }
102
103  const listeners = new Set<Listener>()
104
105  const notify = () => {
106    listeners.forEach((listener) => listener())
107  }
108
109  const setState = (newState: Partial<StoreState<TData>>) => {
110    state = { ...state, ...newState }
111    notify()
112  }
113
114  const fetchPage = async (skip: number) => {
115    if (state.hasInitialFetch && (state.isFetching || state.count <= state.data.length)) return
116
117    setState({ isFetching: true })
118
119    let query = supabase
120      .from(tableName)
121      .select(columns, { count: 'exact' }) as unknown as SupabaseSelectBuilder<T>
122
123    if (trailingQuery) {
124      query = trailingQuery(query)
125    }
126    const { data: newData, count, error } = await query.range(skip, skip + pageSize - 1)
127
128    if (error) {
129      console.error('An unexpected error occurred:', error)
130      setState({ error })
131    } else {
132      setState({
133        data: [...state.data, ...(newData as TData[])],
134        count: count || 0,
135        isSuccess: true,
136        error: null,
137      })
138    }
139    setState({ isFetching: false })
140  }
141
142  const fetchNextPage = async () => {
143    if (state.isFetching) return
144    await fetchPage(state.data.length)
145  }
146
147  const initialize = async () => {
148    setState({ isLoading: true, isSuccess: false, data: [] })
149    await fetchNextPage()
150    setState({ isLoading: false, hasInitialFetch: true })
151  }
152
153  return {
154    getState: () => state,
155    subscribe: (listener: Listener) => {
156      listeners.add(listener)
157      return () => listeners.delete(listener)
158    },
159    fetchNextPage,
160    initialize,
161  }
162}
163
164// Empty initial state to avoid hydration errors.
165const initialState: any = {
166  data: [],
167  count: 0,
168  isSuccess: false,
169  isLoading: false,
170  isFetching: false,
171  error: null,
172  hasInitialFetch: false,
173}
174
175function useInfiniteQuery<
176  TData extends SupabaseTableData<T>,
177  T extends SupabaseTableName = SupabaseTableName,
178>(props: UseInfiniteQueryProps<T>) {
179  const storeRef = useRef(createStore<TData, T>(props))
180
181  const state = useSyncExternalStore(
182    storeRef.current.subscribe,
183    () => storeRef.current.getState(),
184    () => initialState as StoreState<TData>
185  )
186
187  useEffect(() => {
188    // Recreate store if props change
189    if (
190      storeRef.current.getState().hasInitialFetch &&
191      (props.tableName !== props.tableName ||
192        props.columns !== props.columns ||
193        props.pageSize !== props.pageSize)
194    ) {
195      storeRef.current = createStore<TData, T>(props)
196    }
197
198    if (!state.hasInitialFetch && typeof window !== 'undefined') {
199      storeRef.current.initialize()
200    }
201  }, [props.tableName, props.columns, props.pageSize, state.hasInitialFetch])
202
203  return {
204    data: state.data,
205    count: state.count,
206    isSuccess: state.isSuccess,
207    isLoading: state.isLoading,
208    isFetching: state.isFetching,
209    error: state.error,
210    hasMore: state.count > state.data.length,
211    fetchNextPage: storeRef.current.fetchNextPage,
212  }
213}
214
215export {
216  useInfiniteQuery,
217  type SupabaseQueryHandler,
218  type SupabaseTableData,
219  type SupabaseTableName,
220  type UseInfiniteQueryProps,
221}