Gatsby/GraphQL query to retrieve one page by slug

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 {

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?

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:

Here’s an explanation of the differences between the two query types:

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

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