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.
Related
I have small SQLite database with products, that have relative paths to images.
I'd like to include these images to my page. I'm trying to use this query:
query {
allContent {
nodes {
Category
Description
Price
ProductID
Title
ImageURI {
childImageSharp {
gatsbyImageData(width: 200)
}
}
}
}
}
But I have this error:
Field "ImageURI" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "ImageURI". If you didn't expect "ImageURI" to be of type "String" make sure that your input source and/or plugin
is correct.
However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query in GraphiQL and use the GraphiQL explorer to see which fields
you can query and what shape they have.
It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned
"dummy content". Visit our docs to learn how you can define the schema for "undefined":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions
As I understand, I should convert String to File in my query. Is it right? If yes, how to do that?
Full code & repo to reproduce: https://github.com/vladd11/gatsby-test/blob/master/src/pages/index.js
Just query allFiles outside of allContent nodes. Like:
allFile {
edges {
node {
relativePath
childImageSharp {
gatsbyImageData(width: 200)
}
}
}
}
Don't forget to add new source of data to Gatsby Config:
{
resolve: "gatsby-source-filesystem",
options: {
path: `${__dirname}/static`, // Directory with your images
name: "images",
},
}
Find image in this directory using relative path, then load image dynamically:
getImage(data.allFile.edges.find(value => value.node.relativePath === product.ImageURI).node)
Use GatsbyImage to show this image:
<GatsbyImage alt={product.Title} image={Image}/>
I'm a newbie programmer and Recently I want to add a blog page to my website. I already have a projects page using Graphql and .md files, now my problem is, every time I try to create a blog post with .md, it appears also in my projects page, could you please advice me with some of your kind experience on solving this issue and do I have to create a separate query? even I don't know how?
this is my current query.
export const query = graphql`
query ProjectsPage {
allMarkdownRemark(sort: { fields: frontmatter___date, order: DESC }) {
nodes {
frontmatter {
slug
stack
title
thumb {
childImageSharp {
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
}
}
}
id
}
}
}
One easy thing you can do is to add a key field on your markdown files to distinguish between posts and projects. This will allow you to filter GraphQL queries. In the same way, you can also place the markdowns in separate folders and filter them using the relative/absolute path.
export const query = graphql`
query ProjectsPage {
allMarkdownRemark(filter: { frontmatter: {key: { eq: "project" }}, sort: { fields: frontmatter___date, order: DESC }) {
nodes {
frontmatter {
slug
stack
title
thumb {
childImageSharp {
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
}
}
}
id
}
}
}
As I said, this approach assumes that you have created a key: project field in your markdown files. You can do the same using key: article.
Alternatively, placing the markdowns in different folders using fileAbsolutePath/relativePath if needed in the same way. This approach will rely on your filesystem structure to determine the available paths. Both approaches are based on a filtered query, choose whatever suits you better.
Use the GraphiQL playground to test all queries, paths and filters at localhost:8000/___graphql
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 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.