View demo
Gives graphQL an addition 2 new queries
- file()
- allFile())
npm install --save gatsby-source-filesystem
Adding file path for a query (file path for images folder)
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/images`,
name: `images`,
},
query {
allFile(filter: { sourceInstanceName: {eq: "images"} }) {
edges {
node {
relativePath
}
}
}
}
import { useStaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'
const data = useStaticQuery(graphql`
{
pexels: file(relativePath: { eq: "index/pexels.jpeg" }) {
childImageSharp {
fluid(maxWidth: 1980) {
...GatsbyImageSharpFluid
}
}
}
}
`)
console.log(data)
const image = data.pexels
// use image
<Img fluid={image.childImageSharp.fluid} />
npm install --save gatsby-transformer-remark
Gives graphQL an addition 2 new queries
- markdownRemark() - fetch individual post
- allMarkdownRemark() fetching list of posts
Adding images
npm install --save gatsby-remark-images gatsby-plugin-sharp
graphQL query
query {
allContentfulBlogPost (
sort:{
fields: publishedDate,
order: DESC
}
) {
edges {
node {
title
slug
publishedDate(formatString: "MMMM Do, YYYY")
body {
json
}
}
}
}
}
Parse the json from contentful
npm i @contentful/rich-text-react-renderer
add import to component
import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
SSR data added to components, e.g. title, meta attributes, etc.
npm install --save gatsby-plugin-react-helmet react-helmet