$$config title: [gatsby] GraphQL keywords: - IT - gatsby $$ # Gatsby의 GraphQL 데이터 계층 작동 모나리자

- 데이터가 하나 이상의 소스 에 저장됩니다 . 해당 소스는 컴퓨터 파일 시스템의 폴더, WordPress와 같은 콘텐츠 관리 시스템(CMS) 또는 데이터베이스일 수 있습니다. 데이터 소스가 여러 개일 수도 있습니다! - 소스에서 데이터 계층으로 데이터를 가져오는 방법은 무엇입니까? 소스 플러그인 이라는 플러그인 유형을 사이트에 추가합니다 . 각 소스 플러그인은 특정 소스와 통신하도록 설계되었습니다. 사이트를 구축할 때 각 소스 플러그인은 특정 소스에서 데이터를 가져와 사이트의 GraphQL 데이터 레이어에 추가합니다. # GraphiQL을 사용하여 데이터 계층 탐색 및 GraphQL 쿼리 작성 - [graphiQL 데이터 쿼리작성 사이트](http://localhost:8000/___graphql) ![](https://www.gatsbyjs.com/static/c6b53975530da3347f0e0d12fc175208/84a90/graphiql.png) # GraphiQL을 사용하여 데이터 계층 탐색 및 GraphQL 쿼리 작성(예제) ```js 쿼리 { "extensions": {} } site { siteMetadata { title } } } ``` ```js 결과 query MyQuery { "data": { "site": { "siteMetadata": { "title": "My First Gatsby Site" } } }, ``` # GraphQL로 데이터 쿼리를 이용하여 값 랜더링 - Gatsby 패키지에서 useStaticQuery함수와 태그를 가져옵니다 . ```js src/components/layout.js import * as React from 'react' import { Link, useStaticQuery, graphql } from 'gatsby' import { container, heading, navLinks, navLinkItem, navLinkText } from './layout.module.css' const Layout = ({ pageTitle, children }) => { return ( // ... ) } export default Layout ``` - GraphiQL에서 생성한 쿼리를 호출 useStaticQuery하고 전달합니다. graphql전달하는 문자열이 GraphQL 쿼리라는 것을 Gatsby가 알 수 있도록 태그 를 사용해야 합니다. ```js src/components/layout.js import * as React from 'react' import { Link, useStaticQuery, graphql } from 'gatsby' import { container, heading, navLinks, navLinkItem, navLinkText } from './layout.module.css' const Layout = ({ pageTitle, children }) => { const data = useStaticQuery(graphql` query { site { siteMetadata { title } } } `) return ( // ... ) } export default Layout ``` - 이제 쿼리 결과가 포함된 변수가 있으므로 Layout구성 요소의 JSX에서 사이트 제목을 렌더링할 수 있습니다. 사이트 제목에 액세스하려면 JavaScript 점 연산자( .)를 사용하여 값을 가져옵니다 ```js src/components/layout.js import * as React from 'react' import { Link, useStaticQuery, graphql } from 'gatsby' import { container, heading, navLinks, navLinkItem, navLinkText } from './layout.module.css' const Layout = ({ pageTitle, children }) => { const data = useStaticQuery(graphql` query { site { siteMetadata { title } } } `) return (

{pageTitle} | {data.site.siteMetadata.title}

{data.site.siteMetadata.title}

{pageTitle}

{children}

) } export default Layout ``` ![](https://www.gatsbyjs.com/static/598d35d2dc7b7906149a031c7b8a9de8/1e088/index-page-with-site-title.png) - 이제 사이트 제목이 페이지에 표시되었으므로 스타일을 추가할 차례입니다! 파일 의 기존 스타일 아래에 사이트 제목에 대한 몇 가지 스타일을 정의 ```js src/components/layout.module.css .site-title { font-size: 3rem; color: gray; font-weight: 700; margin: 3rem 0; } ``` - 새 스타일을 Layout구성 요소로 가져와 추가한 사이트 제목 단락에 적용 ```js src/components/layout.js import * as React from 'react' import { Link, useStaticQuery, graphql } from 'gatsby' import { container, heading, navLinks, navLinkItem, navLinkText, siteTitle, } from './layout.module.css' const Layout = ({ pageTitle, children }) => { const data = useStaticQuery(graphql` query { site { siteMetadata { title } } } `) return (

{pageTitle} | {data.site.siteMetadata.title}

{data.site.siteMetadata.title}

{pageTitle}

{children}

) } export default Layout ``` 적용 ![](https://www.gatsbyjs.com/static/9c7c3c5a1ad1f33034de167ceb175642/8b69f/index-page-with-site-title-styled.png)