Запрос Graphql в статическом компоненте запросов Gatsby с файлом уценки - PullRequest
Новая
       28

Запрос Graphql в статическом компоненте запросов Gatsby с файлом уценки

0 голосов
/ 17 января 2019

Я пытался обернуть голову вокруг этого вопроса некоторое время и не мог разобраться с ним.

Подводя итог, я пытаюсь создать сайт Gatsby с netlify CMS. Целью CMS будет не создание или удаление страниц, а возможность редактирования содержимого различных статических страниц (например: about, home и т. Д.) *

В моем проекте Gatsby у меня в основном подключен netlify CMS, а структура файла, которую я пытаюсь достичь, примерно такая: 

myproject/
    |---src/
        |---CMS
            |---about.md
            |---index.md
        |---pages
            |---about.js
            |---index.js

Файлы уценки можно редактировать из CMS, и я хотел бы использовать эти данные в моем компоненте страниц. Я устанавливаю gatsby-markdown -mark и gatsby-source-filesystem с помощью npm install и соответствующего объявления плагинов gatsby-config.js.

Эти уценки будут выглядеть следующим образом: 

---
title: "About Page"
intro: "This is all about is"
---
We are doing this because we love it and we are good at it.

Я хотел бы получить эти данные с помощью статического запроса для использования в компоненте страницы, но не могу понять, как его настроить. 

 import React from "react"
    import { StaticQuery, graphql } from 'gatsby'

    const IndexPage = () => (
      <StaticQuery
      query = { graphql`
        query IndexPageQuery {
          mardownRemark(frontmatter: {title: {eq:"About Page"}}) {
  frontmatter {
    title
    intro
  }
}      
        
      `} 

      render={data => (
        <h1>{data.markdownRemark.frontmatter.title</h1>
        <h2>{data.markdownRemark.frontmatter.intro}</h2>
      )}
      /> 
    )

    export default IndexPage

Я пытался свести к минимуму объем кода, поскольку я действительно думаю, что моя проблема связана с запросом graphql, но извините, если это сбивает с толку. Я так же запутался.

Буду очень признателен за любую помощь, ведущую в правильном направлении. Может быть, подход не так, как это должно работать.

Спасибо.

1 Ответ

0 голосов
/ 18 января 2019

Убедитесь, что в вашем gatsby-config вы настроили gatsby-source-filesystem следующим образом (это может быть новая запись - вы можете иметь несколько gatsby-source-filesystem) 

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/CMS`, <-- your CMS folder
    name: `pages`, <-- will be your `sourceInstanceName` when you query `allFile`
  },
},

Ваш запрос выглядит нормально. Обратите внимание, что StaticQuery полезно, когда вам нужно получить некоторые данные от компонента, но в компоненте страницы вы можете использовать обычный запрос: 

import React from 'react'
import { graphql } from 'gatsby'

export default class Index extends React.Components {
  ...
}

export const pageQuery = graphql`
  query {
    markdownRemark(frontmatter: {
      title: {
        eq: "New Beginnings"
      }
    }) {
      id
      frontmatter {
        title
      }
    }
  }
`

Дайте мне знать, если это не поможет!

...