Strapi

MobX-Strapi

MobX SDK for Strapi headless CMS

Version

SemVer	branch	status	ES decorator	MobX	Strapi
>=0.5	main	✅developing	stage-3	>=6.11	v4
>=0.3 <0.5	main	❌deprecated	stage-2	>=4 <6.11	v4
<0.3	master	❌deprecated	stage-2	>=4 <6	v3

Usage

Installation

npm i mobx-strapi koajax

Some Node.js tips about the upstream mobx-restful you should know: https://github.com/idea2app/MobX-RESTful?tab=readme-ov-file#usage

tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "Node",
        "useDefineForClassFields": true,
        "experimentalDecorators": false,
        "jsx": "react-jsx"
    }
}

model/service.ts

import { HTTPClient } from 'koajax';

export const strapiClient = new HTTPClient({
    baseURI: 'http://your.production.domain/path/optional',
    responseType: 'json'
});

model/Article.ts

import { StrapiListModel } from 'mobx-strapi';

import { strapiClient } from './service';

export type Article = Record<'id' | 'title' | 'summary', string>;

export class ArticleModel extends StrapiListModel<Article> {
    client = strapiClient;
    baseURI = 'articles';
}

export default new ArticleModel();

page/Article/index.tsx

Use WebCell as an Example

import { component, observer } from 'web-cell';

import articleStore from '../../model/Article';

@component({ tagName: 'article-page' })
@observer
export class ArticlePage extends HTMLElement {
    connectedCallback() {
        articleStore.getList();
    }

    disconnectedCallback() {
        articleStore.clear();
    }

    render() {
        const { currentPage } = articleStore;

        return (
            <ul>
                {currentPage.map(({ id, title, summary }) => (
                    <li key={id}>
                        <a href={`#/article/${id}`}>{title}</a>
                        <p>{summary}</p>
                    </li>
                ))}
            </ul>
        );
    }
}