How can we fetch blog posts and pages from Shopify Headless in Gatsby with gatsby-source-shopify plugin?

Question

I am planning to migrate my site from Shopify to Shopify Headless + Gatsby but I am having a problem with the plugin, gatsby-source-shopify. It can create nodes for products and product related data but not blog posts. Is there any way to get blog posts or do I have to create them manually in Gatsby.

Here is my configuration for gatsby-source-shopify plugin.

      resolve: `gatsby-source-shopify`,
      options: {
        password: process.env.GATSBY_SHOPIFY_PASSWORD,
        storeUrl: process.env.GATSBY_SHOPIFY_STORE_URL,
        shopifyConnections: ["collections"],
      },
    },

It gives products and product related nodes in GraphQL.
Available Nodes in GraphQL Screenshot

I try googling but all of the tutorials and gatsby-source-shopify documentation focus on retrieving product data.

Thank you guys.

I'm thinking about using Shopify with Gatsby as well, and have been wondering about this too. Have you found any solution? — May 24, 2022 at 0:29
Yeah, sorry for late and I found a solution. In my case, I create a simple source plugin to fetch data and inserting them into gatsby graphql data layer. Here is the reference – gatsbyjs.com/docs/how-to/plugins-and-themes/…. To fetch Blog Posts and Pages, you can use Shopify storefront API. You can also play with Storefront API with GraphQL app ( shopify-graphiql-app.shopifycloud.com/login ) — Jun 23, 2022 at 6:23
If you're very lazy, you could fork the gatsby-source-shopify plugin v6 and use that alongside the main v7 one, as articles/blogs were only removed from v7 — Oct 3, 2022 at 15:19

score 0 · Accepted Answer · 2023-10-19 04:41:29Z

You first have to make sure your env file has all the right credentials to make a connection to your custom app that you have created in Shopify is correct.

my env file:

image of env file

Now according to Gatsby documentation, we have to make a new source and let’s call it a “storefront”. Your Gatsby-config.js file should look like this.

image of gatsby-config.js

Run “Gatsby clean” and then Gatsby develop command in the terminal for your Gatsby. If everything goes right. You should be able to open https://localhost:8000/___graphql or whatever port you are running on (you can find that information in the terminal)

terminal image

Open https://localhost:8000/___graphql and you should be able to see the storefront in Explorer.

localhost graphql

Create a query and fetch it, I have done one that works for me

query check

How can we fetch blog posts and pages from Shopify Headless in Gatsby with gatsby-source-shopify plugin?