🪕 new CMS

• manage data using purpose-built tools
• load data from anywhere using APIs
• build custom UIs that combine multiple data sources

• algolia: search
• contentful: content
• cloudinary: assets
• stripe: commerce stuff (shopify), (Paypal)

🪕 How to tame(驯服) the content mesh(网状)

• centralize data access with GraphQL
• serve only optimized static assets (SVG) go static for everything: blazing(炽烈) fast performance

🪕 How this works in Gatsby

• Node APIs to load any data source inot GraphQL
• Early bind data at build time
• Generate static assets
• automate performance tuning
• delpoy to a CDN (e.g. Netlify)
• rehydrate(补水) to a React app in the browser

🪕 Apollo Client + Gatsby

• gatsby-config.js

  module.exports = {
  	plugins: [
  		{
  			resolve: "gatsby-source-graphql",
  			options: {
  				url: "...",
  			},
  		},
  	],
  };

• src/apollo/client.js (gatsby-browser.js, ApolloProvider)

  export const client = new ApolloClient({
  	uri: "...",
  	fetch,
  });

🪕new Ecommerce (Stripe, Checkout)

• International Currency Format: Intl.NumberFormat
• SVG icons
• gatsby-plugin-stripe, gatsby-source-stripe
• stripe-ecomm ?