GraphQL 및 Jamstack

GraphQL과 Jamstack 사이에는 명확한 관계가 없지만, 그들의 역사는 어느 정도 얽혀 있는 것 같다. 왜냐하면 그들은 여러모로 React 프레임워크의 흥기와 관련이 있기 때문이다.GraphQL은 페이스북이 2012년 만들었으나 리액트 출시 2년 만인 2015년 공식 오픈소스를 열었고, 리액트도 페이스북에서 나왔다.GraphQL은 API를 구축하고 조회하는 데 사용되는 검색 언어입니다.2018년까지 GraphQL 규범은 독립기구GraphQL Foundation가 유지했다.
이와 동시에 Jamstack은 정적 자산을 중심으로 JavaScript와 API를 사용하여 동적 상호작용을 하는 사이트를 구축하는 구조나 방법을 중심으로 한다.이 아키텍처는 그 이전까지 몇 년째 존재해왔지만, 넷라이프의 리더십 아래 2016년 Jamstack로 공식 명명됐다.API를 사용한 것은 맞지만 어떤 API를 명시하지 않아 GraphQL과는 총체적인 연관이 없다.그러나 2015년에 켈 마수스는 Gatsby라는 리액션 기반의 정적 사이트 생성기를 발표했는데 리액션 기반의 구축이고GraphQL과 밀접하게 통합되어 전체 데이터 층에 사용된다.게이츠비는 더 이상 기본적으로 GraphQL을 사용하는 유일한 정적 사이트 생성기가 아니지만, 게이츠비의 신속한 보급은 결국 GraphQL을 더욱 광범위한 Jamstack 개념과 연결시켰다.
두 가지 유행하는 Jamstack 도구와 GraphQL을 어떻게 사용하는지 탐색해 봅시다.

게이츠비

게이츠비에서 시작하자. 게이츠비가 처음 등장했을 때, 제임스 택은 한 단어가 아니었음에도 불구하고, 게이츠비가 처음으로 명확하게 GraphQL과 Jamstack 응용 프로그램의 생성을 연결시킨 최초의 사람으로 알고 있다.사이트마다 데이터층이 하나씩 있다.Markdown, JSON 또는 YAML 파일에 저장된 파일 기반 컨텐트 및 플러그인을 통해 연결된 외부 GraphQL API 또는 API 및 서비스를 포함하여 한 사이트의 모든 데이터가 계층을 통과하는 것이 이상적입니다.이 데이터 층은 완전히GraphQL 위에 세워져 있다.

당신의 게이츠비 사이트는GraphQL을 사용하여 데이터isn't a requirement를 얻지만 이렇게 하면 하나number of benefits를 가져올 수 있기 때문에 이렇게 하는 것을 강력히 권장합니다.따라서 개츠비는 운행gatsby develop할 때마다 사이트(통상localhost:8000를 시작할 뿐만 아니라 사이트의 GraphQL API(통상http://localhost:8000/___graphql를 통해 삽입식 GraphiQL 편집기로 접근할 수 있다)를 시작한다.
예를 들어 게이츠비blog starter를 사용하려면 파일 기반의 내용, 즉 /content/blog 폴더에 저장된 모든 블로그 글의 가격 인하 파일을 사용한다.그리고 gatsby-source-filesystem 플러그인을 사용하여 이 파일의frontmatter와 내용을 Gatsby의GraphQL 데이터 층에 추가한 다음 다음 다음 검색을 사용합니다.

{
  allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
        }
      }
    }
}

게이츠비에서 GraphQL을 어떻게 사용하는지에 대한 자세한 정보는 GraphQL API documentation를 보십시오.

그물의

그리드섬은'개츠비'와 많은 공통점이 있지만, 뷰 프레임워크로 구축됐다.예를 들어, Gridsome은 서버 측 렌더링(SSR)과 정적 사전 렌더링(SSG)을 동시에 제공하는 다른 프레임워크 기반 도구와 달리 정적 사이트 생성기에 집중합니다.그것은 또한 강력한 제1당과 지역사회 플러그인 생태계를 가지고 있다.또한 GraphQL을 기반으로 구축된 데이터 층도 있어 내장된 GraphQL 플랫폼을 사용하여 탐색할 수 있습니다.

GraphQL 데이터 층은 기본적으로 사이트의 모든 데이터를 추가하는 곳입니다. 사이트 데이터와 페이지를 포함합니다.Gridsome은 외부 소스에서 데이터를 추가할 수 있는 내장 도구를 제공합니다.예를 들어 api.loadSource 중의 gridsome.server.js 갈고리를 GridsomeData Store API과 결합하여 외부 API에서 데이터를 추가할 수 있다.데이터 저장소 API를 통해 데이터 계층에 추가된 모든 데이터를 즉시 GraphQL로 조회할 수 있습니다.
예를 들어 DEV에 쓴 모든 블로그 게시물을 가져오고 싶다고 가정해 봅시다. (이 예는 검증되지 않은 노드를 사용하여 사용자의 공개 게시물을 가져오는 것입니다.)이것은 나의 것이다 gridsome.server.js:

const axios = require('axios');

module.exports = function(api) {
  api.loadSource(async (actions) => {
    const posts = await axios.get(
      'https://dev.to/api/articles?username=remotesynth'
    );

    const collection = actions.addCollection('DevPosts');

    for (const post of posts.data) {
      collection.addNode(post);
    }
  });
};

이제 생성된 쿼리AllDevPosts를 사용하여 API를 쿼리할 수 있습니다.

query {
  allDevPosts {
    edges {
      node {
        title
        description
        url
      }
    }
  }
}

Gridsome에서 GraphQL을 어떻게 사용하는지 더 많은 정보를 보려면GraphQL data layer documentation.

기타 Jamstack 도구의 GraphQL

GraphQL을 데이터 층으로 사용하는 Jamstack 정적 사이트 생성기 목록에 최근에 추가된 또 다른 것은RedwoodJS Rails와 같은 방법으로 그들이 일컫는'완전한 창고 Jamstack'을 구축하는 것이다.RedwoodJS는 데이터 층을 이름cells에 넣고 이 층은GraphQL 조회를 포함해야 한다.
물론GraphQL은 JSON 응답을 분석할 수 있는 거의 모든 정적 사이트 생성기에 사용할 수 있다.제가 이 기능들을 전문적으로 소개하는 이유는 GraphQL을 핵심 기능으로 바탕으로 구축했기 때문입니다.하지만 Jamstack은 정적 사이트 생성기만 있는 것이 아닙니다.또 다른 관건은 API와 서비스인데 GraphQL도 그 중에서 중요한 역할을 하고 있다.예를 들어 GraphQL을 제품의 기초 부분으로 만드는 데 자주 사용하는 도구가 있다. 예를 들어Fauna Jamstack 사이트에 데이터 API를 제공하거나 GraphCMS GraphQL API를 바탕으로 구축된 머리 없는 CMS이다.
StepZen에서 우리는 구축 도구를 통해 Jamstack과GraphQL을 주목했다. 이 도구들은 개발자들이 모든백엔드를GraphQL을 바탕으로 구축된 단일 API 단점에 쉽게 조합할 수 있도록 한다.GraphQL은 서버가 없는 "Jamstack-ready"API 계층의 이상적인 선택이 될 수 있도록 독특한 기능을 제공함으로써 템플릿 함수에 대한 수요를 피할 수 있다고 믿습니다.따라서 GraphQL은 점점 더 Jamstack API층의 한 구성 부분이 될 것이라고 생각합니다. Jamstack의 A는 점점 더 GraphQL을 대표할 것입니다.