CODEWITHSUNDEEP
next.jssupabase
Louis Stephens
Louis Stephens

Reputation: 105

Multiple nextjs params with supabase for dynamic routing

I have started a small project (to learn Nextjs) with supabase and have hit a small roadblock. The basic overview is I have a table for stores (name, email, address, slug) and a table for socials (FK store => stores.id, name, url) which is linked via a foreign key on store => stores.id. Each store should have a separate page in the app where I will display their information and their social accounts.

I started by creating a dynamic route [id].tsx with:

export async function getServerSideProps({ params }) {
    const { data: store, error } = await supabase
        .from('stores')
        .select('*, socials(*)')
        .eq('id', params.id)
        .single();

    if (error) {
        throw new Error(error.message);
    
    }

  return {
    props: {
        store
    },
  }
}

The above works just fine in my export default function Store ({store}) and I can see the stores information by going to localhost:3000/1 (only store set up currently). This does lead to my roadblock unfortunately. I would like the '1' to be the actual store slug (column in the stores table) like localhost:3000/lorem-ipsum but keep the relation between the two tables on the store id.

I understand that the params in my original example is id, and if I wanted the slug, I should rename my file to [slug].tsx and my params would be params.slug. Is it possible to utilize both the id and slug in my params and still have my query/route succeed?

I guess what I really want is to keep the relationship between my tables, but use the slug for querying the data (just for the url). I could make the FK the store slug, but I know it probably isnt the right move as the slug could change down the road.

Upvotes: 0

Views: 700

Answers (1)

thorwebdev
thorwebdev

Reputation: 1152

id is just a variable for whatever is in the route. If you want the route to be using the slug, you just need to change the filter to search for the slug .eq('slug', params.id)

Upvotes: 0

Related Questions