gatsby-source-storyblok Storyblok x Gatsby DX를 개선하기 위해 V4가 출시되었습니다🥳

Gatsby & Storyblok 프로젝트가 당사@storyblok/react SDK와 어떻게 다르게 처리되는지 검토하고 문제를 해결하여 복잡성을 줄였습니다.

gatsby-source-storyblok V4 SDK로 DX가 어떤지 알려주세요!

Special thanks to for his hard & awesome collaboration work 🙏

TL이 필요합니다. DR? CodeSandbox에서 바로 LIVE DEMO으로 바로 이동할 수 있습니다.

용법

먼저 아래 명령을 실행하여 gatsby-source-storyblok을 설치합니다.

npm install gatsby-source-storyblok
// yarn add gatsby-source-storyblok

초기화

다음 단계에서는 애플리케이션에 플러그인을 등록하고 Storyblok 공간에서 액세스 토큰을 추가합니다.

i.e. You can initialize just once in components/layout.jsx if you use gatsby-source-storyblok for your Gatsby projects.

Storyblok API 클라이언트를 사용하려면 apiPlugin를 추가하면 됩니다.

import { storyblokInit, apiPlugin } from "gatsby-source-storyblok";
import Page from "./components/Page.jsx";
import Teaser from "./components/Teaser.jsx";

storyblokInit({
  accessToken: "YOUR_ACCESS_TOKEN",
  // bridge: true,
  use: [apiPlugin],
  components: {
    page: Page,
    teaser: Teaser,
  },
});

뭔가 깨달았나요?😎

더 이상 조건부 반환 구성 요소를 직접 처리할 필요가 없습니다!

우리는 모든 것을 처리했으며 storyblokInit 함수의 구성 요소 개체에 모든 구성 요소를 추가하기만 하면 됩니다.

Storyblok API 쿼리 및 Visual Editor 변경 사항 수신

편리한 useStoryblokState(originalStory, bridgeOptions) 후크를 사용하여 Storyblok CDN API에서 스토리를 가져오고 자동으로 Storyblok Bridge을 사용하여 Visual Editor 라이브 변경 사항을 들을 수 있습니다.

// pages/index.jsx
import { useStoryblokState } from "gatsby-source-storyblok"

import Layout from "../components/layout"

const IndexPage = ({ data }) => {
  let story = data.storyblokEntry
  story = useStoryblokState(story)

  return (
    <Layout>
      <h1>{story.name}</h1>
    </Layout>
  )
}

export default IndexPage

export const query = graphql`
  query HomeQuery {
    storyblokEntry(full_slug: { eq: "home" }) {
      name
      full_slug
    }
  }
`

구성 요소를 Storyblok Visual Editor에 연결

해당 Storyblok 구성 요소에 연결하려는 모든 React 구성 요소에 대해 블록 콘텐츠와 함께 storyblokEditable 함수를 사용할 수 있습니다. 여기서 blok는 Storyblok's Content Delivery API에서 오는 실제 블록 데이터입니다.

// components/Feature.jsx
import { storyblokEditable } from "gatsby-source-storyblok";

const Feature = ({ blok }) => {
  return (
    <div {...storyblokEditable(blok)} key={blok._uid}>
      <div>{blok.name}</div>
      <p>{blok.description}</p>
    </div>
  );
};

export default Feature;

그런 다음 <StoryblokComponent blok={blok} />에서 로드를 처리할 것입니다 😉.

예시

TL;DR: Play with the Gatsby LIVE DEMO

다음 단계

기여하고 싶습니까? Gatsby SDK repo에서 이슈나 PR을 만들거나 연락할 수 있습니다.

자원

gatsby-source-storyblok 문서: https://www.npmjs.com/package/gatsby-source-storyblok

Storyblok 학습 허브: https://www.storyblok.com/docs

Storyblok 웹사이트, 발표 블로그 게시물: https://www.storyblok.com/mp/announcing-gatsby-sdk-v4