Peter Pristaš
GatsbyJS meetup
T h u r s d a y, N o v e m b e r 14, 2 0 1 9, P r a g u e
Who Am I?
Located in Bratislava, Slovakia
10 years of experience in web technologies
Full Stack Developer and Consultant
Author and maintainer of
wp-graphql-gutenberg
github.com/pristas-peter
Today's web development
Problems araising
- opinionated ways how to fetch data / server side render
- massive Javascript payloads if not handled correctly
- slow on mobile devices
- many open source project dependencies
Why can't you just use WP?
Wordpress
- one click installations
- simple DB model
- easy content creation
- 30% of internet
- not so developer friendly
- simple DB model
- archaic templating engine
- slow
- security
- not scaling well
CUSTOMER PROS
DEVELOPER CONS
Our data sources
- Models/WP_Query - Post / Custom Post Types / Media / Users
- Custom Key/Value Fields - Advanced Custom Fields Plugin
- Raw HTML - content of Posts - can we do better?
+ WPGraphQL ACF
Gutenberg
Gutenberg
Gutenberg Issues with WP GraphQL
- Block registry only lives in memory when Admin Page is loaded
- no way to natively describe blocks on PHP side
wp-graphql-gutenberg
- block definitions and parsed blocks are saved to post meta (PHP side) when post is saved (JS side)
- possible to query through WP GraphQL through "blocks" field
Workflow
Step1
manual page creation
Step2
little bit of refactoring
Step3
adding fragments to blocks
starting to see a common pattern?
Step4
- generate block and pages sources
- associate react block component with file which includes fragment on block type using graphql-tag-pluck
- create Blocks component
- create Pages
- all done in gatsby's sourceNodes, createPages lifecycles
Step4 Problems?
- including unnecessary code for every block even when it not might be used in page
- great for development (you don't have to restart gatsby)
- bad for production
Solutions?
dynamic imports - React loadable components
webpack require context regexes
Step5
- just generate different definitions for development/production
Live preview
is it even possible?
- gutenberg is react/redux(sort of) app
- gatsby-source-graphql can refetch fresh data on demand
- idea: can we re-run the whole page query when something in gutenberg changes and re-render whole page?
PREVIEW VIDEO
- run gatsby develop as a production api server to be able to query it with apollo client
- rewrite gatsby's "graphql" queries to apollo's "gql" queries using graphql-code-generator
- allow wp-graphql-gutenberg to consume current changes in editor
- patch gutenbergs reducer to call our refetch callback on every change
Live preview
Subtitle
gatsby-source-wp-graphql-gutenberg
Base for
expecting to be released at the end of year
Things to check out
- Advanced Content Fields PRO with blocks support - adding custom fields to blocks - great for mapping props -> cms fields
wp-grahql-gutenberg-acf
- Carbon Blocks - new open-source alternative with blocks support
wp-graphql-gutenberg-crb - planned
Things to check out
- complete rewrite using WPGraphQL
gatsby-source-wordpress@4
THANK YOU
Gutenberg & GatsbyJS
By Peter Pristaš