Add Flag to Preserve GraphQL Queries After Extraction

[reilnuud]

Currently, there's no easy way to grab the contents of a GraphQL query during run time, or a way to access it during build and store it in the pageContext. There's probably a dozen different ways this could be implemented, and I would love to be corrected on this, but a few devs and I have gone back and forth on this one and we haven't found anything satisfactory.

At the present time, the query gets extracted so trying to access the query just returns the hash instead of the query -- we just get a string of numbers tied to the response, the original query is nowhere to be found.

It makes sense to extract the queries and remove them from the bundle by default, they would add a few kb uncompressed depending on the number of different queries, however there are quite a few use cases where you'd want to access the query at runtime, the number one 1 use case being data preview which could look like this:

gatsby-config.js

module.exports = {
  preserveQueries: true,
  ...rest,
};

SomePageComponent.js

...
export const query = graphql`...`
...
const SomePageComponent = ({ data, pageContext }) => {
  const { data, isPreview } = usePreview( data, pageContext.query);
  const resolvedData = useMemo(() => dataResolver(data), [isPreview]);
  return <PageTemplate data={resolvedData} />;
}
export default SomePageComponent;
...

The idea here is that usePreview checks the url for a token or preview url param (whatever your CMS uses) and then fetches the preview data inside a custom hook. The way we used to do this, we just copy-pasted the query and assign it to previewQuery and use it like usePreview( data, previewQuery) but this approach is less than ideal because if you make any changes to the schema or query, you'd need to update it in more than one place--not DRY, prone to errors, etc.

Our new way of doing this is reading the files as text and using a regex to extract the query and then inject it into the pageContext during createPages. It's suuuuuper hacky, but it works, doesn't really impact the build time, and prevents the "forgot to copy-paste the query again" error.

But, if we were to be able to grab the query from the page context after enabling this flag, then we wouldn't have these other issues -- the query is the exact same one we're using to build the page initially.

This approach would also remove the need to significantly refactor the query extraction process which say preserving the value of the query var would do.

The one problem I can see in including the query in the pageContext is that page's data will grow by a few kb (uncompressed) -- especially for rather long queries. If there was some other way to store these so they only get loaded on-demand, that would be ideal.

[KyleAMathews]

hmmm less hacky than regex — babel would be consistently correct for parsing. A plugin could extract all the queries and write them out to files in the public folder e.g. public/_queries/this-page-component.graphql. These could then be loaded via a fetch call.

[KyleAMathews]

Oh wait, even easier. A plugin could pull them from the internal redux store and write them to disk. Something like this would work (not tested):

exports.onPostBootstrap = ({store}) => {
  // queries is a map of a page component path to the extract query
  const queries = store.getState().queries.trackedQueries
  
  // loop over the query and write out to disk.
}

[reilnuud]

Ah, didn't think to use babel in that way here. That's probably a much more reliable approach.

Took a quick look at the redux method, but the actual queries aren't stored there -- I just get the path and status (e.g. dirty, running, etc). Unless I'm missing something?

Going to take a pass at the babel method tomorrow -- conceptually feels like the best approach given the current setup.

[KyleAMathews]

oh actually I think it's on the components:

const components = store.getState().components
const queries = components.values().map(component => component.query)

[reilnuud]

oh actually I think it's on the components:

const components = store.getState().components
const queries = components.values().map(component => component.query)

Beautiful -- that did the trick. Here's what we ended up doing to get and organize the queries -- now we just have to determine the best way to access at runtime.

exports.onPostBootstrap = ({ store }) => {
  // get components from state
  const { components } = store.getState();
  // create object containing queries like [componentName]: query
  const queries = Array.from(components).reduce((a, [, b]) => {
    const fileName = b.componentPath.split("/").pop();
    const componentName = fileName.split(".")[0];
    return { ...a, [componentName]: b.query };
  }, {});
};