integrating optional DSG question

[3200pro]

Hi Everyone,

I'm integrating DSG into pages using a DSG field at Sanity.io. I'm also using the file API routing solution to generate the pages.

Sending it through GraphQL is fine and Gatsby is reading it, however getting the GraphQL query noticed in the DSG Config is really tripping me up. How do you either:

• Add the GraphQL to the config function
• Read the Data in the config function

Here's a working .tsx file prior to adding the reference to pageType. How would you suggest I add it in. Every process I try says 'Data undefined'

{sanitySiteRoute.slug__current}.tsx

import React from 'react'
import { graphql } from 'gatsby'
import Layout from "../components/layout"
import Seo from "../components/seo"
  
const Page = ({ data }) => {
  const { title } = data.page
return (
  <Layout>
    <Seo title="Post" />
    <h1>{title}</h1>
    
  </Layout>
)
}

export default Page 

export const query = graphql`
query($id: String) {
  page: sanitySiteRoute(id: { eq: $id }) {
  title
    slug {
      current
    }
    pageType
  }
}
`

export async function config() {
  
  const dsgPosts = true // I'd like to use a ternary here based on pageType === 'DSG'

  return ({ params }) => {
    return {
      defer: dsgPosts
    }
  }
}

[LekoArts]

Hi!

You would do a query like this:

{
  allSanitySiteRoute {
    title
    slug {
      current
    }
    pageType
  }
}

And then compare the result of params.slug__current with the results from the query.

Here's an example but with markdown, the concept is the same: https://www.gatsbyjs.com/docs/how-to/rendering-options/using-deferred-static-generation/#file-system-route-api

[3200pro]

I ran this past a few colleagues and after trying to query site.id it looks like the error may be at a Gatsby level.

[LekoArts]

It would need to be const dsgPosts = new Set(data.allSanitySiteRoute.edges.map(n => n.node.slug.current))

But if console.log(data) doesn't give you anything then I'd need a minimal reproduction of this to look at. The query should work fine

[3200pro]

Thanks. I sent over an invite to the private repo.

[LekoArts]

Thanks! I'll also need the env vars to get this running, you can email me at [email protected]

[3200pro]

Sent earlier this morning. Let me know if you didn't get them.

[LekoArts]

With this it's all working fine:

Code

import React from 'react'
import { graphql } from 'gatsby'
import Layout from "../components/layout"
import Seo from "../components/seo"
  
const Page = ({ data }) => {
  const { title } = data.page
  return (
    <Layout>
      <Seo title="Post" />
      <h1>{title}</h1>
      
    </Layout>
  )
}

export default Page 

export const query = graphql`
query($id: String) {
  page: sanitySiteRoute(id: { eq: $id }) {
    title
    slug {
      current
    }
    pageType
  }
}
`

export async function config() {
  const { data } = graphql`
    {
      allSanitySiteRoute(filter: {pageType: {eq: "DSG"}}){
        nodes {
          pageType
          slug {
            current
          }
        }
      }
    }
  `

  const dsgPosts = new Set(data.allSanitySiteRoute.nodes.map(node => node.slug.current))

  return ({ params }) => {
    return {
      defer: dsgPosts.has(params.slug__current)
    }
  }
}

The error TypeError: Cannot read property 'forEach' of undefined is coming from gatsby-plugin-typegen so I commented it out as the plugin needs fixing :)

[3200pro]

Glad to hear its a plugin outside of V4 and thanks for looking through it!