Gatsby MDX Graph QL Queries not displaying my posts? - graphql

Question

So it's been a while since I updated my Gatsby blog site, over 2 years and now when I updated all the packages, I noticed the markdown options have changed.
Orginally when I used this code, it would show all my blog post accurately with the correct images etc.
export const query = graphql`
{
allMdx(
filter: { fileAbsolutePath: { regex: "/posts/" } }
sort: { order: DESC, fields: frontmatter___date }
limit: 6
) {
nodes {
frontmatter {
alt
title
path
slug
date(formatString: "MMMM Do, YYYY")
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
id
}
}
}
`
However, now I tried to choose the options based on what I found from graphql that looks similar to my previous options
Here's the new updated code
export const query = graphql`
{
allMdx(
filter: { body: { regex: "/posts/" } }
sort: { order: DESC, fields: frontmatter___date }
limit: 6
) {
nodes {
frontmatter {
alt
title
path
slug
date(formatString: "MMMM Do, YYYY")
image {
childImageSharp {
gatsbyImageData(layout: FULL_WIDTH)
}
}
}
id
}
}
}
`
However, this code only displays 2 post on my home page and doesn't show any of the images when I need all 6 to display and showcase all the images.
When I run the queries in graphql it only displays the 2 blog post data so I don't know which option to choose to reshow the same things I had before I updated my site with the new versions of gatsby
Here's my gatsby-config file
plugins: [
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /static/,
},
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `GatsbyJS`,
short_name: `GatsbyJS`,
start_url: `/`,
background_color: `#f7f0eb`,
theme_color: `#a2466c`,
display: `standalone`,
icon: `src/images/fav-1.png`,
icon_options: {
purpose: `any maskable`,
},
},
},
"gatsby-plugin-offline",
`gatsby-plugin-mdx`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-styled-components`,
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-plugin-sitemap`,
options: {
query: `
{
site {
siteMetadata {
siteUrl
}
}
allSitePage {
nodes {
path
}
}
}`,
resolveSiteUrl: ({ site }) => {
//Alternatively, you may also pass in an environment variable (or any location) at the beginning of your `gatsby-config.js`.
return site.siteMetadata.siteUrl
},
serialize: ({ site, allSitePage }) =>
allSitePage.nodes.map(node => {
return {
url: `${site.siteMetadata.siteUrl}${node.path}`,
changefreq: `weekly`,
priority: 0.7,
}
}),
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/posts`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `resources`,
path: `${__dirname}/src/resources`,
},
},
// {
// resolve: "gatsby-plugin-page-creator",
// options: {
// path: `${__dirname}/src/posts`,
// },
// },
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.md`, `.mdx`],
gatsbyRemarkPlugins: [{ resolve: "gatsby-remark-images" }],
},
},
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [`nunito\:400s,700`],
display: "swap",
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: false,
noInlineHighlight: false,
languageExtensions: [
{
language: "superscript",
extend: "javascript",
definition: {
superscript_types: /(SuperType)/,
},
insertBefore: {
function: {
superscript_keywords: /(superif|superelse)/,
},
},
},
],
// Customize the prompt used in shell output
// Values below are default
prompt: {
user: "root",
host: "localhost",
global: false,
},
// By default the HTML entities <>&'" are escaped.
// Add additional HTML escapes by providing a mapping
// of HTML entities and their escape value IE: { '}': '{' }
escapeEntities: {},
},
},
],
},
},
],
UPDATE: For index.js when I use this graph ql query I can finally see my images and the last 6 blog post I set, but not sure what I was supposed to input for the frontmatter so I just left it with empty {}
{
allMdx(
filter: { frontmatter: {} }
sort: { order: DESC, fields: frontmatter___date }
limit: 6
) {
nodes {
id
frontmatter {
title
path
slug
alt
date(formatString: "MMMM Do, YYYY")
image {
childImageSharp {
fluid {
src
}
}
}
}
}
}
}