Gatsby: 질문 : gatsby-source-filesystem 이름을 기반으로 어떻게 쿼리합니까?

allMarkdownRemark 사용하여 경로를 필터링 할 수도 있다고 생각했습니다.

{
   allMarkdownRemark(
    sort: { order: DESC, fields: [frontmatter___date]},
    filter: {fileAbsolutePath: {regex: "/(type1)/.*\\.md$/"}}
  ) {
      edges {
        node {
          excerpt(pruneLength: 250)
          id
          frontmatter {
            title
            date(formatString: "MMMM DD, YYYY")
            path
          }
        }
      }
    }
}

파일 노드에는 sourceInstanceName 로 설정된 소스 인스턴스 이름이 있으므로이를 쿼리에 사용할 수 있습니다.

regex를 사용하는 것은 좋은 솔루션이기도합니다. 예를 들어 gatsbyjs.org에서 많이 사용합니다.

BTW, 아직 사용하고 있지 않다면 GraphiQL은 사용 가능한 데이터를 탐색하는 데 적합합니다.

@KyleAMathews allMarkdownRemark 쿼리에서 sourceInstanceName 를 사용하는 방법이 있습니까? 이처럼 각 마크 다운 노드에 대한 파일 노드의 sourceInstanceName 를 얻을 수 있기를 바라고 있었기 때문에 파일 경로에 정규식을 사용하지 않고도 내 프로젝트에서 블로그 게시물을 분리 할 수 ​​있습니다.

{
  allMarkdownRemark {
    edges {
      node {
        sourceInstanceName
      }
    }
  }
}

그러나 GraphQL 디버거는 sourceInstanceName 를 사용할 수 없음을 보여줍니다.

프로젝트 및 블로그 게시물과 같은 소스 유형별로 마크 다운 페이지를 필터링하는 것이 좋습니다. 이에 대한 나의 현재 해결책은 각 마크 다운 노드의 fileAbsolutePath 를 얻는 것입니다.

{
  allMarkdownRemark {
    edges {
      node {
        fileAbsolutePath
      }
    }
  }
}

그런 다음 /pages/blog/ 또는 /pages/projects/ 와 같은 특정 문자열이 포함되어 있는지 테스트합니다. 그러나 gatsby 사이트 디렉토리 자체에 대한 절대 경로에 이러한 문자열 중 하나가 포함되어 있으면 중단됩니다. 이 경우 모범 사례로 무엇을 권장합니까? (문서에서 뭔가를 놓친 경우 죄송합니다.)

@nwshane 은 allFile 쿼리하고 거기에서 필터링합니다. internal.mediaType 로 마크 다운 파일을 필터링 할 수 있습니다.

@KyleAMathews allFile 에 대한 쿼리를 frontmatter에 대한 정렬과 어떻게 결합합니까? 가능합니까?

비슷한 것을 알아 내려고합니다.

하위 폴더로 필터링 할 수 있습니다. 하지만 frontmatter 에서 allFile frontmatter 을 (를) 볼 수 없습니다.

최신 정보:

이것은 나를 위해 일했습니다.

나는 폴더가 posts 및 pages 폴더 내의 content 내 gatsby-config.js 포인트 content .

export const query = graphql`
  query IndexQuery {
    allMarkdownRemark(
      filter: { fileAbsolutePath: {regex : "\/posts/"} },
      sort: {fields: [frontmatter___date], order: DESC},
    ) {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            slug
            date(formatString: "DD MMMM YYYY")
            category
          }
          excerpt
        }
      }
    }
  }
`;

@lukejanicke 마지막 업데이트 이후로 노드 시스템에 조금 더 뛰어 들었습니다. allFile 노드는 마크 다운 핸들러에 의해 구문 분석되고 새 allMarkdownRemark 노드가 생성됩니다. 따라서 allFile 에서는 마크 다운 파서가 시작된 후에 만 ​​생성되기 때문에 onCreateNode 후크를 통해 파일 노드에서 마크 다운 노드로 컬렉션 이름 (파일 시스템 소스 플러그인 구성에 지정됨)을 복사하는 것이 었습니다. 예제를 게시 할 코드는 없지만 매우 빠르며 allMarkdownRemark 안에 필터링 할 수있는 필드가 있습니다.

@KyleAMathews가 조언 한 또 다른 가능성 (제 경우 소스 이름은 projects )

allFile(filter: {internal: {mediaType: {eq: "text/markdown"}}, sourceInstanceName: {eq: "projects"}}) {
  edges {
    node {
      childMarkdownRemark {
        frontmatter {
            ...
        }
      }
    }
  }
}

@gbouteiller 사실, frontmatter 를 얻고 sourceInstanceName 로 필터링 할 수 있습니다. 문제는이 접근 방식을 사용하여 frontmatter 내부의 어떤 것도 정렬 할 수 없다는 frontmatter 안에 저장됩니다.

에서 일을 기준으로 정렬 할 수있는 방법이 없습니다 frontmatter 에 의해 필터 sourceInstanceName 기본적으로는. sourceInstanceName 은 File 노드에서 markdownRemark 노드로 복사되지 않습니다. 유일한 옵션은 정규식을 사용하거나 이전 게시물에 따라 일부 데이터를 복사하는 것입니다.

정렬이 필요하지 않은 경우 (많은 경우에 해당 할 수 있음) 접근 방식이 매우 합리적입니다. 나는 몰랐다 childMarkdownRemark 에 필드로 사용할 수있었습니다 file , 알고 매우 유용 공유를위한 감사이.

