Next.js Conf 2024: Your app should be Live by Default – Watch Keynote

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?