Skip to content

Instantly share code, notes, and snippets.

@lunelson

lunelson/gatsby-dynamic-modules.md

Last active August 21, 2024 12:42
Show Gist options
  • Save lunelson/9dfb9a6c4cac7d60175bb5c8ff1882e3 to your computer and use it in GitHub Desktop.
Save lunelson/9dfb9a6c4cac7d60175bb5c8ff1882e3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lunelson revised this gist Nov 19, 2020. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion gatsby-dynamic-modules.md
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,9 @@ the most viable solutions are here
    - [pristas-peter/gatsby-plugin-graphql-component: Query React Components in Gatsby GraphQL queries](https://github.com/pristas-peter/gatsby-plugin-graphql-component)


    ## loadable-components?
    ## loadable-components

    strong general solution. try this one first.

    https://loadable-components.com/
    https://github.com/hector-del-rio/gatsby-plugin-loadable-components-ssr
  2. lunelson revised this gist Nov 19, 2020. 1 changed file with 45 additions and 1 deletion.
    46 changes: 45 additions & 1 deletion gatsby-dynamic-modules.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,45 @@
    ‎‎​
    # gatsby dynamic modules, solutions

    the most viable solutions are here

    - [Better Performance using Dynamic Code Splitting in Gatsby with loadable-components - DEV](https://dev.to/itmayziii/better-performance-using-dynamic-code-splitting-in-gatsby-with-loadable-components-6am)
    - [An SEO approach to async components with loadable-components - LogRocket Blog](https://blog.logrocket.com/seo-approach-async-loadable-components/)
    - [Getting Started - Loadable Components](https://loadable-components.com/docs/getting-started/)
    - [loadable-components/main.js at master · gregberge/loadable-components](https://github.com/gregberge/loadable-components/blob/master/examples/server-side-rendering-async-node/src/server/main.js)
    - [hector-del-rio/gatsby-plugin-loadable-components-ssr: Gatsby plugin for using @loadable/component with Gatsby's SSR](https://github.com/hector-del-rio/gatsby-plugin-loadable-components-ssr)
    - [pristas-peter/gatsby-plugin-graphql-component: Query React Components in Gatsby GraphQL queries](https://github.com/pristas-peter/gatsby-plugin-graphql-component)


    ## loadable-components?

    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: https://github.com/gatsbyjs/gatsby/pull/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
    ```js
    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
    ```js
    import { getModule } from 'gatsby';

    const Component = getModule('uid-returned-from-setModule');
    ```
    - needs `process.env.GATSBY_EXPERIMENTAL_QUERY_MODULES = 1` set, in `gatsby-config.js`
  3. lunelson created this gist Nov 19, 2020.
    1 change: 1 addition & 0 deletions gatsby-dynamic-modules.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​