Join the Webstudio community

Updated last month

Hey everyone,I'm new to Webstudio, coming from

At a glance

A community member is new to Webstudio and is trying to dynamically filter a page based on the slug using GraphQL and Supabase. They have set up a GraphQL Resource in Webstudio, connected to Supabase, and are using a query to retrieve data. However, instead of retrieving just the matching record, it's returning the entire table.

The community members have tried various approaches, including modifying the GraphQL query, but the filtering is not working as expected. They have also tried building the query in Supabase's GraphiQL first before using it in Webstudio, but the issue persists.

The community members have received suggestions from other users, such as using a different syntax for the "where" part of the query, but they are still facing issues with the filtering. They have also been advised to delete any unused resources to improve the site's performance.

There is no explicitly marked answer in the comments, but the community members are still working to resolve the issue and find a solution that works for their specific use case.

Useful resources
Hey everyone,

I'm new to Webstudio, coming from Webflow, and I'm excited to learn! However, after three days of trying, I decided to ask for help.

I'm trying to dynamically filter a page based on the slug using GraphQL and Supabase, but instead of retrieving just the matching record, it's returning the entire table.

What I’ve done so far:
I set up a GraphQL Resource in Webstudio, connecting it to Supabase.
The query I’m using looks something like this:

query GetVacatureBySlug($slug: String!) {
vacaturesdosCollection(filter: { slug: { eq: $slug } }, first: 1) {
edges {
node {
id
title
slug
place
}
}
}
}


I’m passing { slug: system.params.slug } in the GraphQL variables.
The page URL updates correctly with the slug, but the data isn’t filtering—it just returns all records.

What’s happening:

When using system.params.slug, it doesn’t filter and just returns the whole dataset.
Any ideas on what I might be missing?

Sharelink: https://p-a01b268b-ddfb-4306-aca5-578d3895b1ec.apps.webstudio.is/?pageId=sf6h9L9gnqW28ue0zZGGM&authToken=d389f970-42ab-478c-b9ea-915b2ef6a8d5&mode=preview

Thanks in advance!
O
J
24 comments
where is your gql query?
found it, first error seems to be the query, here is how I would write the "where" part?

Plain Text
query GetVacatureBySlug($slug: String!) {
  public_vacatures(where: { slug: $slug  }) {
    slug
  }
}
error now is "message": "Could not find the 'query' column of 'vacatures' in the schema cache"
"public_vacatures" doesn't. seem to be present in the schema of your database
first thing to do is to open supabase and open graphiql and create a working query
I assume you didn't cerate the query in graphiql first and then copied it over to websutdio
regarding my suggestion on the query I could be wrong - specifically supabase may have a bit different syntax and I didn't test it
but point is, try building the query in supabase's graphiql first
Thanks! and sorry for posting in the wrong group.
I used and tested this query

query GetVacatureBySlug($slug: String!) {
vacaturesdosCollection(filter: {slug: {eq: $slug}}) {
edges {
node {
id
slug
title
}
}
}
}

and the variable

{
slug: system.params.slug
}

and that works, it returns the slug i fill in on top in this case /campingbeheer but it still returns both rows when i visit the url

https://p-a01b268b-ddfb-4306-aca5-578d3895b1ec.apps.webstudio.is/?pageId=sf6h9L9gnqW28ue0zZGGM&authToken=d389f970-42ab-478c-b9ea-915b2ef6a8d5&mode=preview

any idea what i'm doing wrong?
the query I am seeing is having _eq in your build
I see you are talking about pagename variable on thebody
its returning this and has only one item
yeah so it should only show that one right
I don't understand the problem then
So i guess i'm not filtering correctly
in the collection you are using a different variable that has nothing to do with pagename
I see, so I have the fix the collection first with the data i want to pull
also delete resources you don't use, because its still going to fetch data and slow down the site
Thanks for the tip! Happy that the slug stuff works.
Just the filters don't for me, https://[myproject].supabase.co/rest/v1/vacaturesdos \
-d "slug=eq.{system.params.slug}" should only filter on the slug right?
I got to supabase through one of your old tutorials, would you suggest a a beginner like me a different backend instead that works well with webstudio? I know that's a bit of a loaded question since you guys support so many
I don't know your requirements.
Add a reply
Sign up and join the conversation on Discord