ChainReactApp2023
ChainReactApp2023 copied to clipboard
Refactor Webflow types to do runtime checking using Zod
Description
Trello Card
So with the most recent changes to the CMS, it appears that several properties have been changed and now there are undefined errors.
The Webflow types are derived from Typescript types, which is fine for many cases, but when an API changes, it does not save you from runtime errors.
This PR adds Zod to do runtime checking and throw an error if the Webflow API returns an unexpected shape. This causes the app to blow up, but with more specific error messages, which makes it much simpler to figure out what properties are broken and what are not.
This PR also includes a few miscellaneous fixes to reflect the type changes:
- programmatically generates types using
scripts/webflow-codegen.ts - tests that types are correct against actual API data using
scripts/webflow-codegen-test.ts - creates new type file at
webflow-api.generated.ts - adds
app/services/api/webflow-api.schema.tswith statically known webflow types - updates
useWebflowAPIto validate API data against collection schema - updates prettier to handle parsing
satisfies - Fixes
Textcomponent type - Updates
app/services/api/webflow-consts.tsto include a schema for validation - Adds missing collection ids for schedule names
Graphics
| Before | After |
|---|---|
Checklist:
- [x] I have done a thorough self-review of my code
- [ ] I have tested with a screen reader and font-scaling turned on and added necessary accessibility features
- [x] I have run tests and linter
I found a way to programmatically generate our types using the fields key on from the List Collections endpoint. However, this PR still needs some work to actually consume those generated types.
I'll mark this as a draft for now until I get those types converted to the generated ones
Tried rebasing this, it's getting pretty gnarly.
This PR could potentially to expand to normalize the choices and their collectionIds as well, but it may be kind of late in the change to get the benefits out of this PR.