'jss bootstrap' causes JavaScript heap out of memory error on graphql-let step

Question

I have the Nextjs sample app running in connected mode to my existing Sitecore v10.2 implementation using JSS v19. It's all working correctly - I'm able to create new components and edit them in the Experience Editor.

In another component I want to make a GraphQL request to get some data from Sitecore. Following the sample component GraphQL-ConnectedDemo.dynamic.tsx I have created a .graphql file with a query I've tested in Sitecore GraphQL editor <url>/sitecore/api/graph/edge/ui and the data is returned.

I have run graphql:update to update the ./src/temp/GraphQLIntrospectionResult.json file so that my GraphQL query has types. This updates the file from ~22,000 lines of code to ~615,000 as it now has representations for all the Templates from my existing Sitecore implementation.

Now when I run jss bootstrap to generate a .graphql.d.ts for my new query I receive the following error at the graphql-let step

[ graphql-let ] Generating .d.ts...

<--- Last few GCs --->

[38180:0000028409EEB070]    79499 ms: Scavenge 4048.3 (4120.0) -> 4045.5 (4137.8) MB, 8.7 / 0.0 ms  (average mu 
[38180:0000028409EEB070]    80903 ms: Mark-sweep 4058.3 (4137.8) -> 4051.3 (4147.0) MB, 1385.9 / 0.0 ms  (averagght not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
...

The issue is due to the size of GraphQLIntrospectionResult.json - if I undo changes to that file jss bootstrap completes successfully.

Therefore, is there a way to limit the scope of graphql:update such that it only generates for templates relating to my JSS App?

Answer 1

We had a similar issue. These Sitecore configs determine which templates are supported by GraphQL; these templates are then represented to the generated TypeScript.

Configs:

\App_Config\Sitecore\Services.GraphQL\sitecore.services.graphql.content.config \App_Config\Sitecore\Services.GraphQL\Sitecore.Services.GraphQL.EdgeContent.config

By default Sitecore includes templates in these paths:

 <paths hint="list:AddIncludedPath">
   <foundation>/sitecore/templates/Foundation</foundation>
   <feature>/sitecore/templates/Feature</feature>
   <project>/sitecore/templates/Project</project>
   <userdefined>/sitecore/templates/User Defined</userdefined>
 </paths>

For now, we're using a custom patch file. The patch clears the defaults and only includes the path to our JSS templates. Note, all inherited templates are still automatically included.

<templates type="Sitecore.Services.GraphQL.Content.TemplateGeneration.Filters.StandardTemplatePredicate, Sitecore.Services.GraphQL.Content">
    <database>$(1)</database>
    <!-- Only include our JSS application -->
    <paths hint="list:AddIncludedPath">
    <foundation>
        <patch:delete />
    </foundation>
    <feature>
        <patch:delete />
    </feature>
    <project>
        <patch:delete />
    </project>
    <userdefined>
        <patch:delete />
    </userdefined>
    <jssSite>/sitecore/templates/Project/OurJssSite</jssSite>
    </paths>                 
</templates>

After adding the custom patch run:

graphql:update
jss bootstrap

Your generated files will be much smaller and hopefully prevent JavaScript heap out of memory errors.