In my copy of Gatsby Netlify CMS starter kit I've made a reusable header.js component (components/header.js) which shows my site logo and nav. Problem is my logo image won't show up, with error TypeError: Cannot read property 'childImageSharp' of null which I interpret to mean I'm querying the image path incorrectly.
I have my logo.gif image in the same components folder, and I also added it to content/assets. My static query, which I gather is specifically for querying in components, looks like this:
<StaticQuery
query={graphql`
query LogoQuery {
logo: file(absolutePath: { regex: "logo.gif" }) {
childImageSharp {
fixed(width: 500, height: 350) {
...GatsbyImageSharpFixed
}
}
}
}
`}
render={data => (
....
<Img fixed={data.logo.childImageSharp.fixed} alt="Home" />
....
I also tried relativePath, to no avail:
query LogoQuery {
logo: file(relativePath: { eq: "assets/logo.gif" }) {
childImageSharp {
fixed(width: 500, height: 350) {
...GatsbyImageSharpFixed
}
}
}
}
`}
Guessing I want absolute path since header will be in post subfolders, doesn't say anything about the 2 options in the docs though. Regardless, neither seem to work. Any guidance greatly appreciated, thanks.
ha it turns out that this just doesn't work for gifs... only jpgs and pngs. Strange!
Related
I'm want to use images from my Strapi V4 local backend to my Gatsby 4 using sharp image processing.
I was able to with Strapi 3 + Gatsby 3, but have recently upgraded to Strapi 4 and Gatsby 4 to avoid future deprecation.
This is my gatsby-config.js:
plugins: [
"gatsby-plugin-sass",
"gatsby-plugin-image",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
{
resolve: "gatsby-source-graphql",
options: {
// Arbitrary name for the remote schema Query type
typeName: "STRAPI",
// Field under which the remote schema will be accessible. You'll use this in your Gatsby query
fieldName: "strapi",
// Url to query from
url: "http://localhost:1337/graphql",
},
}
]
This is a file (page within my gatsby site) i've been testing on, it doesn't work.
import React from "react";
import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
const Test = ({ data }) => {
const image = getImage(strapi.food.data.attribute.thumbnail.data.attribute)
return (
<div>
<GatsbyImage image={image} alt={"Come on!"} />
</div>
)
}
export const pageQuery = graphql`
query FoodQuery {
strapi {
food(id: "67") {
data {
attributes {
name
thumbnail {
data {
attributes {
childImageSharp {
gatsbyImageData(width: 200)
}
}
}
}
}
}
}
}
}
`
export default Test;
The error I keep getting is.
25:17 error Cannot query field "childImageSharp" on type "STRAPI_UploadFile" graphql/template-strings
I've tried many things. I've checked to see if I can at least pull text and number fields, I can, all of them even attributes in the thumbnails object like createdAt.
I've checked to see if permissions are correct, and they seem fine - find, fineOne are both checked for the content-type and upload.
I've tried to query the uploadFile. And tried to pull food items one at a time and as a array/list of foods.
I've tried changing where I've placed childImageSharp as well as moving brackets around.
Edit: This is my GraphiQl sandbox with everything I can gather.
I'm trying to source images from Sanity with gatsby-source-sanity and gatsby-image. In the past I've had no issue querying the fluid image asset like so:
export const query = graphql`
query {
allSanityPicture {
nodes {
image {
asset {
fluid(maxWidth: 900) {
...GatsbySanityImageFluid
}
}
}
}
}
}
`;
However, for some reason the fluid and fixed fields of asset aren't showing up in GraphQL:
There's definitely an image on the node, as the url field works.
I've installed and configured my Gatsby plugins as required:
plugins: [
{
resolve: `gatsby-source-sanity`,
options: {
projectId: `mhlt1wid`,
dataset: `production`,
token: process.env.SANITY_TOKEN,
}
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
and deployed the GraphQL API with sanity graphql deploy.
What am I missing here? Have tried from scratch twice now on two fresh projects and still having the same issue.
What version of Gatsby were you using when you wrote this and what version did you downgrade to?
The GraphQL query format for Gatsby 4 has changed along with the gatsby-image component being deprecated in favor of gatsby-plugin-image.
According to this Gatsby article on migration, the older fragment-based method you use
...
image {
asset {
fluid(maxWidth: 900) {
...GatsbySanityImageFluid
}
}
...
should be replaced in favor of the new syntax passing things like layout and format to the gatsbyImageData() resolver. The 'fluid' image type and 'maxWidth' have also been replaced with CONSTRAINED (in your case, or FULL_WIDTH if you want to just allow your tag to set the width of the image) and WIDTH which is understood as a maximum width for constrained type images. So in Gatsby 4 using gatsby-plugin-image your code should look something like:
...
image {
asset {
gatsbyImageData(layout: CONSTRAINED, width: 900)
}
}
...
Here is more information about the new component and API, and here is a useful discussion of the new CONSTRAINED layout being used with width at the request.
Having an optional field on a content type in Contentful, I tried to get Gatsby-Plugin-Contentful-Optional-Fields working.
The optional field is an image, that I render with the new Gatsby-Image-Plugin. After configuring the plugin in my gatsby-config.js, I still get the following error:
There was an error in your GraphQL query:
Cannot query field "description" on type "Node".
Spent hours to solve it, with no success unfortunately. Im fairly new to developing, so for someone else, maybe just an obvious mistake. Any help is highly appreciated.
The plugin configuration in my gatsby-config.js:
{
resolve: "gatsby-plugin-contentful-optional-fields",
options: {
optionalFields: {
ContentfulNews: {
image: "Node",
},
},
},
},
My Query:
query {
allContentfulNews(sort: { fields: date, order: DESC }) {
edges {
node {
id
heading
date(formatString: "DD.MM.YYYY")
text {
childMarkdownRemark {
html
}
}
image {
gatsbyImageData(
layout: FULL_WIDTH
placeholder: BLURRED
formats: [AUTO, WEBP]
quality: 100
width: 1500
)
description
}
}
}
}
}
I'm using GraphQL from within a Gatsby project. I have a set of markdown files for a blog-like section of the site. In the frontmatter of each markdown file, there's an image property.
What I'd like to do is use Gatsby's fine image api to load the image in the frontmatter. When viewing an individual post (the ones created via createPage api), this works just fine because I can provide the frontmatter.image in the context. Here's what that query looks like.
export const pageQuery = graphql`
query($slug: String!, $image: String) {
markdownRemark(frontmatter: { slug: { eq: $slug } }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
image
}
}
coverImage: file(relativePath: { eq: $image }) {
childImageSharp {
fluid(maxWidth: 1440) {
...GatsbyImageSharpFluid
}
}
}
}
`
On my index page where I'm displaying all these posts though, I want to display a smaller version of this image. I can get the image from the front matter easy enough, but I'm not sure how to integrate that into the query.
export const pageQuery = graphql`
query {
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
edges {
node {
id
excerpt(pruneLength: 250)
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
image # <--- want to use this in a file query
}
}
}
}
}
`
As far as I understand, I can't use string interpolation in a static query in the component where the image is actually used, so I need to get it here in the page query. Is what I'm trying to do possible? Is there a better way to handle this?
This "link" between your frontmatter's image string and an actual image file node (processed with Sharp) is called a foreign-key relationship.
Creating foreign-key relationships in Gatsby
There are two ways of doing this:
Using mappings in gatsby-config.js
Using a GraphQL #link directive through Gatsby's schema customization (from v2.2)
I recommend the second option, since it's a more GraphQL way of doing things, and happens in gatsby-node.js where most node operations are taking place. However, if you're starting out with Gatsby and GraphQL, the first option might be easier to set up.
Implementing the #link directive in gatsby-node.js
In your case, using the #link GraphQL directive, you would probably end up with something like this in your gatsby-node.js:
exports.createSchemaCustomization = ({ actions }) => {
const { createTypes } = actions
const typeDefs = [
`type MarkdownRemark implements Node { frontmatter: Frontmatter }`,
`type Frontmatter {
# you may need to adapt this line depending on the node type and key
# that you want to create the relationship for
image: File #link(by: "relativePath")
}`
]
createTypes(typeDefs)
}
If you want to see an example in the wild, check out gatsby-node.js in robinmetral/eaudepoisson.com.
Query processed images via your frontmatter
Finally, you'll be able to query like this:
{
allMarkdownRemark {
edges {
node {
frontmatter {
date
slug
title
# image now points to the image file node
image {
childImageSharp {
fluid(maxWidth: 1024) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
}
I am using Gatsby v. 2.0.2. As a headless CMS I am using Strapi. I am trying to use gatsby-image, gatsby-plugin-sharp (image processing) with the pictures uploaded from Strapi.
My folder structure is:
>>projectfolder
>>api
>>public
>>uploads (here my images are located)
>>frontend (gatsby stuff)
similar to Gatsby-source-wordpress I would like to graphql query images like this:
query {
api {
projects {
image {
name
url
childImageSharp {
resize(width: 180, height: 180) {
src
}
}
}
}
}
}
If I use the exports.onCreateNode I only get the parent node "api". How can I get the image URL so that createRemoteFileNode can be used?
Do I need to write exports.createPages, graphql query the api-node and then use createNode or createNodeField to create nodes?
I have tried to use to Gatsby-source-strapi with the same problem not being able to reach Gatsby-transformer-sharp.
query {
allStrapiProject {
edges {
node {
title
image {
name
}
}
}
}
}
This has been added in a very recent pull request and will be published in the next few days on npm: https://github.com/strapi/gatsby-source-strapi/pull/24.