I am still pretty new to Sveltekit and Supabase but I want to make a website that grabs data from a table in Supabase and using a slug to navigate to a different url depending on what the user inputs in a simple form. Currently it works just fine when I run it locally but as soon as I push it to Github pages it throws a 404 error.
This is how I am currently navigating to the page.
// Search supabase for keyword async function searchDatabase() { // Checks to see if form is empty upon submission if (topic.trim() === '') { help = 'The form is empty. Please enter a fruit. (hint: enter "Apple")'; return; } // Finds the desired keyword in supabase table const { data, error } = await supabase .from('Topics') .select('Description') .eq('Topic', topic); console.log('Search result:', { data, error }); if (error) { console.error('Error fetching data:', error); help = `Error fetching data: ${error.message}`; } else if (data.length === 0) { help = 'We could not find this fruit. Try again.'; } else { goto(`${base}/${topic}`); } }
And this is how I am handling loading the page.
import type { TopicData } from '$lib/types';import { supabase } from '$lib/supabaseClient';import type { PageServerLoad } from './$types';export const load: PageServerLoad = async ({ params }) => { const { slug } = params; console.log('Fetching data for slug:', slug); try { const { data, error } = await supabase .from('Topics') .select('Topic, Description') .eq('Topic', slug) .single(); if (error || !data) { console.error('Error fetching data from Supabase:', error ? error.message : 'No data found'); return { error: 'Not found' }; } console.log('Data fetched successfully:', data); return { topic: data.Topic, description: data.Description }; } catch (err) { console.error('Unexpected error:', err); return { status: 500, error: 'Internal Server Error' }; }};