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

tsconfig.json

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

model/User.ts

import { UserModel } from 'mobx-strapi';

const isLocalHost = ['localhost', '127.0.0.1', '0.0.0.0'].includes(location.hostname);

export const userStore = new UserModel(
    isLocalHost ? 'http://localhost:1337/api/' : 'https://your.strapi.production.domain/api/'
);

model/Article.ts

import { Base, BaseUser, Searchable, StrapiListModel } from 'mobx-strapi';

import { userStore } from './User';

export interface Article extends Base, Record<'title' | 'summary', string> {
    author: BaseUser;
}

export class ArticleModel extends Searchable<Article>(StrapiListModel) {
    client = userStore.client;
    baseURI = 'articles';
    // for Strapi 5
    indexKey = 'documentId';
    // optional
    operator = { title: '$containsi' } as const;
    // optional
    searchKeys = ['title', 'summary'] as const;
    // optional
    dateKeys = ['createdAt', 'updatedAt'] as const;
    // optional
    sort = { createdAt: 'desc', updatedAt: 'desc' } as const;
    // optional
    populate = { author: { populate: '*' } };
}

export default new ArticleModel();

page/Article/index.tsx

Use WebCell as an Example

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

import articleStore from '../../model/Article';
import { userStore } from '../../model/User';

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

    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>
        );
    }
}