Implementace datové služby pro přenos dat z AirTable pro vykreslení webu

[HormCodes]

Technologie: TypeScript, Gatsby, AirTable

V rámci #64

AirTable bude použit jako CMS pro web. Zde data budou uložena v určité struktuře (#70). Je potřeba implementovat synchronizační službu, která bude schopná získat data z AirTable a převést je do určité JSON struktury pro build webu.

Cílem tohoto issue je hlavně nalezení, jakým způsobem bude prováděna synchronizace a následný build webu. Samotná konverze AirTable tabulky do JSON struktury není tak důležitá.

Nápady na možná řešení (nutno prozkoumat pro a proti):

• package.json scripty get:data a build spouštějící gatsby build tak jak je, data budou importována přímo v komponentách
• vytvořit GraphQL model za použití existujících Gatsby pluginů
• vlastní Gatsby plugin

Figma pro vizuální představu: link

V případě nejasností nebojte se na mne obrátit. 🙂

[junekpavel]

Připravil jsem základní koncept toho, jak by přenos dat mohl fungovat.

Vyzkoušel jsem více řešení, v podstatě všechna navrhnutá v zadání. Nejlépe mi z toho vyšlo vytvoření vlastního Gatsby pluginu. Proč, se pokusím vysvětlit na nevýhodách, se kterými jsem se setkat při implementaci ostatních řešení.

Jako první variantu jsem vyloučil použití existujícího pluginu pro sourcing z AirTable (https://www.gatsbyjs.com/plugins/gatsby-source-airtable). Plugin je sice relativně jednoduchý na používání, ale hlavní nevýhodu vidím v nemožnosti měnit strukturu dat. Plugin defacto simuluje přímý přístup do tabulek - v graphql je nutné používat názvy tabulek i sloupců z AirTable.

Varianta s vytvořením scriptu, který by načetl data z AirTable (a modifikoval je) a uložil je do nějakého JSONu, který by se používal přímo v komponentách mi přišla trochu "těžkopádná". Muselo by se myslet na spoustu věcí - existence (a správný import) JSON souborů, spouštění scriptu (i když to by vlastně šlo jednoduše prebiuld scriptem). Výhoda by byla ve velmi jednoduchém mockování dat (prostě by se místo importu založily JSON soubory) pro vývoj.

Nejlépe mi z toho nakonec vyšlo vlastního pluginu, který načte data z AirTable, ale místo uložení do JSONu je exposne do GraphQL. Jelikož Gatsby s GraphQL pracuje standardně, je proces plně automatický (při dev i produkčním buildu) a není tak potřeba volat žádný další skript, ani nic importovat přímo v komponentách.

Nástřel toho, jak by mohl import dat (a jejich případná modifikace) vypadat je zde: https://github.com/junekpavel/ceskodigital-web/tree/feat-airtable-graphql-sourcing. (Nutné vytvoření .env souboru s konfigurací pro přístup k AirTable.) Funkčnost importu lze následně ověřit v GraphiQL (http://localhost:8000/___graphql?query=query%20MyQuery%7BallCdProject%7Bedges%7Bnode%7BName%7D%7D%7D%7D%0A).

[HormCodes]

@junekpavel, super! Velký palec hore za research. 👍

Prošel jsem si kód a vypadá to velmi funkčně. Myslím, že už by se to dalo přetavit na pull request k připomínkování. Pár bodů, co mne napadá už teď:

• použít jen project a allProjects
• zařídit, aby build fungoval i bez zadání klíčů. Např. warning a prázdné pole pro projekty?
• konverze do TS a přidání typů
• zkusím domyslet finální schéma, které pak ve výsledku použijeme, ale zde by těch změn mnoho být nebylo

Ještě jednou díky, je to moc dobře odvedená práce. 🙏

[junekpavel]

Díky za feedback.

Zapracuji tedy ještě zmíněné pointy a připravím na PR.

Tím, že to jede přes gatsby-node.js, který je v JS, bude potřeba zkombinovat s TS. Mám vymyšlený základ, jak by to mohlo fungovat. Vyzkouším, a hodil bych to sem.