Grabbing data from Netlify CMS folder - reactjs

Question

I have successfully linked the netlify cms backend to my react frontend, however now my main problem is figuring out how to display said data from its folder _posts to my react frontend.
MySite
| _posts
| blog
/2020-06-23-my-post.md
| public
config.yml
backend:
name: git-gateway
branch: master
media_folder: "public/images" # Media files will be stored in the repo under static/images/uploads
public_folder: "/images"
collections:
- name: "blog" # Used in routes, e.g., /admin/collections/blog
label: "Blog" # Used in the UI
folder: "_posts/blog" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Featured Image", name: "thumbnail", widget: "image"}
- {label: "Rating (scale of 1-5)", name: "rating", widget: "number"}
- {label: "Body", name: "body", widget: "markdown"}

Answer 1

Assume you have set your static/admin/config.yml for blog post like below
backend:
name: github
repo: ozluy/destan-nakliyat-gatsby
branch: master
media_folder: static/assets
public_folder: /assets
site_url: https://destan-nakliyat.netlify.app
collections:
- name: post
label: Post
folder: post
create: true
fields:
- { name: path, label: Path }
- { name: date, label: Date, widget: datetime }
- { name: title, label: Title }
- { name: body, label: Body, widget: markdown }
with gatsby-source-filesystem plugin you can use set your plugin settings as below in gatsby-config.js like this:
plugins: [
...,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/post/`,
},
},
finally you can access saved post files through GraphQL as below:
{
allFile {
edges {
node {
extension
dir
modifiedTime
}
}
}
}