"name"필드가 markdownRemark와 잘 작동하지 않는다는 사실에 실망했습니다. 이 정보를 전달하기 위해 할 수있는 작은 승리가 있습니까?

편집 : 조금 엉망으로 만든 후 id 필드가 경로를 노출하고이를 기반으로 필터링 할 수 있음을 깨달았습니다.

query AllQuery {
    DSes: allMarkdownRemark(
      limit: 3
      filter: { id: { regex: "/_design-systems/" } }
    ) {
      edges {
        node {
          frontmatter {
            title
            date
            company
            link
            image
            description
          }
          fields {
            slug
          }
        }
      }
    }

    Articles: allMarkdownRemark(
      limit: 3
      filter: { id: { regex: "/_articles/" } }
    ) {
      edges {
        node {
          frontmatter {
            title
            date
            company
            link
            image
            description
          }
          fields {
            slug
          }
        }
      }
    }
  }

소스 파일 시스템의 name 필드는 여전히 gatsby-transformer-remark에 대해 아무 작업도 수행하지 않습니다. gatsby-transformer-remark 결코 이후 쿼리 가능 / 필터링 가능한 필드로이를 통과하도록 dx를 약간 개선한다고 말할 수 있습니다. gatsby-source-filesystem 없이 존재합니다.

@ tsiq-swyx File 에서 MarkdownRemark 까지 File collection 필드를 전달하기 위해 이와 같은 것을 사용하고 있습니다.

exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
  const { createNodeField } = boundActionCreators

  if (_.get(node, 'internal.type') === `MarkdownRemark`) {
    // Get the parent node
    const parent = getNode(_.get(node, 'parent'))

    // Create a field on this node for the "collection" of the parent
    // NOTE: This is necessary so we can filter `allMarkdownRemark` by
    // `collection` otherwise there is no way to filter for only markdown
    // documents of type `post`.
    createNodeField({
      node,
      name: 'collection',
      value: _.get(parent, 'sourceInstanceName'),
    })

regex 접근 방식은 작동하지만 취약합니다.

@chmac 이것은 매우 영리하고 작동합니다. 솔루션을 공유해 주셔서 감사합니다. @KyleAMathews 태그를 지정해서 미안하지만 (태그 할 다른 사람이있는 경우 lmk) 기본적으로 gatsby-source-filesystem 이 이러한 방식으로 작동 할 수 있습니까 (sourceInstanceName을 노드 필드 또는 다른 필드에 전달)?

@ tsiq-swyx 100 % 확실하지는 않지만 상당히 간단한 풀 리퀘스트라고 생각합니다! ;-)

나는 개츠비 관리자가 이러한 것들에 대해 강한 의견을 가지고 있다고 생각하므로 임의의 원치 않는 PR을 보내기 전에 논의 할 가치가 있다고 생각합니다. :)

좋아, 작동하지만 내 createPages 내보내기는 하나의 템플릿 만 사용합니다.

gatsby-source-filesystem 것이 graphql의 AllFile을 전혀 필요로하지 않는다는 것은 흥미 롭습니다. 혼란을 가져올 수 있으며 문서에 반영되지 않습니다.
나는 사용하고있다
const { createPage } = actions const result = await graphql(` query { allMarkdownRemark { edges { node { fields { slug } frontmatter { lang } } } } } `)
문제없이 페이지를 생성합니다. 그러나 gatsby-source-git 에도 동일한 원칙이 적용되는지 확실하지 않습니다.

감사합니다 @chmac

gatsby-source-filesystem 이름을 기준으로 페이지를 만들어야합니다 ...

그래서 여기 내 해결책이 있습니다.

const { createFilePath } = require("gatsby-source-filesystem")

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `Mdx` && getNode(node.parent).sourceInstanceName === "careers") {
    const value = createFilePath({ node, getNode })

    createNodeField({
      name: "slug",
      node,
      value: `/careers${value}`
    })
  }
}

이것은 intresting, 그러한 옵션을 찾지 못했습니다.

2020 년 4 월 27 일 월요일, Noman Gul [email protected] 은 다음과 같이 썼습니다.

감사합니다 @chmac https://github.com/chmac

gatsby-source-filesystem 이름을 기반으로 페이지를 만들어야합니다 ...

그래서 여기 내 해결책이 있습니다.

const {createFilePath} = require ( "gatsby-source-filesystem")
exports.onCreateNode = ({node, actions, getNode}) => {
const {createNodeField} = 작업

if (node.internal.type === Mdx && getNode (node.parent) .sourceInstanceName === "careers") {
const 값 = createFilePath ({node, getNode})

createNodeField({
  name: "slug",
  node,
  value: `/careers${value}`
})

}
}

—
댓글을 달았 기 때문에 수신 한 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/gatsbyjs/gatsby/issues/1634#issuecomment-619670883 ,
또는 구독 취소
https://github.com/notifications/unsubscribe-auth/AAEQPFX6KR7NUIY33Q7V4MDROTS7PANCNFSM4DUUPK6A
.

나는이 글을 읽은 후 꽤 흔한 경우라고 생각하는 것과 같은 상황에있다. 제 생각에 가장 좋고 해킹되지 않은 솔루션은 다음과 같습니다.

{
  allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/projects/"}}) {
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

내 projects 콘텐츠 유형은 /content/projects/ 있습니다.