DEV Community

Cover image for Importing JSON data to Storyblok using API
Silas Getachew
Silas Getachew

Posted on

Importing JSON data to Storyblok using API

Using Storyblok Management API

The Storyblok Management API is organized around REST. Our API has predictable, resource-oriented URLs, and uses HTTP response codes to indicate API errors. We use built-in HTTP features, like HTTP query parameters and HTTP verbs, which are understood by off-the-shelf HTTP clients. We support cross-origin resource sharing, allowing you to interact securely with our API from a client-side web application (though you should never expose your secret API key in any public website's client-side code). JSON is returned by all API responses, including errors, although our API libraries convert responses to appropriate language-specific objects.

Stories
The stories endpoint will let you manage all content entries of your Storyblok space. You can use it to import, export or modify content.

You can create Story using REST API

Storyblok.post('spaces/606/stories/', {
  "story": {
    "name": "Story Name",
    "slug": "story-name",
    "content": {
      "component": "page",
      "body": []
    }
  },
  "publish": 1
}).then(response => {
  console.log(response)
}).catch(error => { 
  console.log(error)
})
Enter fullscreen mode Exit fullscreen mode

For example Above coding using Javascript.

You can also do with CURL easily

Something like this.

curl "https://mapi.storyblok.com/v1/spaces/606/stories/" \
-X POST \
-H "Content-Type: application/json" \
-H "Authorization: YOUR_OAUTH_TOKEN" \
-d "{\"story\":{\"name\":\"Story Name\",\"slug\":\"story-name\",\"content\":{\"component\":\"page\",\"body\":[]}},\"publish\":1}"
Enter fullscreen mode Exit fullscreen mode

You also create, update, delete components. E.g this below to create component in Storyblok using API

Storyblok.post('spaces/656/components/', {
  "component": {
    "name": "teaser",
    "display_name": "Teaser",
    "schema": {
      "title": {
        "type": "text",
        "pos": 0
      },
      "image": {
        "type": "image",
        "pos": 1
      }
    },
    "is_root": false,
    "is_nestable": true
  }
}).then(response => {
  console.log(response)
}).catch(error => { 
  console.log(error)
})
Enter fullscreen mode Exit fullscreen mode

Let's read JSON file and import to Storyblok.

I use nodejs for import, So First make sure to install the package
yarn add storyblok-js-client or npm i storyblok-js-client

then
const StoryblokClient = require('storyblok-js-client')

// Initialize the client with the oauth token
const Storyblok = new StoryblokClient({
  oauthToken: '<yourPersonalToken>', // can be found in your My account section
})
Enter fullscreen mode Exit fullscreen mode

Add Storyblok config

const config = {
  spaceId: '<SpaceId', // can be found in the space settings.
  parentFolder: '<parentFolder>', // navigate into your folder and copy the id from the URL at app.storyblok.com <- last one
}
Enter fullscreen mode Exit fullscreen mode

Then

Read the json file using fs module.
make sure to createReadStream incase the json file is large.

const data = fs.createReadStream('data.json')

Enter fullscreen mode Exit fullscreen mode
data
  .on('data', function (data) {{
     data = JSON.parse(data)
     Object.entries(data).forEach(([key, value]) => {
     const story = {
        slug:value.slug,
        name: value.name,
        parent_id: config.parentFolder,
        content: {
          component: 'partner',
          name: value.name,
          description: value.content.en,
          description__i18n__de: value.content.de // if you have i18n.
       }



   Storyblok.post(`spaces/${config.spaceId}/stories/`, {
        story,
      })
        .then((res) => {
          console.log(`Success: ${res.data.story.name} was created.`)
        })
        .catch((err) => {
          console.log(`Error: ${err}`)
        })
    })
  })
})
Enter fullscreen mode Exit fullscreen mode

Top comments (0)