✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Querying Sanity data in Gatsby and dynamically filtering by page slug

13 replies
Last updated: Nov 16, 2020
Hi guys how are you, I have a doubt concerning sanity + Gatsby. I have created a "Page" schema in Sanity, and added a slug field, so let's say I have a Product page with a "product" slug

Now in gatsby, I have some pages which I am not generating via templates, as they are quite different from each other.
In this page, I am using the following query

`export const query = graphql``

query {

pageData: sanityPage(slug: { current: { eq: "product" } }) {

id

seoTitle

intro {

title

logo

}

}

}
```

With which I am able to filter through Sanity page data, hardcoding the "product" slug in graphql filter.

But I don't really know how can I do this query getting each page slug from gatsby, as I am currently not generating them via gatsby-node


Any tips?
Nov 16, 2020, 3:35 PM
I’m not sure I understand what you’re trying to do. Are you trying to dynamically generate a page in Gatsby for every “Page” document you have in Sanity?
Nov 16, 2020, 3:48 PM
No, quite the contrary, I am not generating them dynamically in gatsby
In my "Page" document in Sanity, let's say i have a "product" and a" pricing" document, and they have a title field and a slug field.

So, in Gatsby, in /pages, i have a "product" file, I want to bring my title field only concerning to my "product" page, filtering out the rest

In order to do this, I reckoned I could do it filtering by slug. So I did that graphql query and it works

My question, more related to gatsby I think, would be, how can I dinamically get every page slug, in order to work out that filter
Nov 16, 2020, 3:54 PM
I hope I am a bit clearer now
Nov 16, 2020, 3:54 PM
Does something like this not work?
{
  allSanityPage(
    filter: {
      slug: {current: {eq: "product"}}
    }
  ) {
    edges {
      node {
        id
        seoTitle
        intro
      }
    }
  }
}
Nov 16, 2020, 5:17 PM
Hello Patrick, thank you for your response, yes, that does work
But my problem is that I would like not to hardcode that "eq: product", so my doubt is how do I get my current page slug in gatsby, so I can use it in that query dynamically instead of hardcode it
Nov 16, 2020, 5:19 PM
do I make sense?
Nov 16, 2020, 5:19 PM
Something like..
`export const query = graphql``

query($slug: String!) {

pageData: sanityPage(slug: { current: { eq: $slug } }) {

id

seoTitle

intro {

title

logo

}

}

}
```

I don't know how would I do to get this $slug on each of my pages
Nov 16, 2020, 5:21 PM
You could use the path variable that created on the contex object for the Gatsby pages
Nov 16, 2020, 5:22 PM
Do I have access to this context even if I didn't dynamically created the pages via gatby-node?
Nov 16, 2020, 5:24 PM
I just created each page on gatsby /pages folder
Nov 16, 2020, 5:24 PM
Yeah you should be able to access the $path variable inside of the page query for each of those pages
Nov 16, 2020, 5:24 PM
Alright, I will check it out
Nov 16, 2020, 5:24 PM
thanks!
Nov 16, 2020, 5:24 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?