Comments (3)
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).
from app.
@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
aallProjects
- 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. 🙏
from app.
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.
from app.
Related Issues (20)
- Zjednodušit práci s dovednostmi na hashtagy HOT 1
- Přidat možnost zadat v uživatelském profilu další kontaktní kanály
- Přidat možnost filtrování (a stránkování?) adresáře lidí HOT 1
- Přidat rychlý opt-in pro zveřejnění uživatelského profilu
- Přidat možnost nastavení profilovky
- Sjednotit veřejný profil a soukromé UI pro jeho úpravy HOT 1
- Generovat hezké Open Graph náhledy pro stránky s uživatelským profilem
- Přidat možnost explicitní správy kontaktního e-mailu
- Invalidace keše při změnách uživatelského profilu HOT 1
- Přidat do nastavení uživatelského profilu chybějící pole z registrace
- V meta:description míváme nadbytečné mezery a konce řádků
- Lepší formátování notifikací na nové témata z Diskutuj.Digital
- Tlačíto Poslat zprávu na Slacku nefunguje dle očekávání HOT 1
- Možnost přidat do uživatelského profilu více odkazů HOT 1
- Zobrazit kontaktní tlačítka v uživatelském profilu jen pro přihlášené
- Bookmark profilů
- Uživatelé chtějí lepší představu o tom, které změny nastavení se ukládají
- Přidat do uživatelského profilu možnost nabízím/nenabízím aktuálně volnou kapacitu
- Zvýšit kontrast výchozího barevného schématu
- Nevalidujeme kontaktní e-mail při jeho editaci
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from app.