MobX-Lark

Unofficial TypeScript SDK for FeiShu/Lark API, which is based on MobX-RESTful.

Versions

SemVer	branch	status	ES decorator	MobX
>=2	main	✅developing	stage-3	>=6.11
>=0.8 <2	main	❌deprecated	stage-2	>=4 <6.11
<0.8	master	❌deprecated

Usage

• Example
  • SpreadSheet example
  • BI Table example
• API document

1. Initialize Lark app

User access token (front-end)

import { LarkApp } from 'mobx-lark';
import { parseCookie } from 'web-utility';

const { token } = parseCookie();

export const larkApp = new LarkApp({
    id: process.env.LARK_APP_ID,
    accessToken: token // or other getting way of OAuth token
});

OAuth middleware for Next.js

1. Initialization

2. Page router usage:

   import { compose } from 'next-ssr-middleware';
   
   import { larkOAuth2 } from '../utility/lark';
   
   export const getServerSideProps = compose(larkOAuth2);

Tenant access token (back-end)

import { LarkApp } from 'mobx-lark';

export const larkApp = new LarkApp({
    id: process.env.LARK_APP_ID,
    secret: process.env.LARK_APP_SECRET
});

2. Define a model

For example, we use a BI Table as a database:

import { BiDataQueryOptions, BiDataTable, TableCellValue } from 'mobx-lark';

import { larkClient } from '../utility/lark';
import { LarkBaseId } from '../configuration';

export type Client = Record<
    'id' | 'name' | 'type' | 'partnership' | 'image' | 'summary' | 'address',
    TableCellValue
>;

const CLIENT_TABLE = process.env.NEXT_PUBLIC_CLIENT_TABLE!;

export class ClientModel extends BiDataTable<Client>() {
    client = lark.client;

    queryOptions: BiDataQueryOptions = { text_field_as_array: false };

    constructor(appId = LarkBaseId, tableId = CLIENT_TABLE) {
        super(appId, tableId);
    }
}

3. Query data

Use Next.js page router for example:

import { FC } from 'react';

import { lark } from '../utility/lark';
import { Client, ClientModel } from '../models/Client';

export const getServerSideProps = async () => {
    await lark.getAccessToken();

    const clientStore = new ClientModel();

    const fullList = await clientStore.getAll();

    return { props: { fullList } };
};

const ClientIndexPage: FC<{ fullList: Client[] }> = ({ fullList }) => (
    <main>
        <h1>Client List</h1>
        <ol>
            {fullList.map(({ id, name }) => (
                <li key={id}>{name}</li>
            ))}
        </ol>
    </main>
);

export default ClientIndexPage;

4. Render a document

import { writeFile } from 'fs/promises';
import { DocumentModel, renderBlocks } from 'mobx-lark';
import { renderToStaticMarkup } from 'react-dom/server';

import { lark } from '../utility/lark';

class MyDocumentModel extends DocumentModel {
    client = lark.client;
}
const documentStore = new MyDocumentModel('idea2app.feishu.cn');

const blocks = await documentStore.getOneBlocks('a_docx_token');

const markup = renderToStaticMarkup(renderBlocks(blocks));

await writeFile('document.html', markup);

Scaffolds

1. https://github.com/idea2app/Lark-Next-Bootstrap-ts
2. https://github.com/idea2app/Lark-Next-Shadcn-ts

User cases

1. idea2app web-site
2. Open-Source-Bazaar web-site

Related with

• Lark client API: https://github.com/idea2app/Lark-client-API