i am trying to develop a blog site for myself.and i decided to make it with gatsby and contentful. and i followed this tutorial
query code
query MyQuery {
allContentfulBlogPost {
edges {
node {
author {
name
}
createdAt
body {
body
}
title
featuredImage {
file {
url
}
}
}
}
}
}
output :
"message": "Cannot query field \"featuredImage\" on type \"ContentfulBlogPost\".",
why featuredImage does not appear in allContentfulBlogPost ? and how can i find it ?
my gatsby-config.js file:
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-image`,
`gatsby-transformer-remark`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 740,
wrapperStyle: `margin-bottom: 2.2rem;`,
},
},
i already added gatsby-image and gatsby-remark-images but it didnt help.
if you have any idea about this topic please respond.
any response would be appreciated
Gatsby provides GraphQL to fetch data without remark.
import { graphql } from "gatsby"
export const pageQuery = graphql`
query BlogPostBySlug($slug: String!) {
contentfulBlog(slug: { eq: $slug }) {
blogTitle
blogImage {
fluid (maxWidth: 500) {
...GatsbyContentfulFluid_withWebp
}
title
resize {
src
width
height
}
}
}
}
`
As you can see the query, you can fetch images using fluid or fixed.
I fetched image using fluid and webp since webp image type is a perfect choice for Lighthouse score.
And use Img tag(not img) to display image.
<Img fluid={post.blogImage.fluid} alt={post.blogImage.title} />
https://www.gatsbyjs.org/packages/gatsby-image/
The issue comes from Contentful side, it breaks before reaching your Gatsby app (when gathering data) that's why your gatsby-remark-images doesn't fix it.
When dealing with images in Contentful you must upload a dummy image for your new schema (featuredImage). Just an image to be retrieved with GraphQL query. Afterwards you can replace this image for your definitive content.
This is because internally, GraphQL schema is not able to infer the type of an image (it may happen with other fields too of other types) if you don't upload it at least once for your allContentfulBlogPost content model. It's a known bug that must be bypassed by this way until they fix it.
Related
I am building a basic site with Gatsby and have connected it to Contentful. I uploaded 2 assets to Contentful:
First asset looks like:
The second asset is 100% identical other than the title which is test-two.
If I use the about query and pass in the URL into an img tag, my image will display. However, I am trying to use GatsbyImage and can't seem to figure out the problem.
I've been trying to follow this tutorial and using but I am unable to get anything to render. How does my query need to change in order to use gatsby-image?
In this case, you are querying for the url, filename and contentType. To be able to use GatsbyImage you need to query the node created from Gatsby (which is gatsbyImageData) it should be contained in the name of the Contentful asset node. Something like:
{
allContentfulAsset {
edges {
node {
test {
title
gatsbyImageData(layout: CONSTRAINED)
}
}
}
}
}
Check for the created nodes in the GraphiQL playground (localhost:8000/___graphql).
Once done, in your component, you should be able to do something like:
import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
function SomePage({ data }) {
const image = getImage(data.allContentfulAsset.test)
return (
<section>
<GatsbyImage image={image} alt={`Some alt text`} />
</section>
)
}
export const pageQuery = graphql`
query {
allContentfulAsset {
edges {
node {
test {
title
gatsbyImageData(layout: CONSTRAINED)
}
}
}
}
}
`
If the node doesn't appear, check your configurations in the gatsby-config.js file.
⚠️ Disclaimer
Watch out, the tutorial you are trying to use is using gatsby-image (from Gatsby v2 backward), where the rendered component is Img, imported from gatsby-image while you are using GatsbyImage (from Gatsby v3 onwards), imported from gatsby-plugin-image. The first one is deprecated and the query structure is slightly different. As you can see at the top of the guide you shared:
The gatsby-image package is now deprecated. The new Gatsby image
plugin has better performance, cool new features and a simpler
API. See the migration guide to learn how to upgrade.
I am trying to create a SEO component for all of my posts in my GatsbyJS build. The site is built with gatsby-source-graphql as well as WPGraphQL WordPress plugin on my WP installation. For my SEO component am I trying to use WPGraphQl Yoast SEO Plugin.
I am querying meta description etc. in a fragment and then passing this information in a React helmet using an SEO component.
This kinda works and is querying the metadescription when I console.log. My problem is now that it will only return metaDesc for the first post and is, therefore, passing the same metaDesc to all of my posts.
If I pass in a filter it will display the correct metadescription:
query MyQuery {
wpgraphql {
posts(where: {id: 608}) {
edges {
node {
seo {
metaDesc
title
}
}
}
}
}
}
During createPosts I figured I needed to add some kind of dynamic filter that would only query for specific ID so I tried the following:
query MyQuery {
wpgraphql {
posts(where: {id: ${id}}) {
edges {
node {
seo {
metaDesc
title
}
}
}
}
}
}
However, this solution is giving me an error: String interpolations are not allowed in graphql fragments.. I am therefore looking for a solution on how I could pass in the right metaDescription for each individual posts instead of the current situation where it will only pass metaDesc of the first post.
You can find my repo here
I am starting to use Gatsby Minimal Starter Blog by LekoArts and Github repo. Currently only 3 latest posts can be displayed in the home page. Can i know how to increase it like from 3 to 30. I don't see any settings for that.
It's defined in the graphql query in homepage-query.tsx:
export const query = graphql`
query($formatString: String!) {
allPost(sort: { fields: date, order: DESC }, limit: 3) {
nodes {
slug
title
date(formatString: $formatString)
excerpt
timeToRead
description
tags {
name
slug
}
}
}
}
`
which is used by gatsby-node.js in gatsby-theme-minimal-blog-core (a dependency).
const homepageTemplate = require.resolve(`./src/templates/homepage-query.tsx`)
I'm building portfolio site with Gatsby+Wordpress combination. If I run this setup locally or at Github pages everything seems to look normal when using desktop/laptop. If I visit site which is published to Github pages and view with mobile device images aren't showing at all.
I found this solution and added it to my gatsby-node.js like this:
const _ = require(`lodash`)
const Promise = require(`bluebird`)
const path = require(`path`)
const slash = require(`slash`)
// This is the solution I found but it's not working in my case
// ----------
if (process.env.NODE_ENV === "development") {
process.env.GATSBY_WEBPACK_PUBLICPATH = "/"
}
// ----------
exports.createPages = ({ graphql, actions }) => {
...
I didn't found any other solutions and it seems that I can't solve it by myself.
Link to site
Link to repo
Hopefully I provided enough information so you can catch the idea, if not ask and I tell more. Thanks in advance!
I got this working by changing the way I query images. At first I used for example this:
query {
wordpressWpPortfolio {
acf {
portfolio_gallery {
source_url
}...
This produced wrong kind of URLs for images. Images pointed to my localhost instead of folder inside my repo.
I changed query method to this:
query {
wordpressWpPortfolio {
acf {
portfolio_gallery {
localFile {
childImageSharp {
fluid(maxWidth: 500, quality: 100) {
src
srcSet
aspectRatio
sizes
base64
}...
This query for gatsby-image had to be done manually because gatsby-config.js doesn't support fragments like:
fixed(width: 300, height: 300) {
...GatsbyImageSharpFixed
}
This line in your gatsby config looks to be the issue: baseUrl: "localhost:8888/robertsalmi.fi",
I suspect the wordpress plugin uses that to prefix all the images, as your live site is showing them all with that base url. You'll need to provide the correct base, so it can build the image links properly.
I'm new to Gatsby, and making my best to learn it (along with React, in which I have no prior knowledge either). I'd like to create a single page getting data from one or several markdown files.
For now I'm testing it out with just Gatsby, in order to later reproduce that technique with Netlify CMS markdown files (and be able to update the page texts with Netlify CMS admin panel).
So far, I've managed to add markdown pages to Gatsby, thanks to this tutorial. But this method only creates dynamic pages, which is far more complex than what I need.
Is there a simple way to import one specific markdown file, let's say src/markdowns/hero-texts.md, in (let's also say) pages/index.js, and then call data with their frontmatter tags, in the cleanest way as possible?
I've tried countless researches on Google just to find which plugin or coding term would handle that, without success. I totally get some of the explanations above may be full of technical misunderstandings, sorry for that...
You have a markdown file called hero-texts.md and you want to be able to query its frontmatter content.
Install the plugins gatsby-transformer-remark and gatsby-source-filesystem and setup the gatsby-source-filesystem options to find your markdown files.
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `markdown`,
path: `${__dirname}/src/markdowns/`
}
},
`gatsby-transformer-remark`
]
}
You could make a graphql page query like this inside index.js (then the result of the query is automatically added to your index component under props.data)
// src/pages/index.js
import React from "react"
import { graphql } from "gatsby"
const IndexPage = ({data}) => {
return (
<>
<p>{data.markdownRemark.frontmatter.author}</p>
<p>{data.markdownRemark.frontmatter.date}</p>
<p>{data.markdownRemark.frontmatter.title}</p>
</>
)}
export default IndexPage
export const pageQuery = graphql`
query IndexPageQuery {
markdownRemark(fileAbsolutePath: { regex: "/hero-texts.md/" }) {
frontmatter {
author
date
title
}
}
}
`
It will perform the graphql query at build time, and add the result of the query to the data prop of the IndexPage page component.
So in effect, pulling in all the frontmatter fields from a markdown file that looked like this.
// src/markdowns/hero-texts.md
---
title: "Gatsby + Markdown: How to simply get data from a specific markdown in a single page?"
author: Florent Despinoy
date: 2019-08-06
---
# This is my markdown post
The content of this markdown file would not be queried by pageQuery (only the frontmatter would)