Infinite Query Hook

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