Update RAV samples to work with fetchWith create option

packages/sitecore-jss-angular/src/public_api.ts

@@ -25,8 +25,11 @@ export {
   constants,
   isExperienceEditorActive,
   resetExperienceEditorChromes,
+  DictionaryService,
   RestDictionaryService,
+  GraphQLDictionaryService,
   RestLayoutService,
+  GraphQLLayoutService,
   LayoutService,
   LayoutServiceData,
   LayoutServiceContextData,

packages/sitecore-jss-react/src/index.ts

@@ -6,10 +6,12 @@ export {
   isExperienceEditorActive,
   resetExperienceEditorChromes,
   RestDictionaryService,
+  GraphQLDictionaryService,
   DictionaryService,
   DictionaryPhrases,
   LayoutService,
   RestLayoutService,
+  GraphQLLayoutService,
   LayoutServiceData,
   LayoutServicePageState,
   LayoutServiceContext,

packages/sitecore-jss-vue/src/index.ts

@@ -7,8 +7,10 @@ export {
   resetExperienceEditorChromes,
   DictionaryService,
   RestDictionaryService,
+  GraphQLDictionaryService,
   LayoutService,
   RestLayoutService,
+  GraphQLLayoutService,
   LayoutServiceData,
   LayoutServiceContextData,
   RouteData,

samples/angular/jss-create.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const chalk = require('chalk');
 const { applyNameToProject } = require('@sitecore-jss/sitecore-jss-cli/dist/cjs/create');
 
 /**
@@ -35,5 +36,77 @@ module.exports = function createJssProject(argv, nextSteps) {
   replaceAngularAppNameInFile('scripts/bootstrap.ts');
   replaceAngularAppNameInFile('package.json');
 
+  if (!argv.fetchWith) {
+    nextSteps.push(
+      `* Did you know you can customize the Angular sample app using ${chalk.green(
+        'jss create'
+      )} parameters?`,
+      `*  ${chalk.green(
+        '--fetchWith {REST|GraphQL}'
+      )} : Specifies how Sitecore data (layout, dictionary) is fetched. Default is REST.`
+    );
+  }
+
+  setFetchWith(argv.fetchWith);
+
   return nextSteps;
 };
+
+/**
+ * Sets how Sitecore data (layout, dictionary) is fetched.
+ * @param {string} [fetchWith] {REST|GraphQL} Default is REST.
+ */
+ function setFetchWith(fetchWith) {
+  const defaultDsfFile = path.join(__dirname, 'src/app/lib/dictionary-service-factory.ts');
+  const graphQLDsfFile = path.join(__dirname, 'src/app/lib/dictionary-service-factory.graphql.ts');
+  const defaultLsfFile = path.join(__dirname, 'src/app/lib/layout-service-factory.ts');
+  const graphQLLsfFile = path.join(__dirname, 'src/app/lib/layout-service-factory.graphql.ts');
+  const FetchWith = {
+    GRAPHQL: 'graphql',
+    REST: 'rest',
+  };
+  let value = fetchWith ? fetchWith.toLowerCase() : FetchWith.REST;
+
+  if (value !== FetchWith.REST && value !== FetchWith.GRAPHQL) {
+    console.warn(chalk.yellow(`Unsupported fetchWith value '${fetchWith}'. Using default 'REST'.`));
+    value = FetchWith.REST;
+  }
+
+  console.log(chalk.cyan(`Applying ${value === FetchWith.REST ? 'REST' : 'GraphQL'} fetch...`));
+
+  switch (value) {
+    case FetchWith.GRAPHQL:
+      fs.unlinkSync(defaultDsfFile);
+      fs.renameSync(graphQLDsfFile, defaultDsfFile);
+      fs.unlinkSync(defaultLsfFile);
+      fs.renameSync(graphQLLsfFile, defaultLsfFile);
+      setCredentials();
+      break;
+
+    case FetchWith.REST:
+      fs.unlinkSync(graphQLDsfFile);
+      fs.unlinkSync(graphQLLsfFile);
+      break;
+  }
+}
+
+/**
+ * This function will set the 'withCredentials' key in the
+ * jss-graphql.module.ts file to `false` if --fetchWith graphql
+ * is passed into the `jss create` command.
+ */
+ function setCredentials() {
+  console.log(chalk.cyan('Setting GraphQL Client credentials...'));
+
+  const graphQLClientFactoryFile = path.join(__dirname, 'src/app/jss-graphql.module.ts');
+
+  fs.readFile(graphQLClientFactoryFile, 'utf8', (err, data) => {
+    if (err) return console.log(chalk.red(err));
+
+    const result = data.replace(/withCredentials:\strue,/g, 'withCredentials: false,'); // if fetching with GraphQL, credentials must be omitted.
+
+    fs.writeFile(graphQLClientFactoryFile, result, 'utf8', (err) => {
+      if (err) return console.log(chalk.red(err));
+    });
+  });
+}

samples/angular/package.json

@@ -10,7 +10,7 @@
     "sitecoreDistPath": "/dist/JssAngularWeb",
     "sitecoreConfigPath": "/App_Config/Include/zzz",
     "buildArtifactsPath": "./dist",
-    "graphQLEndpointPath": "/api/jssangularweb",
+    "graphQLEndpointPath": "/sitecore/api/graph/edge",
     "language": "en"
   },
   "engines": {

samples/angular/scripts/generate-config.ts

@@ -96,6 +96,5 @@ function addGraphQLConfig(baseConfig: { [key: string]: unknown }) {
 
   // eslint-disable-next-line no-param-reassign
   baseConfig.graphQLEndpoint = `${baseConfig.sitecoreApiHost}${
-    baseConfig.graphQLEndpointPath
-  }?sc_apikey=${baseConfig.sitecoreApiKey}`;
+    baseConfig.graphQLEndpointPath}`;
 }

samples/angular/sitecore/config/JssAngularWeb.config

@@ -7,7 +7,9 @@
   Normally `jss deploy config` can do this for local development. To manually deploy, or to deploy via CI,
   this file can be placed in the `App_Config/Include` folder, or a subfolder of it, within the Sitecore site.
 -->
-<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/" xmlns:role="http://www.sitecore.net/xmlconfig/role/">
+<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"
+  xmlns:set="http://www.sitecore.net/xmlconfig/set/"
+  xmlns:role="http://www.sitecore.net/xmlconfig/role/">
   <sitecore>
     <settings>
       <!--
@@ -29,13 +31,7 @@
         but disables workflow and publishing. Before going to production, change the `database`
         below to `web` instead of `master`.
       -->
-      <site patch:before="site[@name='website']"
-            inherits="website"
-            name="JssAngularWeb"
-            hostName="JssAngularWeb"
-            rootPath="/sitecore/content/JssAngularWeb"
-            startItem="/home"
-            database="master" />
+      <site patch:before="site[@name='website']" inherits="website" name="JssAngularWeb" hostName="JssAngularWeb" rootPath="/sitecore/content/JssAngularWeb" startItem="/home" database="master" />
     </sites>
     <javaScriptServices>
       <apps>
@@ -48,12 +44,7 @@
 
           NOTE: graphQLEndpoint enables _Integrated GraphQL_. If not using integrated GraphQL, it can be removed.
         -->
-        <app name="JssAngularWeb"
-             sitecorePath="/sitecore/content/JssAngularWeb"
-             inherits="defaults"
-             useLanguageSpecificLayout="true"
-             graphQLEndpoint="/api/jssangularweb"
-        />
+        <app name="JssAngularWeb" sitecorePath="/sitecore/content/JssAngularWeb" inherits="defaults" useLanguageSpecificLayout="true" graphQLEndpoint="/sitecore/api/graph/edge" />
       </apps>
       <!--
         IMAGE RESIZING WHITELIST
@@ -69,76 +60,37 @@
        -->
       <allowedMediaParams>
         <!-- XML element name is arbitary, useful for organizing and patching -->
-        <styleguide-image-sample>
-          mw=100,mh=50
+        <styleguide-image-sample> mw=100,mh=50
         </styleguide-image-sample>
-        <styleguide-image-sample-adaptive>
-          mw=300
-          mw=100
+        <styleguide-image-sample-adaptive> mw=300 mw=100
         </styleguide-image-sample-adaptive>
       </allowedMediaParams>
     </javaScriptServices>
-    <api>
-      <!--
-        Define the app's Sitecore GraphQL API endpoint
-        Note: this can be removed if you are not using GraphQL.
-        Note: the endpoint must be defined both for integrated and connected type GraphQL queries.
-      -->
-      <GraphQL>
-        <endpoints>
-          <jssAngularWebGraphQLEndpoint url="/api/jssangularweb" type="Sitecore.Services.GraphQL.Hosting.DatabaseAwareGraphQLEndpoint, Sitecore.Services.GraphQL.NetFxHost" resolve="true">
-            <url>$(url)</url>
-
-            <enabled>true</enabled>
-            <enableSubscriptions>true</enableSubscriptions>
-
-            <!-- lock down the endpoint when deployed to content delivery -->
-            <graphiql role:require="ContentDelivery">false</graphiql>
-            <enableSchemaExport role:require="ContentDelivery">false</enableSchemaExport>
-            <enableStats role:require="ContentDelivery">false</enableStats>
-            <enableCacheStats role:require="ContentDelivery">false</enableCacheStats>
-            <disableIntrospection role:require="ContentDelivery">true</disableIntrospection>
-
-            <schema hint="list:AddSchemaProvider">
-              <content type="Sitecore.Services.GraphQL.Content.ContentSchemaProvider, Sitecore.Services.GraphQL.Content">
-                <!-- scope typed template generation to just this app's templates -->
-                <templates type="Sitecore.Services.GraphQL.Content.TemplateGeneration.Filters.StandardTemplatePredicate, Sitecore.Services.GraphQL.Content">
-                  <database>context</database>
-                  <paths hint="list:AddIncludedPath">
-                    <templates>/sitecore/templates/Project/JssAngularWeb</templates>
-                  </paths>
-                  <fieldFilter type="Sitecore.Services.GraphQL.Content.TemplateGeneration.Filters.StandardFieldFilter, Sitecore.Services.GraphQL.Content">
-                    <exclusions hint="raw:AddFilter">
-                      <!--
-                          Remove system fields from the API (e.g. __Layout) to keep the schema lean
-                      -->
-                      <exclude name="__*" />
-                    </exclusions>
-                  </fieldFilter>
-                </templates>
-
-                <queries hint="raw:AddQuery">
-                  <!-- enable querying on items via this API -->
-                  <query name="item" type="Sitecore.Services.GraphQL.Content.Queries.ItemQuery, Sitecore.Services.GraphQL.Content" />
-                </queries>
-
-                <fieldTypeMapping ref="/sitecore/api/GraphQL/defaults/content/fieldTypeMappings/standardTypeMapping" />
-              </content>
-            </schema>
-
-            <!-- Enables the 'jss' graph nodes that are preformatted to use with JSS rendering components, and the datasource resolving queries for JSS -->
-            <extenders hint="list:AddExtender">
-              <layoutExtender type="Sitecore.JavaScriptServices.GraphQL.JssExtender, Sitecore.JavaScriptServices.GraphQL" resolve="true" />
-            </extenders>
-
-            <!-- Determines the security of the service. 'publicService' is open to anonymous access, but requires an SSC API key. -->
-            <security ref="/sitecore/api/GraphQL/defaults/security/publicService" />
+    <!--
+      Media URLs resolving
+      Tells Sitecore to not include the Sitecore server URL as part of the media requests, so that they are instead routed through Next.js rewrites (see next.config.js).
+      This eliminates exposing the Sitecore server publicly.
 
-            <!-- Determines how performance is logged for the service. Defaults are defined in Sitecore.Services.GraphQL.config -->
-            <performance ref="/sitecore/api/GraphQL/defaults/performance/standard" />
-          </jssAngularWebGraphQLEndpoint>
-        </endpoints>
-      </GraphQL>
-    </api>
+      "default" configuration is used for Sitecore GraphQL Edge requests.
+      "jss" configuration is used for Sitecore Layout Service REST requests.
+    -->
+    <layoutService>
+      <configurations>
+        <config name="default">
+          <rendering>
+            <renderingContentsResolver>
+              <IncludeServerUrlInMediaUrls>false</IncludeServerUrlInMediaUrls>
+            </renderingContentsResolver>
+          </rendering>
+        </config>
+        <config name="jss">
+          <rendering>
+            <renderingContentsResolver>
+              <IncludeServerUrlInMediaUrls>false</IncludeServerUrlInMediaUrls>
+            </renderingContentsResolver>
+          </rendering>
+        </config>
+      </configurations>
+    </layoutService>
   </sitecore>
 </configuration>

samples/angular/sitecore/definitions/components/graph-ql-integrated-demo.sitecore.graphql

@@ -5,25 +5,25 @@
 # within the context of the IntegratedDemoQuery _operation_. This makes it
 # very efficient at gathering data from multiple sources.
 
-query IntegratedDemoQuery($datasource: String!, $contextItem: String!) {
+query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
   # Datasource query
   # $datasource will always be set to the ID of the rendering's datasource item
   # (as long as the GraphQLData helper is used)
-  datasource(value: $datasource) {
+  datasource: item(path: $datasource, language: $language) {
     id
     name
     # Strongly-typed querying on known templates is possible!
     ...on GraphQLIntegratedDemo {
       # Single-line text field
       sample1 {
-        # the 'jss' field is a JSON blob that represents the object that
+        # the 'jsonValue' field is a JSON blob that represents the object that
         # should be passed to JSS field rendering helpers (i.e. text, image, link)
-        jss
+        jsonValue
         value
       }
       # General Link field
       sample2 {
-        jss
+        jsonValue
         # Structured querying of the field's values is possible
         text
         target
@@ -40,7 +40,7 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!) {
   # Context/route item query
   # $contextItem will always be set to the ID of the current context item (the route item)
   # (as long as the GraphQLData helper is used)
-  contextItem: item(path: $contextItem) {
+  contextItem: item(path: $contextItem, language: $language) {
     id
     # Get the page title from the app route template
     ...on AppRoute {
@@ -50,18 +50,22 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!) {
     }
 
     # List the children of the current route
-    children(requirePresentation: true) {
-      id
-      # typing fragments can be used anywhere!
-      # so in this case, we're grabbing the 'pageTitle'
-      # field on all child route items.
-      ...on AppRoute {
-        pageTitle {
-          value
-          jss
+    children(hasLayout: true) {
+      results {
+        id
+        # typing fragments can be used anywhere!
+        # so in this case, we're grabbing the 'pageTitle'
+        # field on all child route items.
+        ...on AppRoute {
+          pageTitle {
+            jsonValue
+            value
+          }
+        }
+        url{
+          path
         }
       }
-      url(options: { disableLanguageEmbedding: true })
     }
   }
 }