Solutions for Dynamic Modules in Gatsby

gatsby-dynamic-modules.md

gatsby dynamic modules, solutions

the most viable solutions are here

• Better Performance using Dynamic Code Splitting in Gatsby with loadable-components - DEV
• An SEO approach to async components with loadable-components - LogRocket Blog
• Getting Started - Loadable Components
• loadable-components/main.js at master · gregberge/loadable-components
• hector-del-rio/gatsby-plugin-loadable-components-ssr: Gatsby plugin for using @loadable/component with Gatsby's SSR
• pristas-peter/gatsby-plugin-graphql-component: Query React Components in Gatsby GraphQL queries

loadable-components

strong general solution. try this one first.

https://loadable-components.com/ https://github.com/hector-del-rio/gatsby-plugin-loadable-components-ssr

gatsby-plugin-graphql-component

https://github.com/pristas-peter/gatsby-plugin-graphql-component

allows you to register components within graphQL schema, so that you can query them out in pages and use them

Gatsby Page Modules Draft

PR: gatsbyjs/gatsby#24903 demo: https://github.com/pieh/query-webpack-modules-demo-site/ published: gatsby@query-webpack-modules

• context.pageModel.setModule is a function enabled in graphQL resolvers, so it would be accessed in gatsby-node.js inside the creatSchemaCustomization or createResolvers hooks

  context.pageModel.setModule({
    source: 'abs/path/to/module',
    type: "default" | "named" | "namespace",
    importName: 'nameOfImport' // only if type == 'name'
  }); // returns a string identifier

• getModule is a function which can be imported from gatsby, and can retrieve the module by name

  import { getModule } from 'gatsby';
  
  const Component = getModule('uid-returned-from-setModule');

• needs process.env.GATSBY_EXPERIMENTAL_QUERY_MODULES = 1 set, in gatsby-config.js