Гэтсби и Graphql - Как отфильтровать все MarkdownRemark по папке - PullRequest
1 голос
/ 19 сентября 2019

Я использую Gatsby и MarkdownRemark.Я хочу запросить файлы уценки, а затем отфильтровать их до файлов, содержащихся в подкаталоге.Моя структура папок выглядит следующим образом:

- src
 - pages
   -index.md
   -about.md
   - team
    - team_member_1.md
    - team_member_2.md
    - team_member_3.md

Пока я могу запрашивать все страницы уценки в каталоге, но у меня возникают проблемы при попытке отфильтровать путь.Должен быть способ сделать это с помощью GraphQL Querey.Вместо этого я сопоставляю все результаты, а затем проверяю, включает ли строка слагов «team», это говорит мне, что она находится в папке «team».И затем он делает компонент.

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import TeamMember from '../components/TeamMember.js'
const Team = () => {
  const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields{
              slug
            }
            frontmatter {
              name
              position
              image
            }
          }
        }
      }
    }
  `)

  return (
    <div>
      {data.allMarkdownRemark.edges.map( (item, index) => {
        if(item.node.fields.slug.includes('team')){
          return <TeamMember key={`team_member_${index}`}{...item.node.frontmatter}/>
        }
      } )}
    </div>
  )
}
export default Team

Это прекрасно работает.Но я думал, что весь смысл graphQl в том, чтобы запрашивать и фильтровать, чтобы получить точные данные, которые мне нужны.Вместо этого я вернулся к написанию своего собственного кода фильтра в javascript:

if(item.node.fields.slug.includes('team'))

Есть ли плагин Gatsby или способ фильтрации запросов на содержание элементов в папке?

1 Ответ

1 голос
/ 20 сентября 2019

Просмотрите справочник gatsby graphql для фильтра и убедитесь, что вы используете graphiql для изучения возможностей вашей схемы.

query MyQuery {
  allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/(team)/"  }}) {
    nodes {
      id
    }
  }
}
...