Infinite Query for Vue and Supabase

1import { PostgrestQueryBuilder, type PostgrestClientOptions } from '@supabase/postgrest-js'
2import { type SupabaseClient } from '@supabase/supabase-js'
3import { computed, onMounted, reactive, toRefs, watch } from 'vue'
4 
5// @ts-ignore
6import { createClient } from '@/lib/supabase/client'
7 
8const supabase = createClient()
9 
10type SupabaseClientType = typeof supabase
11 
12type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N
13 
14type Database =
15  SupabaseClientType extends SupabaseClient<infer U>
16    ? IfAny<
17        U,
18        {
19          public: {
20            Tables: Record<string, any>
21            Views: Record<string, any>
22            Functions: Record<string, any>
23          }
24        },
25        U
26      >
27    : {
28        public: {
29          Tables: Record<string, any>
30          Views: Record<string, any>
31          Functions: Record<string, any>
32        }
33      }
34 
35type DatabaseSchema = Database['public']
36type SupabaseTableName = keyof DatabaseSchema['Tables']
37type SupabaseTableData<T extends SupabaseTableName> = DatabaseSchema['Tables'][T]['Row']
38 
39type DefaultClientOptions = PostgrestClientOptions
40 
41type SupabaseSelectBuilder<T extends SupabaseTableName> = ReturnType<
42  PostgrestQueryBuilder<
43    DefaultClientOptions,
44    DatabaseSchema,
45    DatabaseSchema['Tables'][T],
46    T
47  >['select']
48>
49 
50export type SupabaseQueryHandler<T extends SupabaseTableName> = (
51  query: SupabaseSelectBuilder<T>
52) => SupabaseSelectBuilder<T>
53 
54export interface UseInfiniteQueryProps<T extends SupabaseTableName> {
55  tableName: T
56  columns?: string
57  pageSize?: number
58  trailingQuery?: SupabaseQueryHandler<T>
59}
60 
61interface State<TData> {
62  data: TData[]
63  count: number
64  isSuccess: boolean
65  isLoading: boolean
66  isFetching: boolean
67  error: Error | null
68  hasInitialFetch: boolean
69  requestCounter: number
70}
71 
72// --------------------
73// Composable
74// --------------------
75 
76export function useInfiniteQuery<
77  TData extends SupabaseTableData<T>,
78  T extends SupabaseTableName = SupabaseTableName,
79>(props: UseInfiniteQueryProps<T>) {
80  const state = reactive<State<TData>>({
81    data: [],
82    count: 0,
83    isSuccess: false,
84    isLoading: false,
85    isFetching: false,
86    error: null,
87    hasInitialFetch: false,
88    requestCounter: 0,
89  })
90 
91  const pageSize = computed(() => props.pageSize ?? 20)
92  const columns = computed(() => props.columns ?? '*')
93 
94  const fetchPage = async (skip: number) => {
95    // Capture the current request token to validate this request later
96// … truncated