• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Błąd podczas wstawiania miniaturek do postów w Gatsby.js

0 głosów
269 wizyt
pytanie zadane 30 sierpnia 2019 w JavaScript przez Mikołaj Użytkownik (780 p.)

Witam,

Kiedy chcę wstawić zdjęcia jako miniaturki do mojego projektu, pojawia się taki błąd:

Cannot query field "timage" on type "MarkdownRemarkFrontmatter". Did you mean "title"?  graphql/template-strings

Oto kod:

index.js:

import React from "react"
import { Link, graphql, StaticQuery } from "gatsby"
import Image from "../components/image"
import SEO from "../components/seo"
import Post from "../components/Post"


const IndexPage = () => (
  <>
   <StaticQuery query={indexQuery} render={data => {
     return (
       <div>
         {data.allMarkdownRemark.edges.map(({ node }) => (
           <Post 
            title={node.frontmatter.title}
            path={node.frontmatter.path}
            body={node.excerpt}
            fluid={node.frontmatter.timage.childImageSharp.fluid}
           />
         ))}
       </div>
     )
   }}/>
  </>
)

const indexQuery = graphql`
query{
  allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }){
    edges{
      node{
        id
        frontmatter{
          title
          path
          date
          timage{
            childImageSharp{
              fluid{
                ...GatbyImageSharpFluid
              }
            }
          }
        }
        excerpt
      }
    }
  }
}
`;

export default IndexPage

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: `markdown-pages`,
      },
    },
    `gatsby-transformer-remark`,
    
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#2B60DE`,
        theme_color: `#2B60DE`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

Kod postu:

---
title: "FIrst post - introduction"
date: "2017-11-07"
path: "/first-post"
timage: ../../images/travisscott.jpg
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel ullamcorper dui. Nam ut aliquam nisi, at rutrum metus. Nunc.

Z góry dziękuję za pomoc!

1 odpowiedź

0 głosów
odpowiedź 27 marca 2021 przez niezalogowany

Podobne pytania

0 głosów
1 odpowiedź 653 wizyt
pytanie zadane 1 lipca 2019 w JavaScript przez kralcz88 Obywatel (1,810 p.)
0 głosów
1 odpowiedź 358 wizyt
pytanie zadane 26 października 2020 w HTML i CSS przez Stoprocent Użytkownik (930 p.)
–1 głos
0 odpowiedzi 163 wizyt

93,743 zapytań

142,682 odpowiedzi

323,299 komentarzy

63,330 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

...