ProgrammingFrontendReact

[Gatsby] Page Query

, , , , ,

gatsby-source-filesystem

로컬 파일 시스템에서 Gatsby 애플리케이션으로 데이터를 sourcing 하기 위한 Gatsby 소스 플러그인입니다.

플러그인은 파일에서 파일 노드를 생성합니다. 다양한 “transformer” 플러그인은 파일 노드를 다양한 다른 유형의 데이터로 변환할 수 있습니다.

Markdown, JSON, 이미지, YAML, CSV 및 기타 수집 가지 데이터 유형이 지원됩니다.

설치

1
npm install gatsby-source-filesystem

사용 방법

  1. 예시로 blog-posts 디렉토리를 생성하고 디렉터리 안에 post1.md, post2.md 파일을 생성합니다.
  2. gatsby-config.ts 파일의 plugin 부분을 다음과 같이 수정합니다. path 속성 값에는 생성한 blog-posts 디렉토리를 입력합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// gatsby-config.js
import type { GatsbyConfig } from 'gatsby';

const config: GatsbyConfig = {
  ...
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/blog-posts`,
      },
    },
  ],
};

export default config;
  1. GraphQL 쿼리를 해보면 nodes에 생성한 파일명들이 조회됩니다.
1
2
3
4
5
6
7
query MyQuery {
  allFile {
    nodes {
      name
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 결과
{
  "data": {
    "allFile": {
      "nodes": [
        {
          "name": "post1"
        },
        {
          "name": "post2"
        }
      ]
    }
  },
  "extensions": {}
}
  1. index.tsx 파일에서 쿼리를 추가하고 별다른 작성 없이 props에 data를 선언하기만 하면 Gatsby 가 자동으로 쿼리 결과를 가져올 수 있도록 도와줍니다. TypeScript를 사용한다면 PageProps<Queries.BlogTitlesQuery> 타입을 지정합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { graphql, PageProps } from 'gatsby';
import React from 'react';

export default function IndexPage({ data }: PageProps<Queries.BlogTitlesQuery>) {
  console.log(data);
  return (
    <ul>
      {data.allFile.nodes.map((file, index) => (
        <li key={index}>{file.name}</li>
      ))}
    </ul>
  );
}

export const query = graphql`
  query BlogTitles {
    allFile {
      nodes {
        name
      }
    }
  }
`;
1
2
3
4
5
6
7
8
9
10
11
12
13
// data object
{
  "allFile": {
    "nodes": [
      {
        "name": "post1"
      },
      {
        "name": "post2"
      }
    ]
  }
}

결론

위와 같이 gatsby-source-filesystem 플러그인을 사용하여 Gatsby 가 생성한 파일들을 관찰할 수 있게 허용해 주고 쿼리를 통해 더 많은 정보를 조회할 수 있도록 도와줍니다.

참고

Share