GraphQL API - styles missing

[angeloashmore]

Hi @andrewbranch, awesome plugin. Thank you for creating this. It seriously blows my mind that we can use VS Code extensions with Markdown.

I'm not sure if the GraphQL API is meant to be used yet as I see it on the V3 roadmap, but I'm experiencing issues using it on v2.1.2.

I'm able to successfully query for the generated HTML using the grvscCodeBlocks field via GraphQL. Unfortunately, the <style> element is not included on the first query.

If I edit a query and save, likely causing Gatsby to rerun queries, the style element is included. It's worth noting that the HTML includes the correct theme classname even if the style element is missing.

Could there be an async problem somewhere in the code? I tried to read through it but, admittedly, it's quite complex and hard to track down.

My query looks something like the following where frontmatter.poster is a File node linked to another Markdown file.

query PostTemplate($id: String!) {
  markdownRemark(id: { eq: $id }) {
    frontmatter {
      poster {
        childMarkdownRemark {
          grvscCodeBlocks {
            html
          }
        }
      }
    }
  }
}

What it looks like on the first query execution without <style>:

What it should look like:

Please let me know if you need more details. I can also help track down the issue if you can point me to the relevant part of the code. Thank you!

[andrewbranch]

If I edit a query and save, likely causing Gatsby to rerun queries, the style element is included

Really? I don’t think the style element should ever be included in that query 😅

There’s a separate top-level resolver for the stylesheet, but I should have made it a child of MarkdownRemark too. Thanks for bringing that up; I’ll add it before releasing v3.

In the meantime, you should be able to get the stylesheet content with this:

query {
  grvscStylesheet {
    css
  }
}

grvscStylesheet takes optional arguments:

• defaultTheme: String
• additionalThemes: [GRVSCThemeArgument!]
• injectStyles: Boolean

but absent those, it will use the plugin configuration in gatsby-node, which is probably what you want.

[andrewbranch]

Could there be an async problem somewhere in the code?

Yes there definitely could; if you can track down a reliable repro of the style element being included in grvscCodeBlocks { html }, I would be very interested to see that.

[angeloashmore]

TL;DR: Is childrenGrvscCodeBlock a deprecated/internal field that should be removed or not exposed?

---

Ah, I apologize, I think mixed up a previous issue I was encountering with what I shared above. I can't get it to happen again with that query so the query I was using where styles weren't present must have been different. It just visually appeared related.

That's good to know the style element isn't supposed to be part of that field. Access to the stylesheet on the node via grvscStylesheets would be helpful.

What I am able to reproduce, however, is an unresolved childrenGrvscCodeBlock field. I believe this is what I was using before where the styles were missing (sorry, I didn't commit that version of what I was working on). I didn't see until later that grvscCodeBlocks is the actual field to use, but the "children" variant is what I tried before since it shows up in GraphiQL.

Immediately after running gatsby clean to clear .cache, childrenGrvscCodeBlock is not resolvable. Gatsby prints the following message to the terminal output:

Cannot query field "childrenGrvscCodeBlock" on type "MarkdownRemark".

Once queries run a second or two later, however, it is queryable and returns the correct array of code blocks.

If I then edit the Markdown file while the development server is running, childrenGrvscCodeBlock becomes an empty array.

grvscCodeBlocks does not suffer from this issue. Both fields appear to serve the same data except the children field loses access to it at times.

Example query

query PostTemplate($id: String!) {
  markdownRemark(id: { eq: $id }) {
    frontmatter {
      poster {
        childMarkdownRemark {
          grvscCodeBlocks {
            preClassName
          }
          childrenGrvscCodeBlock {
            preClassName
          }
        }
      }
    }
  }
}

Result after gatsby clean

Result after editing the Markdown file while the server is running

[angeloashmore]

It looks like the children* fields are from Gatsby or one of the source/transform plugins and not directly created in gatsby-remark-vscode. I think it's safe to close this as I was likely just using the wrong field.

Thanks for the insight!

[andrewbranch]

Huhhh, I honestly didn’t notice that childrenGrvscCodeBlock existed. I think I have some idea of why it might be behaving badly. Maybe I can prevent it from showing up, or if I rename grvscCodeBlocks to childrenGrvscCodeBlock it will behave better. This is good info for me to investigate. Thanks!

[m1guelpf]

@andrewbranch Sorry to bother you, but childrenGrvscCodeBlock seems to be missing for the schema (in fact, there's no grvsc-related fields anymore). Did I miss anything?

[angeloashmore]

@m1guelpf I believe childrenGrvscCodeBlock is created implicitly by Gatsby and isn't actually intended to be used. grvscCodeBlocks instead should provide the correct data.