pristas-peter / gatsby-plugin-graphql-component Goto Github PK

Firstly great plugin!!

Question:
If I use a StaticQuery to query all my components in wrapper component file, will I still see the code-splitting/performance benefits even if I only return a select component?

Example:
To give an example, this is what I'm working with...

import React from "react";
import { graphql, useStaticQuery } from "gatsby";

const AllComponents = ({ layoutType, componentData }) => {

  const componentType = componentData.fieldGroupName;
  const {Banner} = useStaticQuery(graphql`query ComponentQuery {Banner}`);

  const Default = () => <div>In AllComponents the mapping of this component is missing: {componentType}</div>;

  /**
   * Mapping the fieldGroupName(s) to our components
   */
  const components = {
    [`${layoutType}_Components_Banner`]: Banner,
    page_default: Default
  };

  /**
   * If layout type is not existing in our mapping, it shows our Default instead.
   */
  const ComponentTag = components[componentType] ? components[componentType] : components['page_default'];

  return (
    <ComponentTag {...componentData} />
  )
};

export default AllComponents;

I am just using the Banner component as a rudimentary example. The idea is I would be querying all my components to dynamically render the appropriate one based on the componentType. AllComponents is essentially a wrapper component for this purpose, and is implemented in a parent layout elsewhere like this...

import React from "react";
import AllComponents from "../../components/UtilWrappers/AllComponents";

const FullWidth = ({fieldGroupName, components}) => {

  const layoutType = fieldGroupName;

  return (
    <section style={{ position: "relative" }}>
      {
        components.map((component, index) => {
          return <AllComponents key={index} componentData={component} layoutType={layoutType} />
        })
      }
    </section>
  );

};

export default FullWidth;

I'm trying to find a work around to importing all potential components into the AllComponents file because of performance implications, and this plugin looked like a great potential option.

However, I don't know if I am miss using this plugin, and by querying all components in my AllComponents file I'm just recreating the same problem I have by importing all components.

Any advice/guidance is appreciated! And one again, great plugin!

Maybe I'm doing something completely wrong but I couldn't get this plugin to work on a test project when I ran gatsby serve so I figured I'd poke around your docs and see if I could get your example working locally and it works fine if you only run gatsby develop but running gatsby build gives me this

ERROR #11321  PLUGIN

"gatsby-plugin-graphql-component" threw an error while running the onPreBuild lifecycle:

ENOENT: no such file or directory, open '/gatsby-plugin-graphql-component/examples/gatsby-plugin-graphql-component-default-example/public/page-data/sq/d/3596933046.json'

I don't get that exact same error on my test project. I get this:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

but I'm not doing anything crazy, just following the docs and I can't run gatsby serve :( Any insight would be much appreciated!

Hi @pristas-peter ,

Thank you again for this great plugin. I've adapted it to my project, where we resolve components based on CMS ids.

However, there is an issue that I am facing:
When a user is surfing the website, and we change one of the components in the code and redeploy - a component chunk name has a different hash. As a result, when a user navigates to the page - the old component chunk is no longer present and we get the following error:

I reproduced it in this fork example.

Steps to reproduce:

1. npm run build && npm run serve
2. Open the home page in the browser
3. Go to the tester.js and change the component to:

export default () => `Testeros modified`

4. Run npm run clean && npm run build && npm run serve
5. Go back to the home page (do not refresh), and click on the link: "To Tester"
6. Check console

I tried the same scenario but on the Gatsby page template (blog-post.js), and when the user hovers on the link, we get a 404 for that page chunk - because of this when clicking on the link Gatsby forces a hard page load, and we get the updated chunk. I wish we could do the same for the component chunks: when the chunk is not found, hard reload the page which will download the new chunk.

Could you please suggest how to achieve that, or fix it the plugin?

Hi @pristas-peter ,

First of all, amazing plugin! It's about to help me big time!

I've just cloned the example repo, and tried to build it, but it throws the following error:

 ERROR #11321  PLUGIN

"gatsby-plugin-graphql-component" threw an error while running the onPreBuild lifecycle:

ENOENT: no such file or directory, open '/Users/ilyas_assainov/Desktop/Projects/Shipa/public/static/d/8652886.json'



  Error: ENOENT: no such file or directory, open '/Users/ilyas_assainov/Desktop/Projects/Shipa/public/static/d/8652886.json'

not finished Generating image thumbnails - 6.425s

(sharp:56268): GLib-CRITICAL **: 22:31:48.308: g_hash_table_lookup: assertion 'hash_table != NULL' failed

(sharp:56268): GLib-CRITICAL **: 22:31:48.690: g_hash_table_lookup: assertion 'hash_table != NULL' failed

I've noticed there is no such path in the public folder, the path is probably /Users/ilyas_assainov/Desktop/Projects/Shipa/public/page-data/sq/d/8652886.json - that's where that file is located!

Could you please fix it? Or suggest a fix so I can make a PR?

In my usage, this plugin fails on build if the site uses the pathPrefix option in gatsby-config.js, and of course with the --prefix-paths option supplied to gatsby build. I've tried to find a solution using Gatsby's withPrefix function, which should be the canonical way of handling this, but no luck so far