diff --git a/README.md b/README.md
index 8abd93642..be830b367 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,50 @@
-# Introduction
-
-This is a Gatsby source plugin for building websites using the [Storyblok](https://www.storyblok.com) headless CMS with true visual preview as a data source.
-
-## Install
-
-```sh
-$ npm install --save gatsby-source-storyblok # or yarn add gatsby-source-storyblok
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## đ Usage
+
+> If you are first-time user of the Storyblok, read the [Getting Started](https://www.storyblok.com/docs/guide/getting-started?utm_source=github.com&utm_medium=readme&utm_campaign=gatsby-source-storyblok) guide to get a project ready in less than 5 minutes.
+
+### Installation
+
+Install `gatsby-source-storyblok`:
+
+```bash
+npm install gatsby-source-storyblok
+// yarn add gatsby-source-storyblok
```
-## Usage
+### Initialization
-1. You need to declare the plugin use and its options in `gatsby-config.js`
+Register the plugin on your application and add the [access token](https://www.storyblok.com/docs/api/content-delivery#topics/authentication?utm_source=github.com&utm_medium=readme&utm_campaign=gatsby-source-storyblok) of your Storyblok space. You can also add the `apiPlugin` in case that you want to use the Storyblok API Client:
+
+> You need to declare the plugin use and its options in `gatsby-config.js`
```JavaScript
module.exports = {
@@ -28,11 +62,233 @@ module.exports = {
}
```
-### With Gatsby's image
+`src/components/layout.js`
+
+```JavaScript
+import configuration from '../../gatsby-config'
+
+const sbConfig = configuration.plugins.find((item) => item.resolve === 'gatsby-source-storyblok')
+
+storyblokInit({
+ accessToken: sbConfig.options.accessToken,
+ // bridge: false,
+ // apiOptions: { },
+ use: [apiPlugin],
+ components: {
+ teaser: Teaser,
+ grid: Grid,
+ feature: Feature
+ }
+});
+```
+
+> Add all your components to the components object in the `storyblokInit` function.
+
+That's it! All the features are enabled for you: the _Api Client_ for interacting with [Storyblok CDN API](https://www.storyblok.com/docs/api/content-delivery#topics/introduction?utm_source=github.com&utm_medium=readme&utm_campaign=gatsby-source-storyblok), and _Storyblok Bridge_ for [real-time visual editing experience](https://www.storyblok.com/docs/guide/essentials/visual-editor?utm_source=github.com&utm_medium=readme&utm_campaign=gatsby-source-storyblok).
+
+> You can enable/disable some of these features if you don't need them, so you save some KB. Please read the "Features and API" section
+
+### Getting Started
+
+`gatsby-source-storyblok` does three actions when you initialize it:
+
+- Provides a `useStoryblokState` custom hook in your app, that parses story content JSON into the object.
+- Loads [Storyblok Bridge](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=gatsby-source-storyblok) for real-time visual updates.
+- Provides a `storyblokEditable` function to link editable components to the Storyblok Visual Editor.
+
+#### 1. Fetching Content
+
+Query data from GraphQL:
+
+`src/pages/index.js`
+
+```js
+import { useStoryblokState } from "gatsby-source-storyblok"
+
+import Layout from "../components/layout"
+
+const IndexPage = ({ data }) => {
+ let story = data.storyblokEntry
+ story = useStoryblokState(story)
+
+ return (
+
+
+
{story.name}
+
+
+ )
+}
+
+export default IndexPage
+
+export const query = graphql`
+ query HomeQuery {
+ storyblokEntry(full_slug: { eq: "home" }) {
+ name
+ full_slug
+ }
+ }
+`
+```
+
+> Note: if you don't use `apiPlugin`, you can use your prefered method or function to fetch your data.
+
+#### 2. Listen to Storyblok Visual Editor events
+
+Use `useStoryblok` to get the new story every time is triggered a `change` event from the Visual Editor. You need to pass the `originalStory` as a first param. `bridgeOptions` (second param) is an optional param if you want to set the options for bridge by yourself:
+
+```js
+import { StoryblokComponent, useStoryblokState } from "gatsby-source-storyblok"
+
+import Layout from "../components/layout"
+
+const IndexPage = ({ data }) => {
+ let story = data.storyblokEntry
+ story = useStoryblokState(story)
+
+ const components = story.content.body.map(blok => (
+
+
{story.name}
+ {components}
+
+
+ )
+}
+
+export default IndexPage
+
+export const query = graphql`
+ query HomeQuery {
+ storyblokEntry(full_slug: { eq: "home" }) {
+ content
+ name
+ full_slug
+ internalId
+ }
+ }
+`
+```
+
+You can pass Bridge options as a third parameter as well:
+
+```js
+useStoryblok(story.internalId, (newStory) => setStory(newStory), {
+ resolveRelations: ["Article.author"],
+});
+```
+
+#### 3. Link your components to Storyblok Visual Editor
+
+For every component you've defined in your Storyblok space, call the `storyblokEditable` function with the blok content:
+
+```js
+import { storyblokEditable } from "gatsby-source-storyblok";
+
+const Feature = ({ blok }) => {
+ return (
+
+
+
{blok.name}
+
{blok.description}
+
+
+
+ {components}
+
+
+ )
+}
+
+export default IndexPage
+
+export const query = graphql`
+ query HomeQuery {
+ storyblokEntry(full_slug: { eq: "home" }) {
+ content
+ name
+ full_slug
+ internalId
+ }
+ }
+`
+```
+
+### Features and API
+
+You can **choose the features to use** when you initialize the plugin. In that way, you can improve Web Performance by optimizing your page load and save some bytes.
+
+#### Storyblok API
+
+You can use an `apiOptions` object. This is passed down to the [storyblok-js-client config object](https://github.com/storyblok/storyblok-js-client#class-storyblok):
+
+```js
+storyblokInit({
+ accessToken: "YOUR_ACCESS_TOKEN",
+ apiOptions: {
+ // storyblok-js-client config object
+ cache: { type: "memory" },
+ },
+ use: [apiPlugin],
+ components: {
+ teaser: Teaser,
+ grid: Grid,
+ feature: Feature,
+ },
+});
+```
+
+If you prefer to use your own fetch method, just remove the `apiPlugin` and `storyblok-js-client` won't be added to your application.
+
+```js
+storyblokInit({});
+```
+
+#### Storyblok Bridge
+
+If you don't use `useStoryblokBridge`, you still have access to the raw `window.StoryblokBridge`:
+
+```js
+const sbBridge = new window.StoryblokBridge(options);
+
+sbBridge.on(["input", "published", "change"], (event) => {
+ // ...
+});
+```
+
+### Gatsby feature references
+
+#### With Gatsby's image
You need to set the `localAssets` option to `true`. Here is an example of the usage:
-```JavaScript
+```js
import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
@@ -63,28 +319,31 @@ export const pageQuery = graphql`
`
```
-### With Gatsby's createPages
+#### With Gatsby's createPages
For more info regarding `createPages` see the Gatsby docs: [docs/reference/config-files/gatsby-node/#createPages](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/#createPages)
2a. You need to create a [template](https://www.gatsbyjs.org/docs/programmatically-create-pages-from-data/#specifying-a-template) file to get the data from GraphQL
```js
-import React from 'react'
-import { graphql } from 'gatsby'
+import { useStoryblokState } from "gatsby-source-storyblok"
+import Layout from "../components/layout"
export default function StoryblokEntry ({ data }) {
- let story = data.storyblokEntry
+ const story = data.storyblokEntry
+ story = useStoryblokState(story)
return (
- {story.name}
+
+ {story.name}
+
)
}
export const query = graphql`
query($slug: String!) {
- storyblokEntry(slug: { eq: $slug }) {
- id
+ storyblokEntry(full_slug: { eq: $full_slug }) {
+ internalId
name
full_slug
}
@@ -106,7 +365,7 @@ exports.createPages = async ({ graphql, actions }) => {
allStoryblokEntry {
edges {
node {
- id
+ internalId
full_slug
}
}
@@ -131,7 +390,7 @@ exports.createPages = async ({ graphql, actions }) => {
```
-### With Gatsby's File System Routes API
+#### With Gatsby's File System Routes API
For more info regarding The File System Routes API see the Gatsby docs: [docs/reference/routing/file-system-route-api/](https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/)
@@ -141,72 +400,41 @@ For more info regarding The File System Routes API see the Gatsby docs: [docs/re
```
|-- src
|-- pages
- |-- {storyblokEntry.slug}.js
+ |-- {storyblokEntry.full_slug}.js
```
3b. Gatsby will use ths page template for each `storyblokEntry`
```js
-import React from 'react'
-import { graphql } from 'gatsby'
-
-export default function StoryblokEntry({ data }) {
- let story = data.storyblokEntry
-
- return {story.name}
-}
-
-export const query = graphql`
- query ($full_slug: String!) {
- storyblokEntry(full_slug: { eq: $full_slug }) {
- id
- name
- full_slug
- }
- }
-`
-```
+import { useStoryblokState } from "gatsby-source-storyblok"
+import Layout from "../components/layout"
-## Rendering Storyblok content
-
-To source Storyblok's content add `content` to your GraphQL query. By importing `DynamicComponent`, you can render components dynamically. `sbEditable` function lets you to make your components editable in [storyblok.com](https://www.storyblok.com/)
-
-For more info regarding `sbEditable` function see the @storyblok/storyblok-editable README: [@storyblok/storyblok-editable](https://github.com/storyblok/storyblok-editable)
-
-```js
-import React from 'react'
-import { graphql } from 'gatsby'
-import { sbEditable } from "@storyblok/storyblok-editable"
-import DynamicComponent from "../components/dynamicComponent"
-
-export default function StoryblokEntry({ data }) {
- let story = data.storyblokEntry
-
- const components = story.content.body.map(blok => {
- return (
- {components}
-
+
+ {story.name}
+
)
}
export const query = graphql`
query ($full_slug: String!) {
storyblokEntry(full_slug: { eq: $full_slug }) {
- id
+ internalId
name
full_slug
- content
}
}
`
```
-## The options object in details
+#### The options object in details
+
+`gatsby-config.js`
```js
{
@@ -223,14 +451,12 @@ export const query = graphql`
* `accessToken`: Your Storyblok draft token
* `version`: 'draft' or 'published'
* `timeout`: Optionally provide a timeout for the api request
-* `resolveLinks`: This will automatically resolve internal links of the multilink field type. If the value is `story` the whole story object will be included. If the value is `url` only uuid, id, name, path, slug and url (url is a computed property which returns the "Real path" if defined to use it for navigation links) will be included.
+* `resolveLinks`: This will automatically resolve internal links of the multilink field type. If the value is `story` the whole story object will be included. If the value is `url` only uuid, id, name, path, slug and url (url is a computed property which returns the "Real path" if defined to use it for navigation links) will be included.
* `resolveRelations`: Resolve relationships to other Stories (in the first level of nesting) of a multi-option or single-option field-type. Provide the field key(s) as array to resolve specific fields. Example: ['article.related_articles', 'article.author'].
* `includeLinks`: If 'true' you can query links by allStoryblokLinkEntry. The links query lets you create a dynamic navigation tree as it includes also content folders.
* `languages`: An array of strings that will be used in languages request instead of languages in space settings. Use it to only load the languages that you want to.
-## How to query?
-
-### All Content Entries
+#### How to query all Content Entries
To get all entries unfiltered you can do the following query:
@@ -250,13 +476,14 @@ To get all entries unfiltered you can do the following query:
is_startpage
parent_id
group_id
+ internalId
}
}
}
}
```
-#### Filtering of content inside a folder
+##### How to query filtering of content inside a folder
The following example shows a filter to get all items from a news folder:
@@ -273,7 +500,7 @@ The following example shows a filter to get all items from a news folder:
}
```
-#### Filtering of languages
+##### How to query filtering of languages
If you use field level translations you can filter for a specific language using following query:
@@ -291,7 +518,7 @@ If you use field level translations you can filter for a specific language using
```
-#### Filtering on content type fields
+##### How to query filtering on content type fields
Every field of your content types is available via the prefix ```field_```.
@@ -311,7 +538,7 @@ This lets you for example to query for a specific component:
```
-### A Single Content Entry
+#### How to query a single content entry
```GraphQL
{
storyblokEntry(slug: { eq: "global-navi" }) {
@@ -320,7 +547,7 @@ This lets you for example to query for a specific component:
}
```
-### Datasources
+#### Datasources
```GraphQL
allStoryblokDatasource {
@@ -335,7 +562,7 @@ allStoryblokDatasource {
}
```
-### Datasource Entries
+#### How to query Datasource entries
This will return all datasources, with or not dimensions values:
@@ -369,7 +596,7 @@ allStoryblokDatasourceEntry(filter: { data_source: { eq: "DATASOURCE_SLUG" }, da
}
```
-### Links
+#### How to query links
Use the links api to create a dynamic navigation tree. To use this query you need to add `includeLinks: true` in the plugin options.
```GraphQL
@@ -390,8 +617,22 @@ allStoryblokLinkEntry {
}
```
-## Contribution
+## đ Related Links
+
+- **[Storyblok Gatsby.js Technology Hub](https://www.storyblok.com/tc/gatsbyjs)**: Learn how to develop your own Gatsby.js applications that use Storyblok APIs to retrieve and manage content.
+- **[Getting Started](https://www.storyblok.com/docs/guide/getting-started?utm_source=github.com&utm_medium=readme&utm_campaign=gatsby-source-storyblok)**: Get a project ready in less than 5 minutes.
+- **[Storyblok CLI](https://github.com/storyblok/storyblok)**: A simple CLI for scaffolding Storyblok projects and fieldtypes.
+- **[Storyblok React.js example demo](https://stackblitz.com/edit/react-sdk-demo)**: See and try how React SDK works with React.js projects
+- **[Storyblok Gatsby.js example demo](https://codesandbox.io/s/github/storyblok/getting-started/tree/master/gatsbyjs?fontsize=14&hidenavigation=1&theme=dark)**: See and try how gatsby-source-storyblok works with Gatsby.js projects
+
+## âšī¸ More Resources
+
+### Support
+
+- Bugs or Feature Requests? [Submit an issue](/../../issues/new).
+- Do you have questions about Storyblok or you need help? [Join our Discord Community](https://discord.gg/jKrbAMz).
-Fork me on [Github](https://github.com/storyblok/gatsby-source-storyblok).
+### Contributing
-This project use [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check [this question](https://semantic-release.gitbook.io/semantic-release/support/faq#how-can-i-change-the-type-of-commits-that-trigger-a-release) about it in semantic-release FAQ
+Please see our [contributing guidelines](https://github.com/storyblok/.github/blob/main/contributing.md) and our [code of conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=gatsby-source-storyblok).
+This project use [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check [this question](https://semantic-release.gitbook.io/semantic-release/support/faq#how-can-i-change-the-type-of-commits-that-trigger-a-release) about it in semantic-release FAQ.
\ No newline at end of file
diff --git a/lib/__tests__/.eslintrc b/lib/__tests__/.eslintrc
new file mode 100644
index 000000000..55f121d15
--- /dev/null
+++ b/lib/__tests__/.eslintrc
@@ -0,0 +1,5 @@
+{
+ "env": {
+ "jest": true
+ }
+}
diff --git a/lib/__tests__/get-story-params.test.js b/lib/__tests__/get-story-params.test.js
new file mode 100644
index 000000000..6e557a730
--- /dev/null
+++ b/lib/__tests__/get-story-params.test.js
@@ -0,0 +1,49 @@
+const getStoryParams = require('../src/getStoryParams')
+
+describe('getStoryParams() function', () => {
+ test('without any argument should be return a empty object', () => {
+ expect(getStoryParams()).toEqual({})
+ })
+
+ test('with a language and story as resolveLinks option', () => {
+ const options = {
+ resolveLinks: 'story'
+ }
+ expect(getStoryParams('en', options)).toEqual({
+ language: 'en',
+ resolve_links: 'story'
+ })
+ })
+
+ test('with a language and url as resolveLinks option', () => {
+ const options = {
+ resolveLinks: 'url'
+ }
+ expect(getStoryParams('en', options)).toEqual({
+ language: 'en',
+ resolve_links: 'url'
+ })
+ })
+
+ test('with a language and version option', () => {
+ const options = {
+ version: 'draft'
+ }
+ expect(getStoryParams('en', options)).toEqual({
+ language: 'en',
+ version: 'draft'
+ })
+ })
+
+ test('with a language and version and resolve_relations options', () => {
+ const options = {
+ version: 'draft',
+ resolveRelations: ['page.author', 'page.categories']
+ }
+ expect(getStoryParams('en', options)).toEqual({
+ language: 'en',
+ version: 'draft',
+ resolve_relations: 'page.author,page.categories'
+ })
+ })
+})
diff --git a/lib/__tests__/index.test.js b/lib/__tests__/index.test.js
new file mode 100644
index 000000000..18f5ba0a7
--- /dev/null
+++ b/lib/__tests__/index.test.js
@@ -0,0 +1,15 @@
+// import { mount } from "@vue/test-utils";
+// import Component from "../index";
+
+describe("gatsby-source-storyblok", () => {
+ beforeEach(() => { });
+
+ test("empty test", () => {
+ // const wrapper = mount(Component, {
+ // propsData: {
+ // src: "http://lorempixel.com/400/200/",
+ // },
+ // });
+ // expect(wrapper.element).toMatchSnapshot();
+ });
+});
\ No newline at end of file
diff --git a/lib/__tests__/sync.test.js b/lib/__tests__/sync.test.js
new file mode 100644
index 000000000..c93767809
--- /dev/null
+++ b/lib/__tests__/sync.test.js
@@ -0,0 +1,19 @@
+const StoryblokClient = require('storyblok-js-client')
+const Sync = require('../src/sync')
+
+test('horizontal_rule to generate hr tag', () => {
+ const createNode = function (node) {
+ expect(node.internalId).toBe(123)
+ expect(node.id).toBe(`item-123-default`)
+ }
+ const setPluginStatus = function () { }
+ const client = new StoryblokClient({})
+
+ Sync.init({
+ createNode,
+ setPluginStatus,
+ client
+ })
+
+ Sync.createNode('Item', { id: 123 })
+})
\ No newline at end of file
diff --git a/lib/cypress.json b/lib/cypress.json
new file mode 100644
index 000000000..e68e55224
--- /dev/null
+++ b/lib/cypress.json
@@ -0,0 +1,5 @@
+{
+ "component": {
+ "testFiles": "**/*.spec.jsx"
+ }
+}
diff --git a/lib/cypress/.eslintrc b/lib/cypress/.eslintrc
new file mode 100644
index 000000000..0f1b15145
--- /dev/null
+++ b/lib/cypress/.eslintrc
@@ -0,0 +1,3 @@
+{
+ "extends": ["plugin:cypress/recommended"]
+}
diff --git a/lib/cypress/component/index.spec.jsx b/lib/cypress/component/index.spec.jsx
new file mode 100644
index 000000000..ecbc5ae21
--- /dev/null
+++ b/lib/cypress/component/index.spec.jsx
@@ -0,0 +1,144 @@
+import React from "react";
+import Test from "../../testing-components/Test";
+import TestUseStoryblok from "../../testing-components/TestUseStoryblok";
+import { mount } from "@cypress/react";
+import Teaser from "gatsby-source-storyblok-playground/components/teaser";
+import Grid from "gatsby-source-storyblok-playground/components/grid";
+import Feature from "gatsby-source-storyblok-playground/components/feature";
+import Page from "gatsby-source-storyblok-playground/components/page";
+
+describe("gatsby-source-storyblok", () => {
+ beforeEach(() => {
+ cy.spy(window.console, "log").as("log");
+ cy.spy(window.console, "error").as("error");
+ delete window.storyblokRegisterEvent;
+ document.getElementById("storyblok-javascript-bridge")?.remove();
+ });
+
+ describe("JS Bridge", () => {
+ it("loads by default", () => {
+ mount("
+ }
+ ],
+ "version": "4.0.0",
+ "description": "SDK to integrate Storyblok into your project using Gatsby.",
+ "main": "./dist/gatsby-source-storyblok.js",
+ "module": "./dist/gatsby-source-storyblok.mjs",
+ "files": [
+ "gatsby-node.js",
+ "dist",
+ "src"
+ ],
+ "scripts": {
+ "dev": "vite build --watch",
+ "build": "vite build",
+ "test": "npm run test:unit && npm run test:e2e",
+ "test:unit": "jest __tests__",
+ "test:e2e": "start-server-and-test cy:playground http-get://localhost:8000/ cy:run",
+ "test:e2e-watch": "start-server-and-test cy:playground http-get://localhost:8000/ cy:open",
+ "cy:playground": "npm run develop --prefix ../playground-test",
+ "cy:run": "cypress run",
+ "cy:open": "cypress open",
+ "prepublishOnly": "npm run build && cp ../README.md ./"
+ },
+ "dependencies": {
+ "@storyblok/react": "^1.0.5",
+ "storyblok-js-client": "^4.5.2"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.18.0",
+ "@babel/preset-env": "^7.18.0",
+ "@cypress/react": "^5.12.5",
+ "@cypress/vite-dev-server": "^2.2.3",
+ "@vitejs/plugin-react": "^1.3.2",
+ "babel-jest": "^28.1.0",
+ "cypress": "^9.6.1",
+ "eslint-plugin-cypress": "^2.12.1",
+ "eslint-plugin-jest": "^26.2.2",
+ "jest": "^28.1.0",
+ "react": "^17.0.1",
+ "start-server-and-test": "^1.14.0",
+ "vite": "^2.9.9"
+ },
+ "babel": {
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "targets": {
+ "node": "current"
+ }
+ }
+ ]
+ ]
+ },
+ "jest": {
+ "moduleFileExtensions": [
+ "js",
+ "json"
+ ],
+ "transform": {
+ "^.+\\.js$": "babel-jest"
+ }
+ },
+ "release": {
+ "branches": [
+ "master"
+ ]
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/storyblok/gatsby-source-storyblok"
+ },
+ "author": "Storyblok",
+ "bugs": {
+ "url": "https://github.com/storyblok/gatsby-source-storyblok/issues"
+ },
+ "homepage": "https://github.com/storyblok/gatsby-source-storyblok",
+ "publishConfig": {
+ "access": "public"
+ }
+}
\ No newline at end of file
diff --git a/lib/src/getStoryParams.js b/lib/src/getStoryParams.js
new file mode 100644
index 000000000..e5f5f38c2
--- /dev/null
+++ b/lib/src/getStoryParams.js
@@ -0,0 +1,31 @@
+/**
+ * @method getStoryParams
+ * @param {String} language 'en', 'de'
+ * @param {Object} options? api options
+ * @param {Array} options.resolveRelations? resolve_relations field
+ * @param {String} options.resolveLinks? can be story or url
+ * @param {String} options.version? can be draft or released
+ */
+const getStoryParams = function(language = '', options = {}) {
+ let params = {}
+
+ if (options.resolveLinks) {
+ params.resolve_links = options.resolveLinks || '1'
+ }
+
+ if (options.resolveRelations) {
+ params.resolve_relations = options.resolveRelations.join(',')
+ }
+
+ if (options.version) {
+ params.version = options.version
+ }
+
+ if (language.length > 0) {
+ params.language = language
+ }
+
+ return params
+}
+
+module.exports = getStoryParams
\ No newline at end of file
diff --git a/lib/src/sync.js b/lib/src/sync.js
new file mode 100644
index 000000000..082f5fd31
--- /dev/null
+++ b/lib/src/sync.js
@@ -0,0 +1,104 @@
+const crypto = require('crypto');
+const stringify = require('json-stringify-safe');
+
+module.exports = {
+ init({ createNode, client, setPluginStatus }) {
+ setPluginStatus({ lastFetched: Date.now() });
+ this.$createNode = createNode;
+ this.$client = client;
+ this.$cacheVersion = 0;
+ },
+
+ async getSpace() {
+ const space = await this.getOne('space', 'spaces/me', {
+ node: 'StoryblokSpace',
+ });
+ this.$cacheVersion = space.version;
+ return space;
+ },
+
+ getPage(type, page, options) {
+ let params = {
+ per_page: 25,
+ page: page,
+ cv: this.$cacheVersion,
+ };
+ params = Object.assign({}, params, options.params);
+ return this.$client.get(`cdn/${type}`, params);
+ },
+
+ createNode(name, item) {
+ const nodeObject = this.builderNode(name, item);
+
+ this.$createNode(nodeObject);
+ },
+
+ builderNode(name, item) {
+ if (name === 'StoryblokDatasourceEntry') {
+ return this.factoryDatasourceEntryNode(name, item);
+ }
+
+ return this.factoryDefaultNode(name, item);
+ },
+
+ factoryDefaultNode(name, item) {
+ const lang = item.lang || 'default';
+
+ return Object.assign({}, item, {
+ id: `${name.toLowerCase()}-${item.id}-${lang}`,
+ internalId: item.id,
+ parent: null,
+ children: [],
+ internal: {
+ type: name,
+ contentDigest: crypto.createHash(`md5`).update(stringify(item)).digest(`hex`),
+ },
+ });
+ },
+
+ factoryDatasourceEntryNode(name, item) {
+ const dimension = item.data_source_dimension || 'default';
+ return Object.assign({}, item, {
+ id: `${name.toLowerCase()}-${item.id}-${dimension}`,
+ internalId: item.id,
+ parent: null,
+ children: [],
+ internal: {
+ type: name,
+ contentDigest: crypto.createHash(`md5`).update(stringify(item)).digest(`hex`),
+ },
+ });
+ },
+
+ async getOne(single, type, options) {
+ const resp = await this.$client.get(`cdn/${type}`, options.params);
+ const item = resp.data[single];
+ this.createNode(options.node, item);
+ return item;
+ },
+
+ async getAll(type, options) {
+ let page = 1;
+ let res = await this.getPage(type, page, options);
+ let all =
+ res.data[type].constructor === Object ? Object.values(res.data[type]) : res.data[type];
+ let lastPage = Math.ceil(res.total / 25);
+
+ while (page < lastPage) {
+ page++;
+ res = await this.getPage(type, page, options);
+ res.data[type].forEach((item) => {
+ all.push(item);
+ });
+ }
+
+ all.forEach((item) => {
+ if (options.process) {
+ options.process(item);
+ }
+ this.createNode(options.node, item);
+ });
+
+ return all;
+ },
+};
diff --git a/lib/testing-components/Test.jsx b/lib/testing-components/Test.jsx
new file mode 100644
index 000000000..20cf4339f
--- /dev/null
+++ b/lib/testing-components/Test.jsx
@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+import {
+ storyblokInit,
+ apiPlugin,
+ getStoryblokApi,
+ useStoryblokBridge,
+ StoryblokComponent,
+} from "gatsby-source-storyblok";
+
+const Test = ({ bridge, accessToken, components, blok }) => {
+ storyblokInit({
+ accessToken,
+ bridge,
+ use: accessToken ? [apiPlugin] : [],
+ components,
+ });
+
+ const storyblokApi = getStoryblokApi();
+ const apiExists = !!(storyblokApi && typeof storyblokApi.get === "function");
+
+ useEffect(() => {
+ useStoryblokBridge(43423, (newStory) => console.log(newStory));
+ }, []);
+
+ return (
+
+
Gatsby Testing Component
+
+ storyblokApi.get:
+ {apiExists.toString()}
+
+
+ );
+};
+
+export default Test;
diff --git a/lib/testing-components/TestUseStoryblok.jsx b/lib/testing-components/TestUseStoryblok.jsx
new file mode 100644
index 000000000..49407a6bb
--- /dev/null
+++ b/lib/testing-components/TestUseStoryblok.jsx
@@ -0,0 +1,24 @@
+import {
+ storyblokInit,
+ apiPlugin,
+ useStoryblok,
+ StoryblokComponent,
+} from "gatsby-source-storyblok";
+
+const TestUseStoryblok = ({ accessToken, components }) => {
+ storyblokInit({
+ accessToken,
+ use: accessToken ? [apiPlugin] : [],
+ components,
+ });
+
+ const story = useStoryblok("react", { version: "draft" });
+
+ if (!story) {
+ return Loading...
;
+ }
+
+ return ",
- "scripts": {
- "test": "jest",
- "lint": "eslint .",
- "format": "prettier --write 'src/**/*.js'"
- },
- "deprecated": false,
- "private": false,
- "keywords": [
- "gatsby",
- "gatsby-plugin",
- "gatsby-source-plugin",
- "storyblok",
- "headless-cms"
+ "name": "gatsby-source-storyblok-workspace",
+ "private": true,
+ "version": "0.0.1",
+ "workspaces": [
+ "./lib",
+ "./playground",
+ "./playground-test"
],
- "main": "index.js",
- "license": "MIT",
- "dependencies": {
- "gatsby-source-filesystem": "^4.2.0",
- "json-stringify-safe": "^5.0.1",
- "storyblok-js-client": "^4.1.5"
+ "scripts": {
+ "dev": "npm run dev --workspace=lib & npm run demo",
+ "demo": "npm run develop --workspace=playground",
+ "build": "npm run build --workspace=lib",
+ "test:unit": "npm run test:unit --workspace=lib",
+ "test:e2e": "npm run test:e2e --workspace=lib",
+ "test:e2e-watch": "npm run test:e2e-watch --workspace=lib",
+ "prepare": "husky install"
},
"devDependencies": {
- "axios": "^0.21.1",
- "babel-cli": "^6.26.0",
- "eslint": "7.13.0",
- "husky": "4.3.0",
- "jest": "^27.3.1",
- "lint-staged": "^12.1.2",
- "lodash.has": "^4.5.2",
- "prettier": "2.1.2"
- },
- "husky": {
- "hooks": {
- "pre-commit": "lint-staged"
- }
+ "@commitlint/cli": "^17.0.0",
+ "@commitlint/config-conventional": "^17.0.0",
+ "eslint": "^8.15.0",
+ "eslint-config-prettier": "^8.5.0",
+ "eslint-plugin-react": "^7.30.0",
+ "husky": "^8.0.1",
+ "lint-staged": "^12.4.1",
+ "prettier": "^2.6.2"
},
"lint-staged": {
- "*.js": [
- "eslint --cache --fix",
+ "*.{js,jsx,css}": [
+ "prettier --write",
+ "eslint"
+ ],
+ "*.md": [
"prettier --write"
]
},
- "peerDependencies": {
- "gatsby": "^2.0.0 || ^3.0.0 || ^4.0.0",
- "storyblok-editable": "^1.1.0"
+ "commitlint": {
+ "extends": [
+ "@commitlint/config-conventional"
+ ]
+ },
+ "eslintConfig": {
+ "extends": [
+ "eslint:recommended",
+ "plugin:react/recommended",
+ "prettier"
+ ],
+ "env": {
+ "browser": true,
+ "es6": true
+ },
+ "ignorePatterns": "dist/",
+ "parserOptions": {
+ "sourceType": "module",
+ "ecmaVersion": 2022
+ }
},
- "homepage": "https://www.storyblok.com",
- "repository": "https://github.com/storyblok/gatsby-source-storyblok"
-}
+ "prettier": {
+ "trailingComma": "es5",
+ "tabWidth": 2,
+ "semi": true,
+ "singleQuote": false
+ }
+}
\ No newline at end of file
diff --git a/playground-test/.gitignore b/playground-test/.gitignore
new file mode 100644
index 000000000..f81327511
--- /dev/null
+++ b/playground-test/.gitignore
@@ -0,0 +1,69 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env*
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity
diff --git a/playground-test/components/feature.jsx b/playground-test/components/feature.jsx
new file mode 100644
index 000000000..698fd05b7
--- /dev/null
+++ b/playground-test/components/feature.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { storyblokEditable } from "gatsby-source-storyblok";
+
+const Feature = ({ blok }) => {
+ return (
+
+
+
{blok.name}
+
{blok.description}
+
+
+ {blok.columns.map((nestedBlok) => (
+
+
+ ))}
+
+);
+
+export default Grid;
diff --git a/playground-test/components/page.jsx b/playground-test/components/page.jsx
new file mode 100644
index 000000000..ccc1f69c8
--- /dev/null
+++ b/playground-test/components/page.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { StoryblokComponent, storyblokEditable } from "gatsby-source-storyblok";
+
+const Page = ({ blok }) => (
+
+ {blok.body
+ ? blok.body.map((nestedBlok) => (
+
+
+ ))
+ : null}
+
",
+ "dependencies": {
+ "gatsby": "^4.11.3",
+ "gatsby-plugin-gatsby-cloud": "^4.11.1",
+ "gatsby-plugin-image": "^2.11.1",
+ "gatsby-plugin-manifest": "^4.11.1",
+ "gatsby-plugin-offline": "^5.11.1",
+ "gatsby-plugin-react-helmet": "^5.11.0",
+ "gatsby-plugin-sharp": "^4.11.1",
+ "gatsby-source-filesystem": "^4.11.1",
+ "gatsby-source-storyblok": "^4.0.0",
+ "gatsby-transformer-sharp": "^4.11.0",
+ "prop-types": "^15.8.1",
+ "react": "^17.0.1",
+ "react-dom": "^17.0.1",
+ "react-helmet": "^6.1.0"
+ },
+ "devDependencies": {
+ "prettier": "^2.6.2"
+ },
+ "keywords": [
+ "gatsby"
+ ],
+ "license": "0BSD",
+ "scripts": {
+ "build": "gatsby build",
+ "develop": "ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop",
+ "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
+ "start": "gatsby develop",
+ "serve": "gatsby serve",
+ "clean": "gatsby clean",
+ "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/gatsbyjs/gatsby-starter-default"
+ },
+ "bugs": {
+ "url": "https://github.com/gatsbyjs/gatsby/issues"
+ }
+}
\ No newline at end of file
diff --git a/playground-test/src/components/Feature.js b/playground-test/src/components/Feature.js
new file mode 100644
index 000000000..09b52a8b1
--- /dev/null
+++ b/playground-test/src/components/Feature.js
@@ -0,0 +1,13 @@
+import React from "react";
+import { storyblokEditable } from "gatsby-source-storyblok";
+
+const Feature = ({ blok }) => {
+ return (
+
+
{blok.name}
+
{blok.description}
+
+ {blok.columns.map((blok) => (
+
+
+ ))}
+
+);
+
+export default Grid;
diff --git a/playground-test/src/components/Teaser.js b/playground-test/src/components/Teaser.js
new file mode 100644
index 000000000..a6938e14a
--- /dev/null
+++ b/playground-test/src/components/Teaser.js
@@ -0,0 +1,12 @@
+import * as React from "react"
+import { storyblokEditable } from "gatsby-source-storyblok";
+
+const Teaser = ({ blok }) => {
+ return (
+
+
{blok.headline}
+
+ )
+}
+
+export default Teaser
\ No newline at end of file
diff --git a/playground-test/src/components/layout.js b/playground-test/src/components/layout.js
new file mode 100644
index 000000000..0d6a20d47
--- /dev/null
+++ b/playground-test/src/components/layout.js
@@ -0,0 +1,40 @@
+/**
+ * Layout component that queries for data
+ * with Gatsby's useStaticQuery component
+ *
+ * See: https://www.gatsbyjs.com/docs/use-static-query/
+ */
+
+import * as React from "react"
+import PropTypes from "prop-types"
+import { storyblokInit, apiPlugin } from "gatsby-source-storyblok"
+import Teaser from './Teaser'
+import Grid from './Grid'
+import Feature from './Feature'
+import configuration from '../../gatsby-config'
+
+const sbConfig = configuration.plugins.find((item) => item.resolve === 'gatsby-source-storyblok')
+
+storyblokInit({
+ accessToken: sbConfig.options.accessToken,
+ use: [apiPlugin],
+ components: {
+ teaser: Teaser,
+ grid: Grid,
+ feature: Feature
+ }
+});
+
+const Layout = ({ children }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+Layout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
+
+export default Layout
\ No newline at end of file
diff --git a/playground-test/src/images/gatsby-icon.png b/playground-test/src/images/gatsby-icon.png
new file mode 100644
index 000000000..908bc78a7
Binary files /dev/null and b/playground-test/src/images/gatsby-icon.png differ
diff --git a/playground-test/src/pages/404.js b/playground-test/src/pages/404.js
new file mode 100644
index 000000000..f6f426922
--- /dev/null
+++ b/playground-test/src/pages/404.js
@@ -0,0 +1,12 @@
+import * as React from "react"
+
+import Layout from "../components/layout"
+
+const NotFoundPage = () => (
+
+ 404: Not Found
+ You just hit a route that doesn't exist... the sadness.
+
+)
+
+export default NotFoundPage
diff --git a/playground-test/src/pages/index.js b/playground-test/src/pages/index.js
new file mode 100644
index 000000000..dacf57b41
--- /dev/null
+++ b/playground-test/src/pages/index.js
@@ -0,0 +1,37 @@
+import * as React from "react"
+import { graphql } from "gatsby"
+
+import { StoryblokComponent, storyblokEditable, useStoryblokState } from "gatsby-source-storyblok"
+
+import Layout from "../components/layout"
+
+const IndexPage = ({ data }) => {
+ let story = data.storyblokEntry
+ story = useStoryblokState(story)
+
+ const components = story.content.body.map(blok => (
+
+
{story.name}
+ {components}
+
+
+ )
+}
+
+export default IndexPage
+
+export const query = graphql`
+ query HomeQuery {
+ storyblokEntry(full_slug: { eq: "gatsby/test" }) {
+ content
+ name
+ full_slug
+ uuid
+ id
+ internalId
+ }
+ }
+`
\ No newline at end of file
diff --git a/playground-test/src/templates/using-dsg.js b/playground-test/src/templates/using-dsg.js
new file mode 100644
index 000000000..4bf64179f
--- /dev/null
+++ b/playground-test/src/templates/using-dsg.js
@@ -0,0 +1,21 @@
+import * as React from "react"
+import { Link } from "gatsby"
+
+import Layout from "../components/layout"
+
+const UsingDSG = () => (
+
+ Hello from a DSG Page
+ This page is not created until requested by a user.
+
+ To learn more, head over to our{" "}
+
+ documentation about Deferred Static Generation
+
+ .
+
+
+)
+
+export default UsingDSG
diff --git a/playground/.gitignore b/playground/.gitignore
new file mode 100644
index 000000000..f81327511
--- /dev/null
+++ b/playground/.gitignore
@@ -0,0 +1,69 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env*
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity
diff --git a/playground/components/feature.jsx b/playground/components/feature.jsx
new file mode 100644
index 000000000..698fd05b7
--- /dev/null
+++ b/playground/components/feature.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { storyblokEditable } from "gatsby-source-storyblok";
+
+const Feature = ({ blok }) => {
+ return (
+
+
+
{blok.name}
+
{blok.description}
+
+
+ {blok.columns.map((nestedBlok) => (
+
+
+ ))}
+
+);
+
+export default Grid;
diff --git a/playground/components/page.jsx b/playground/components/page.jsx
new file mode 100644
index 000000000..ccc1f69c8
--- /dev/null
+++ b/playground/components/page.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { StoryblokComponent, storyblokEditable } from "gatsby-source-storyblok";
+
+const Page = ({ blok }) => (
+
+ {blok.body
+ ? blok.body.map((nestedBlok) => (
+
+
+ ))
+ : null}
+
",
+ "dependencies": {
+ "gatsby": "^4.11.3",
+ "gatsby-plugin-gatsby-cloud": "^4.11.1",
+ "gatsby-plugin-image": "^2.11.1",
+ "gatsby-plugin-manifest": "^4.11.1",
+ "gatsby-plugin-offline": "^5.11.1",
+ "gatsby-plugin-react-helmet": "^5.11.0",
+ "gatsby-plugin-sharp": "^4.11.1",
+ "gatsby-source-filesystem": "^4.11.1",
+ "gatsby-source-storyblok": "^4.0.0",
+ "gatsby-transformer-sharp": "^4.11.0",
+ "prop-types": "^15.8.1",
+ "react": "^17.0.1",
+ "react-dom": "^17.0.1",
+ "react-helmet": "^6.1.0"
+ },
+ "devDependencies": {
+ "prettier": "^2.6.2"
+ },
+ "keywords": [
+ "gatsby"
+ ],
+ "license": "0BSD",
+ "scripts": {
+ "build": "gatsby build",
+ "develop": "ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop",
+ "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
+ "start": "gatsby develop",
+ "serve": "gatsby serve",
+ "clean": "gatsby clean",
+ "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/gatsbyjs/gatsby-starter-default"
+ },
+ "bugs": {
+ "url": "https://github.com/gatsbyjs/gatsby/issues"
+ }
+}
\ No newline at end of file
diff --git a/playground/src/components/Feature.js b/playground/src/components/Feature.js
new file mode 100644
index 000000000..09b52a8b1
--- /dev/null
+++ b/playground/src/components/Feature.js
@@ -0,0 +1,13 @@
+import React from "react";
+import { storyblokEditable } from "gatsby-source-storyblok";
+
+const Feature = ({ blok }) => {
+ return (
+
+
{blok.name}
+
{blok.description}
+
+ {blok.columns.map((blok) => (
+
+
+ ))}
+
+);
+
+export default Grid;
diff --git a/playground/src/components/Teaser.js b/playground/src/components/Teaser.js
new file mode 100644
index 000000000..a6938e14a
--- /dev/null
+++ b/playground/src/components/Teaser.js
@@ -0,0 +1,12 @@
+import * as React from "react"
+import { storyblokEditable } from "gatsby-source-storyblok";
+
+const Teaser = ({ blok }) => {
+ return (
+
+
{blok.headline}
+
+ )
+}
+
+export default Teaser
\ No newline at end of file
diff --git a/playground/src/components/layout.js b/playground/src/components/layout.js
new file mode 100644
index 000000000..0d6a20d47
--- /dev/null
+++ b/playground/src/components/layout.js
@@ -0,0 +1,40 @@
+/**
+ * Layout component that queries for data
+ * with Gatsby's useStaticQuery component
+ *
+ * See: https://www.gatsbyjs.com/docs/use-static-query/
+ */
+
+import * as React from "react"
+import PropTypes from "prop-types"
+import { storyblokInit, apiPlugin } from "gatsby-source-storyblok"
+import Teaser from './Teaser'
+import Grid from './Grid'
+import Feature from './Feature'
+import configuration from '../../gatsby-config'
+
+const sbConfig = configuration.plugins.find((item) => item.resolve === 'gatsby-source-storyblok')
+
+storyblokInit({
+ accessToken: sbConfig.options.accessToken,
+ use: [apiPlugin],
+ components: {
+ teaser: Teaser,
+ grid: Grid,
+ feature: Feature
+ }
+});
+
+const Layout = ({ children }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+Layout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
+
+export default Layout
\ No newline at end of file
diff --git a/playground/src/images/gatsby-icon.png b/playground/src/images/gatsby-icon.png
new file mode 100644
index 000000000..908bc78a7
Binary files /dev/null and b/playground/src/images/gatsby-icon.png differ
diff --git a/playground/src/pages/404.js b/playground/src/pages/404.js
new file mode 100644
index 000000000..f6f426922
--- /dev/null
+++ b/playground/src/pages/404.js
@@ -0,0 +1,12 @@
+import * as React from "react"
+
+import Layout from "../components/layout"
+
+const NotFoundPage = () => (
+
+ 404: Not Found
+ You just hit a route that doesn't exist... the sadness.
+
+)
+
+export default NotFoundPage
diff --git a/playground/src/pages/index.js b/playground/src/pages/index.js
new file mode 100644
index 000000000..bf7b8f6f5
--- /dev/null
+++ b/playground/src/pages/index.js
@@ -0,0 +1,37 @@
+import * as React from "react"
+import { graphql } from "gatsby"
+
+import { StoryblokComponent, storyblokEditable, useStoryblokState } from "gatsby-source-storyblok"
+
+import Layout from "../components/layout"
+
+const IndexPage = ({ data }) => {
+ let story = data.storyblokEntry
+ story = useStoryblokState(story)
+
+ const components = story.content.body.map(blok => (
+
+
{story.name}
+ {components}
+
+
+ )
+}
+
+export default IndexPage
+
+export const query = graphql`
+ query HomeQuery {
+ storyblokEntry(full_slug: { eq: "gatsby/" }) {
+ content
+ name
+ full_slug
+ uuid
+ id
+ internalId
+ }
+ }
+`
\ No newline at end of file
diff --git a/playground/src/templates/using-dsg.js b/playground/src/templates/using-dsg.js
new file mode 100644
index 000000000..4bf64179f
--- /dev/null
+++ b/playground/src/templates/using-dsg.js
@@ -0,0 +1,21 @@
+import * as React from "react"
+import { Link } from "gatsby"
+
+import Layout from "../components/layout"
+
+const UsingDSG = () => (
+
+ Hello from a DSG Page
+ This page is not created until requested by a user.
+
+ To learn more, head over to our{" "}
+
+ documentation about Deferred Static Generation
+
+ .
+
+
+)
+
+export default UsingDSG
+
+ 
+
+
+ 
+
+
+ 
