Мы хотели бы объявить о выпуске gatsby-source-storyblok V4 для улучшения Storyblok x Gatsby DX🥳.

Мы проанализировали, как проекты Gatsby & Storyblok обрабатываются иначе, чем наш @storyblok/react SDK, и позаботились о болевых точках, чтобы доставить меньше сложностей.

Дайте нам знать, как вам работается с нашим SDK gatsby-source-storyblok V4!

Отдельное спасибо Алексу за его тяжелый труд; потрясающая совместная работа 🙏.

Вам нужен TL;DR? Вы можете перейти прямо к LIVE DEMO в CodeSandbox прямо сейчас.

Использование

Прежде всего, установите gatsby-source-storyblok, выполнив команду ниже.

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

Инициализация

Следующим шагом зарегистрируйте плагин в вашем приложении и добавьте токен доступа из вашего пространства Storyblok.

Т.е. вы можете инициализировать всего один раз в components/layout.jsx, если вы используете gatsby-source-storyblok для своих проектов Gatsby.

Если вы хотите использовать клиент API Storyblok, вы можете добавить 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,
  },
});

Вы кое-что поняли? 😎

Вам больше не нужно самостоятельно обрабатывать условно возвращаемые компоненты!

Мы обо всем позаботились, и вам просто нужно добавить все ваши компоненты в объект components в функции storyblokInit, и все!

Запрос API Storyblok и прослушивание изменений визуального редактора

Вы можете использовать удобный хук useStoryblokState(originalStory, bridgeOptions), чтобы получить историю из API CDN Storyblok и автоматически использовать Storyblok Bridge для прослушивания изменений в визуальном редакторе.

// 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

Для каждого компонента React, который вы хотите связать с соответствующим компонентом Storyblok, вы можете использовать функцию storyblokEditable с содержимым blok, где blok — это фактические данные 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: Поиграйте с Gatsby LIVE DEMO

Следующие шаги

Хотите внести свой вклад? Вы можете создать проблему или PR в репозитории Gatsby SDK или связаться с нами.

Ресурс

• gatsby-source-storyblok docs: https://www.npmjs.com/package/gatsby-source-storyblok
• Storyblok Learning Hub: https://www.storyblok.com/docs
• Веб-сайт Storyblok, анонсирующая запись в блоге: https://www.storyblok.com/mp/announcing-gatsby-sdk-v4