useStaticQuery outside a React component

[benweissmann]

I'm trying to write a helper function that will be used both inside React components, as well as outside React components. This helper needs to access some data that can be fetched at build-time.

I'm struggling to understand why there isn't an equivalent to useStaticQuery that can be used outside the context of a React component. Reading through the documentation on how useStaticQuery is implemented, it seems like the Gatsby build system parses the file, extracts the query, runs the query and saves the result as a JSON file, and then replaces the call to useStaticQuery with a call to, roughly, require('path/to/staticquery/result.json') which then gets bundled by Webpack.

Why does this have to be done inside a React component? Why can't non-React javascript files also use static queries to load data at build time?

[herecydev]

Because it uses React's context to distribute the data. Each query gets hashed and they can then access the same data from any react component. It's feasible that this could be achieved without react and just injecting the json as a variable in that file, but there's some complications with that, and it also leads to duplication.

Why can't you make a function that accepts an argument (the data) and then a react component that uses useStaticQuery and calls the function?

[benweissmann]

In this case, I'm trying to implement a helper function that returns the value of a feature flag. Those feature flags come from a JSON file in S3 and are known at build-time (we trigger a re-build when they change). I was hoping to load these in via gatsby-source-custom-api.

In some cases, we could pass the data in from a React component. But in other cases -- such as determining whether to run a background setInterval to refresh some data -- the helper is not being called from a React component.

I ended up using Webpack's val-loader to have Webpack run a module at build time that fetches the data, but it'd be a lot cleaner to be able to use Gatsby's data loading system.