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 '@/registry/default/fixtures/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// … truncated