contentfulのJavaScript SDKをさわる

Headless CMS系なのでちょっと触ってみた。contentful側のデータは例によって「product catalogue」とする。 setup contentful SDK npm i -S contentfu […]

広告ここから
広告ここまで

目次

    Headless CMS系なのでちょっと触ってみた。contentful側のデータは例によって「product catalogue」とする。

    setup contentful SDK

    npm i -S contentfulでOK。事前にダッシュボードからSpaceIDとContent Delivery API – access tokenを取得しておく。

    const contentful = require('contentful')
    
    const client = contentful.createClient({
      space: '<space_id>',
      accessToken: '<content_delivery_api_key>'
    })

    ここまでは基本的に使い回しになるはずなので、別ファイルにしてexportさせても良さそう。

    // contentful.js
    const contentful = require('contentful')
    module.exports = contentful.createClient({
      space: '<space_id>',
      accessToken: '<content_delivery_api_key>'
    })
    
    // index.js
    const client = require('./contentful')

    Call contentful apis

    get all content

    getEntriesで全て取得できる。

    client.getEntries()
    .then((response) => console.log(response.items))
    .catch(console.error)

    response.items[].sys.contentTypeに投稿タイプの情報が入っているので、うまくやれば振り分けもできる。

    client.getEntries()
    .then((response) => {
        response.items.forEach((item) => {
            const {fields, sys} = item
            const id = sys.contentType.sys.id
            switch (id) {
                case '2PqfXUJwE8qSYKuM0U6w8M': {
                    console.log('Product Name: %j', fields.productName)
                    break
                }
                case 'sFzTZbSuM8coEwygeUYes': {
                    console.log('Company Name: %j', fields.companyName)
                    break
                }
                case '6XwpTaSiiI2Ak2Ww0oi6qa': {
                    console.log('Title: %j', fields.title)
                    break
                }
                default: {
                    console.log('Undefined content: %j', item)
                    break
                }
            }
        })
    })
    .catch(console.error)
    
    $ node index.js 
    Title: "Toys"
    Product Name: "Playsam Streamliner Classic Car, Espresso"
    Title: "Home & Kitchen"
    Product Name: "Whisk Beater"
    Company Name: "Lemnos"
    Company Name: "Playsam"
    Company Name: "Normann Copenhagen"
    Product Name: "Hudson Wall Cup"
    Product Name: "SoSo Wall Clock"

    idが乱数なのはおそらくサンプルのデータを使っているからと思われます。

    また、第一引数にcontent_typelimitなどを入れることでカテゴリの絞り込みや件数制御も可能です。

    client.getEntries({
        content_type: '2PqfXUJwE8qSYKuM0U6w8M',
        limit: 2
    })
    .then((response) => {
        response.items.forEach(({fields}) => {
            console.log('Product Name: %j', fields.productName)
        })
    })
    .catch(console.error)
    
    $ node index.js 
    Product Name: "Hudson Wall Cup"
    Product Name: "Playsam Streamliner Classic Car, Espresso"

    contentfulを使ってアプリ開発する際は、多分このあたりにお世話になるのかなと思います。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark