Title: Dynamic List with Caching and Infinite Scroll (Supabase)
Description: Create a React component that dynamically fetches and caches data from Supabase using hooks. The component should:
Show a loader with "Fetching data..." before loading.
Fetch the first 10 records initially from a Supabase table.
If fetching fails, display a dialog with the error message and a retry button to refetch only the failed request.
If fetching succeeds, display the list of records.
Include a "Load More" button that fetches the next 10 records, while keeping previously fetched data cached.
Use React hooks for state management, caching, and API handling.
The data should persist across re-renders, avoiding unnecessary API calls. Implement proper UI handling for loading, error, and data display states.
the below is my table columns -id ,serial not null, -name ,text not null, -description, text null, -price, numeric not null,
I'll create a solution that implements all the requirements using React hooks for state management and Supabase for data fetching. The component will include caching, error handling, and infinite scrolling capabilities.
The implementation meets all your requirements:
Caching and Fetching Logic:
useProducts hook maintains a cache of fetched pages using a Set to track which pages have already been loaded.Loading States:
Error Handling:
Pagination and "Load More":
Data Structure:
To use this in your project, make sure you have:
Set up proper environment variables:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEYInstalled the necessary dependencies:
@supabase/supabase-jsThis implementation provides a solid foundation that you can easily extend with additional features like filtering, sorting, or search capabilities.
Please make sure to add the following environment variables to your project:
Great! Now that you have the environment variables set up, your dynamic list with caching and infinite scroll functionality should work properly with Supabase. Let's make sure everything is ready to go.
Test the Implementation:
products with the columns you specified (id, name, description, price).useProducts hook.Add Sample Data:
Verify Row-Level Security (RLS):
Here are some ways you might want to customize the implementation:
Search Functionality:
// Add to hooks/use-products.ts
const searchProducts = useCallback(async (query: string) => {
setState(prev => ({ ...prev, isLoading: true, error: null }));
try {
const { data, error } = await supabase
.from('products')
.select('*')
.ilike('name', `%${query}%`)
.limit(ITEMS_PER_PAGE);
if (error) throw new Error(error.message);
setState({
data: data,
isLoading: false,
error: null,
hasMore: data.length === ITEMS_PER_PAGE,
});
// Reset pagination
pageRef.current = 0;
fetchedPagesCacheRef.current = new Set([0]);
} catch (error) {
setState(prev => ({
...prev,
isLoading: false,
error: error instanceof Error ? error : new Error('An unknown error occurred'),
}));
}
}, []);Sorting Options:
// Add to hooks/use-products.ts
type SortField = 'name' | 'price' | 'id';
type SortOrder = 'asc' | 'desc';
const sortProducts = useCallback(async (field: SortField, order: SortOrder) => {
setState(prev => ({ ...prev, isLoading: true, error: null }));
try {
const { data, error } = await supabase
.from('products')
.select('*')
.order(field, { ascending: order === 'asc' })
.limit(ITEMS_PER_PAGE);
if (error) throw new Error(error.message);
setState({
data: data,
isLoading: false,
error: null,
hasMore: data.length === ITEMS_PER_PAGE,
});
// Reset pagination
pageRef.current = 0;
fetchedPagesCacheRef.current = new Set([0]);
} catch (error) {
setState(prev => ({
...prev,
isLoading: false,
error: error instanceof Error ? error : new Error('An unknown error occurred'),
}));
}
}, []);Filtering by Price Range:
// Add to hooks/use-products.ts
const filterByPriceRange = useCallback(async (minPrice: number, maxPrice: number) => {
setState(prev => ({ ...prev, isLoading: true, error: null }));
try {
const { data, error } = await supabase
.from('products')
.select('*')
.gte('price', minPrice)
.lte('price', maxPrice)
.limit(ITEMS_PER_PAGE);
if (error) throw new Error(error.message);
setState({
data: data,
isLoading: false,
error: null,
hasMore: data.length === ITEMS_PER_PAGE,
});
// Reset pagination
pageRef.current = 0;
fetchedPagesCacheRef.current = new Set([0]);
} catch (error) {
setState(prev => ({
...prev,
isLoading: false,
error: error instanceof Error ? error : new Error('An unknown error occurred'),
}));
}
}, []);react-window or react-virtualized to improve performance.Your implementation is now ready to use! The component will fetch data from Supabase, handle loading and error states, and provide infinite scrolling with proper caching to avoid unnecessary API calls.