Code-splitting and Static Query JSON files

[dougquidd]

Hi,

I am developing a site with Gatsby and have a requirement to create a "Members Area" which will require authentication and contain sensitive data, so we have decided to use Client Side routing for this part of the site. Static data, predominantly coming from the CMS, is fetched using the useStaticQuery hook.

The problem I have come across is that all the CMS data for the entire member's area is fetched on the initial page load in JSON files. Right now, this isn't a problem, but as the site grows I would like to only load content as it is required. I have tried code splitting using both react-loadable and loadable-components, and although both approaches successfully chunk the Javascript, it doesn't have any effect on the JSON.

Is there any to achieve this within Gatsby?

Thanks

[herecydev]

I think that's the balance with client side routing, you're effectively asking Gatsby not to take ownership of routing. So the process becomes:

1. Load "members area" Gatsby page
2. Load page data
3. Load all "members area" static hashes
4. Page is rendered
5. "Sub pages" in the members area are just client side and don't mean anything to Gatsby

Static queries are a super neat way of accessing data, but I've had some concerns with them at scale as well, we have a lot of smaller queries (all under 1KB files) but each page is starting to depend on 20+ static query results. So that's a lot of HTTP requests.

In your case it would be nice to instruct the useStaticQuery to resolve using a dynamic import, so it effectively becomes:

const MyComponent = () => {
-  const data = useStaticQuery(graphql`
-    foo {
-      bar
-    }
-  `)
+  const [data, setData] = useState()

+  useEffect(() => {
+   setData(await import("./sq/d/12837123.json"))
+  }, [])

 return <div>{data.foo.bar}</div>
}

You would no longer have the guarantee of "data is always there", so you would have to conditionally render things. This is probably a large part of why this doesn't exist. How much data do you think you'll be sourcing in your "members area"?

[KyleAMathews]

Two ways of handling this that come to mind:

1. Write out the data to individual JSON files — you can do this in gatsby-node.js in the onPostBuild step and run graphql queries there & write out data that you load as needed.
2. Since this is members-only data so presumably load would lower, you could proxy requests directly to the CMS. Depending on the CMS, response time & load on the CMS would be fine.