Gatsby/GraphQL query to retrieve one page by slug

Developer help
1

This is for a Gatsby template. I’m familiar with JS but trying to get familiar with React.

I’m trying to retrieve data for one page (the about page), to create a custom card for it.

The reason is that I want a static block at the top of my post

I think the code should use allGhostPage like this:

    const aboutPage = await graphql(`
         {
             allGhostPage(filter: { slug: 'about' }) {
                 edges {
                    node {
                        title
                        excerpt
                        feature_image
                    }
                }
            }
        }
    `)[0]

And then I’d pass that data on to the component.

Is that OK?
Is there a way of just retrieving all the edges, in case I need them? (or is that lazy?)

And this seems a little intense — is there a more efficient way of doing it?

2

You can certainly do this, but it depends where you’re running the query. If your example is used in a template, the usage is fine, but when it’s in a component (or a non-template page), you might want to use StaticQuery instead.

See examples for that here: Querying Data in Components using StaticQuery | Gatsby

Here’s an explanation of the differences between the two query types: Querying Data in Components with the useStaticQuery Hook | Gatsby

Just be cautious with the usage of static queries, as they might slow down your build time drastically when your site is a bit bigger and/or you overdo it.

1 Like
3

Thanks so much Aileen!

Working on that now.

Just a couple of steps to go before I can migrate totally to the Gatsby front end - excited.

1 Like