Gatsby: Filter comments to WordPress post in GraphQL query

[joshuaiz]

Hello,

First, thanks for your amazing work on this project! It is really incredible and inspiring.

Summary

Using gatsby-source-wordpress and trying to grab the comments for a specific post dynamically and not having any luck filtering them when on a specific post template.

Relevant information

Here is my query code:

export const pageQuery = graphql`
    query($id: String!) {
        wordpressPost(id: { eq: $id }) {
            id
            wordpress_id
            title
            slug
            date(formatString: "MMMM DD, YYYY")
            content
            excerpt
        }
        allWordpressWpComments(filter: {post: {eq: $wordpressPostId}}) {
            edges {
                node {
                    id
                    wordpress_id
                    post
                    author
                    author_name
                    author_url
                    date(formatString: "MMMM DD, YYYY")
                    content
                }
            }
        }
    }
`

^^ In the above, what do I put where it says $wordpressPostId?? I want to grab the same wordpress_id as the above post that's being queried thus this will grab any comments attached to the post.

Does that make sense? Or is there a better way to do this?

[btk]

Well, $id is actually what you are looking for I guess, you are actually querying the post by its ID, so the Id of the post you want to show comments of is in fact $id;

So;
~JS
export const pageQuery = graphql query($id: String!) { wordpressPost(id: { eq: $id }) { id wordpress_id title slug date(formatString: "MMMM DD, YYYY") content excerpt } allWordpressWpComments(filter: {post: {eq: $id}}) { edges { node { id wordpress_id post author author_name author_url date(formatString: "MMMM DD, YYYY") content } } } }
~

Hope it makes sense.

[joshuaiz]

@btk I need to match the wordpress_id in the Post query to the post value in the Comments query not the $id.

The $id is provided by the _schema_ and the context and is not the WordPress postId. Thus a post will have a different id than a comment since each item returned by GraphQL has a unique id — I checked this already.

That is exactly why this is tricky. I need to get the current wordpress_id from the Post query and then grab the comment(s) that have a post value equal to that wordpress_id.

That will give me all of the comments attached to that post. Does that make sense?

[btk]

I was imagining you were querying using the wordpress id, didn't notice. In that case you can use the page context;

gatsby-node.js

            createPage({
              path: `/${edge.node.slug}/`,
              component: slash(postTemplate),
              context: {
                id: edge.node.id,
                postId: edge.node.wordpress_id
              },
            })

For example, here, I passed the postId to this page as context, then in your graphql, you can use this context like this;

export const pageQuery = graphql`
    query($id: String!, $postId: Int!) {
        wordpressPost(id: { eq: $id }) {
            id
            wordpress_id
            title
            slug
            date(formatString: "MMMM DD, YYYY")
            content
            excerpt
        }
        allWordpressWpComments(filter: {post: {eq: $postId}}) {
            edges {
                node {
                    id
                    wordpress_id
                    post
                    author
                    author_name
                    author_url
                    date(formatString: "MMMM DD, YYYY")
                    content
                }
            }
        }
    }
`

Here is the documentation;

https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#pass-context-to-pages

[joshuaiz]

@btk This is brilliant - thank you! This works perfectly.

I didn't know you could just add what you need to the context like that. That opens up a world of possibilities.

Hopefully this will help someone else.

[btk]

Yes, the title has good SEO capability :)