Join the Webstudio community

Updated 7 months ago

Dynamic URLs with Supabase

At a glance

The community member is trying to use Supabase as a CMS and is having trouble creating dynamic URLs. They successfully got data onto the page from Supabase, but the Webstudio video they watched didn't mention how to achieve this. They tried using GraphQL to map a slug field, but are stuck. The comments suggest using URL queries or parameters instead of GraphQL, and provide a sample curl request for creating dynamic pages based on the URL slug. However, there is no explicitly marked answer in the comments.

Useful resources
The Supabase with Webstudio video you guys did was great to get me started, I've successfully got data onto the page from Supabase, with no database experience.

But it didn't mention how to get dynamic URLs.

From the Wordpress video, I know its something to do with putting :slug in the URL, and generating GraphQL to somehow map a slug field to SLUG

But I'm stuck after trying so many different things. Any tips please?
1
R
M
O
13 comments
I've been using this, but it rejects everything I've tried https://app.supabase.com/project/_/api/graphiql
What are you doing to achieve exactly? What is the use case? A CMS with Supabase?
You don't necessarily need to use graphql for this but you do need to use the URL query or parameter and pass it to the database query no matter if it's a rest or graphql query
Take any simple example that we have demonstrated in the video using either way and replicate it first before making anything custom. Especially because we don't see what you have done, we cannot help you
Hey, thanks I didn't expect you guys to respond so quickly, was going to post more!
Yes, I'm trying to use Supabase as a CMS

I'm getting somewhere with ChatGPT helping me with Supabase, this graphQL is giving a valid response:

{
citiesCollection {
edges {
node {
Slug
}
}
}
}

It wasn't clear that I needed to add "Collection" to "cities" to get "citiesCollection". In the GUI it was just called the Cities table

Will post more in a bit
This isn't enough, read our gql query from the video first before making a custom one
You will also have more use of gpt by providing something that works first, then asking for changes
Thanks, there's no video on Supabase that includes making dynamic URLs

But looks like I've passed the slug parameter to the graphql query

I'm not clear on how this makes new pages, I was hoping to see 100+ city pages that are in that citiesCollection

Appreciate you can't see, but your text was helpful
Attachment
image.png
Not sure if you got what you needed, in any case, learn the gql syntax from any example we provide first, doesn't matter which platform supabase or not
I think we have graphql with hygraph
its the same thing, just diferent collection names and fields
learn how to use it on principle
Just went through this: here is how to create a curl request for creating a "resource" variable for the dynamic pages for supabase:

If you're using Supabase as your CMS and need to create a dynamic blog post page, here’s the simple way to set up the filter for pulling data based on the URL slug.

Use this in your API request:

'https://[SUPABASE_PROJECT_ID].supabase.co/rest/v1/Posts?[YOUR_COLUMN_NAME]=eq.${system.params.[YOUR_DYNAMIC_PATH]}&select=*'

Replace [SUPABASE_PROJECT_ID] with your unique project ID. (can find in api documents: it's the first numbers)

Also: ' at the front and end of it all is a backtick. To type a backtick on a Windows computer, you can use the keyboard shortcut Alt + 96
Add a reply
Sign up and join the conversation on Discord