Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

How to navigate to a [slug] loaded from a database in sveltekit

$
0
0

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'    };  }};

Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>