2

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?

1 Answer 1

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.

2
  • That's done the trick @Dave Peet really appreciate the help! Apr 28 at 7:18
  • @JonathanRobbins Awesome! Thanks for letting me know.
    – Dave Peet
    Apr 28 at 11:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.