📑 workspace for gatsby theme development

• gatsby-node.js:

  1. make sure the data directory exists: onPreBootstrap
  2. define the event type: sourceNodes, createTypes
  3. define resolvers for any custom fields (slug)
  4. query for events and create pages
• gatsby-config.js
• events.js: useStaticQuery
• Inside gatsby-node, only fetch id, slug; in src/templates/events.js, useStaticQuery to fech allEvent again for details
• in event.js, use graphql instead of StaticQuery for individually query.

• package -> root

  $ yarn workspace site add gatsby react react-dom theme@*
  $ yarn workspaces info
  $ yarn workspace theme add -P react react-dom gatsby
  $ yarn workspace theme add -D react react-dom gatsby
  $ yarn workspace site develop
  $ yarn workspace theme add gatsby-source-filesystem gatsby-transformer-yaml
  $ yarn workspace theme add gatsby-plugin-theme-ui theme-ui
  $ yarn workspace theme develop
  
  $ npm login
  $ cd theme/
  $ npm publish --access public

📑 yarn commands

• add

  • -W, --ignore-workspace-root-check, required to run yarn add inside a workspace root
  • -P, --peer, save package to your peerDependencies
• workspace: components add -D react
• workspaces: list, foreach, focus
• upgrade: yarn up lodash
• config
• info
• link
• publish

📑 worktree

• package.json:

  {
  	"private": true,
  	"workspaces": ["packages/*"]
  }

• Yarn Workspaces vs Lerna: Lerna will use Yarn’s workspaces if possible. Lerna is a high-level layer of the low-level Yarn implementation.