$$config title: [Gatsby] GraphQL >> 블로그 링크 만들기 keywords: - IT - 개츠비 $$ # GraphQL 의 큰 틀 ![원본이미지](https://www.gatsbyjs.com/static/e45422900475b86807bc002fb6863b85/321ea/data-layer.png) 파일, cms, 개인 API, Database 을 쓰기 위해서 각자의 쓰임새와 사용방법을 알아야한다. 근데 개츠비 안에서 GraphQL은 위에 것 들을 따로 배우지 않아도 사용할 수 있게 해준다. # 1. 개별 슬러그 ![원본이미지](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyzAUw%2FbtrDMUGSM6k%2F8bUoBKNpXA7g5HTYUEWP51%2Fimg.png) http://localhost:8000/\___graphql 에서 쿼리문을 실행시킨 결과이다. ![원본이미지](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzhtP7%2FbtrDFK7jGdq%2F4voUfxgoztbTFOWlTQ9E80%2Fimg.png) 리액트 내부가 아닌 외부에 블로그 파일을 생성하고 mdx 형식의 파일을 생성하였다. GraphQL이 의미 하는 것은 위 이미지와 같이 frontmatter와 body 부분을 가져 온 것이다. date는 나중에 정렬을 위해 가져오고 월 일 연도로 바꾼 것 이다. (문서 수가 많아지면 날짜로 관리하기 위해) ![원본이미지](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcDSYWo%2FbtrDHdubMy6%2FG9kjybyu1IJGz70Ph71QrK%2Fimg.png) 리액트 안에 blog라는 폴더에 {mdx.slug}.js 를 만들었다. 위에 블로그 폴더에 만든 mdx 파일 예를 들어 another-post에 접근하기 위해서 localhost:8000/another-post로 접근한다. 여기서 another-post는 slug이고, localhost:8000/{mdx.slug} 로 하면 slug값에 따라 홈페이지를 다르게 접근할 수 있다. ![원본이미지](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvyQ2e%2FbtrDE9GiSUK%2FChF9EZDKvaBrj5AtEaSMm0%2Fimg.png) 즉, Yet Another Post에 접근하기 위해서는 yet-another-post 를 My First Post에 접근하기 위해서는 my-first-post의 슬러그를 사용해야한다. \[슬러그 값은 2번에서 볼 수 있다.] 현재 js파일은 블로그 아래에 있기 때문에 localhost:8000/blog/{mdx.slug} 형식이 되고, blog에 홈화면을 정의해주자 # 2. 블로그 인덱스 기본적으로 index파일은 따로 붙는게 없다. 어떤 이야기나면 localhost:8000/blog/index가 아닌 localhost:8000/blog 로 접근한다는 것이다. ![원본이미지](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb5CroB%2FbtrDHGJdOtQ%2FH3boX64bh5NMHmtDT086yk%2Fimg.png) 위에서 말한 슬러그는 nodes 아래에 있다. \[allMdx는 모든 MDX를 말한다.] ![원본이미지](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtO8tS%2FbtrDEZXico6%2FAVTyMDGS5VxzWWipj8tyQ1%2Fimg.png) 받은 슬러그 값에 따라 그 페이지로 이동하고 Link to를 통해 링크 형식으로 만든 모습이다. {node.frontmatter.title}는 그 링크의 제목을 표시해준다. data.allMdx.nodes.map((node) => ())는 nodes 하위 데이터들을 node로 묶어 준 것이고, key={node.id} id에 따라 나눠준 것이다. # 3 code - index.js ```js import React from "react"; import { Link, graphql } from "gatsby"; import Layout from "../../components/layout"; const BlogPage = ({ data }) => { console.log(data); return ( {data.allMdx.nodes.map((node) => (

{node.frontmatter.title}

Posted: {node.frontmatter.date}

))} ); }; export const query = graphql` query { allMdx(sort: { fields: frontmatter___date, order: DESC }) { nodes { frontmatter { date(formatString: "MMMM D, YYYY") title } id slug } } } `; export default BlogPage; ``` - {mdx.slug}.js ```js import React from "react"; import { graphql } from "gatsby"; import { MDXRenderer } from "gatsby-plugin-mdx"; import Layout from "../../components/layout"; const BlogPost = ({ data }) => { return (

{data.mdx.frontmatter.date}

{data.mdx.body} ); }; export const query = graphql` query ($id: String) { mdx(id: { eq: $id }) { frontmatter { title date(formatString: "MMMM D, YYYY") } body } } `; export default BlogPost; ``` [블로그](https://to2.kr/dKL)