create-sitecore-jss 20.0.0-canary.78

package/dist/templates/nextjs-styleguide/sitecore/definitions/templates/Styleguide-Explanatory-Component.sitecore.ts

@@ -0,0 +1,20 @@
+// eslint-disable-next-line no-unused-vars
+import { CommonFieldTypes, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * This is a standalone _base template_ that is inherited by components in the styleguide that need to
+ * show explanatory text. The fields on this template are implicitly available on inherited components.
+ * Note: inherited fields cannot be modified when inherited (e.g. with different validation rules or help text).
+ * Ensure that there is truly an inheritance relationship and not merely "they happen share some fields" before using inheritance.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideExplanatoryComponent(manifest: Manifest): void {
+  manifest.addTemplate({
+    name: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-Explanatory-Component',
+    id: '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
+    fields: [
+      { name: 'heading', type: CommonFieldTypes.SingleLineText },
+      { name: 'description', type: CommonFieldTypes.RichText },
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.ts

@@ -0,0 +1,13 @@
+// eslint-disable-next-line no-unused-vars
+import { CommonFieldTypes, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * This is the data template for an individual _item_ in the Styleguide's Content List field demo.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideItemLinkItemTemplate(manifest: Manifest): void {
+  manifest.addTemplate({
+    name: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template',
+    fields: [{ name: 'textField', type: CommonFieldTypes.SingleLineText }],
+  });
+}

package/dist/templates/nextjs-styleguide/src/Navigation.tsx

@@ -0,0 +1,41 @@
+import Link from 'next/link';
+import { useI18n } from 'next-localization';
+import { getPublicUrl } from '@sitecore-jss/sitecore-jss-nextjs';
+
+// Prefix public assets with a public URL to enable compatibility with Sitecore Experience Editor.
+// If you're not supporting the Experience Editor, you can remove this.
+const publicUrl = getPublicUrl();
+
+const Navigation = (): JSX.Element => {
+  const { t } = useI18n();
+
+  return (
+    <div className="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom">
+      <h5 className="my-0 mr-md-auto font-weight-normal">
+        <Link href="/">
+          <a className="text-dark">
+            <img src={`${publicUrl}/sc_logo.svg`} alt="Sitecore" />
+          </a>
+        </Link>
+      </h5>
+      <nav className="my-2 my-md-0 mr-md-3">
+        <a
+          className="p-2 text-dark"
+          href="https://jss.sitecore.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {t('Documentation')}
+        </a>
+        <Link href="/styleguide">
+          <a className="p-2 text-dark">{t('Styleguide')}</a>
+        </Link>
+        <Link href="/graphql">
+          <a className="p-2 text-dark">{t('GraphQL')}</a>
+        </Link>
+      </nav>
+    </div>
+  );
+};
+
+export default Navigation;

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Checkbox.tsx

@@ -0,0 +1,52 @@
+import { Field, getFieldValue } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideFieldUsageCheckboxProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    fields: {
+      checkbox: Field<boolean>;
+      checkbox2: Field<boolean>;
+    };
+  };
+
+/**
+ * Demonstrates usage of a Checkbox (boolean) content field within JSS.
+ */
+const StyleguideFieldUsageCheckbox = (props: StyleguideFieldUsageCheckboxProps): JSX.Element => (
+  <StyleguideSpecimen {...props} e2eId="styleguide-fieldusage-checkbox">
+    {/* Checkbox fields do not have the ability to be inline edited, so they are directly accessed via their value: */}
+    <ul>
+      {/*
+        The getFieldValue helper allows safely extracting a field value that could be undefined,
+        without needing to check that props.fields or props.fields.checkbox are traversable,
+        and allowing the specification of an optional default value (default is undefined if unspecified).
+       */}
+      {props.fields && props.fields.checkbox && props.fields.checkbox.value && (
+        <li>
+          <code>checkbox</code> is true
+        </li>
+      )}
+      {!props.fields ||
+        !props.fields.checkbox ||
+        (!props.fields.checkbox.value && (
+          <li>
+            <code>checkbox</code> is false
+          </li>
+        ))}
+      {getFieldValue(props.fields, 'checkbox2', false) && (
+        <li>
+          <code>checkbox2</code> is true
+        </li>
+      )}
+      {!getFieldValue(props.fields, 'checkbox2', false) && (
+        <li>
+          <code>checkbox2</code> is false
+        </li>
+      )}
+    </ul>
+  </StyleguideSpecimen>
+);
+
+export default StyleguideFieldUsageCheckbox;

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-ContentList.tsx

@@ -0,0 +1,58 @@
+import { Field, Text, Item, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideFieldUsageContentListProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    fields: {
+      sharedContentList: Item[];
+      localContentList: Item[];
+    };
+  };
+
+/**
+ * Demonstrates usage of a Content List field type within JSS.
+ * Content Lists are references to 0..n other content items.
+ * In Sitecore terms, this maps by default to a Treelist field.
+ */
+const StyleguideFieldUsageContentList = (
+  props: StyleguideFieldUsageContentListProps
+): JSX.Element => {
+  const { sharedContentList, localContentList } = props.fields;
+
+  return (
+    <StyleguideSpecimen {...props} e2eId="styleguide-fieldusage-content-list">
+      <h5>Shared Content List</h5>
+      {/*
+      Content list fields are returned with their value as an array of the referenced items.
+      So we can use the .map() array function to traverse them. Ensure a `key` attribute is set
+      on each element to make React's DOM updating happy:
+     */}
+      {sharedContentList &&
+        sharedContentList.map((listItem, index) => (
+          <div key={`sharedListItem-${index}`}>
+            {/* The referenced item's fields can be rendered and edited using normal helper components: */}
+            <p>
+              Field: <Text field={listItem.fields.textField as Field<string>} />
+            </p>
+          </div>
+        ))}
+
+      <h5>Local Content List</h5>
+      {localContentList &&
+        localContentList.map((listItem, index) => (
+          <div key={`localListItem-${index}`}>
+            {/* The referenced item's fields can be rendered and edited using normal helper components: */}
+            <p>
+              Field: <Text field={listItem.fields.textField as Field<string>} />
+            </p>
+          </div>
+        ))}
+    </StyleguideSpecimen>
+  );
+};
+
+export default withDatasourceCheck()<StyleguideFieldUsageContentListProps>(
+  StyleguideFieldUsageContentList
+);

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Custom.tsx

@@ -0,0 +1,25 @@
+import { Field, Text, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideFieldUsageCustomProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    fields: {
+      customIntField: Field<string>;
+    };
+  };
+
+/**
+ * Demonstrates usage of a custom content field type within JSS.
+ * See /sitecore/definitions/components/Styleguide-FieldUsage-Custom.sitecore.js
+ * for the definition of the structure of the custom field. This code is just for display.
+ */
+const StyleguideFieldUsageCustom = (props: StyleguideFieldUsageCustomProps): JSX.Element => (
+  <StyleguideSpecimen {...props} e2eId="styleguide-fieldusage-custom">
+    {/* Because the integer field is essentially text, we can render it with the Text helper */}
+    <Text field={props.fields.customIntField} />
+  </StyleguideSpecimen>
+);
+
+export default withDatasourceCheck()<StyleguideFieldUsageCustomProps>(StyleguideFieldUsageCustom);

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Date.tsx

@@ -0,0 +1,55 @@
+import { DateField, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideFieldUsageDateProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    fields: {
+      date: Field<string>;
+      dateTime: Field<string>;
+    };
+  };
+
+/**
+ * Demonstrates usage of date and time content field types within JSS.
+ */
+const StyleguideFieldUsageDate = (props: StyleguideFieldUsageDateProps): JSX.Element => {
+  return (
+    <StyleguideSpecimen {...props} e2eId="styleguide-fieldusage-date">
+      <ul>
+        <li>
+          Date helper: <DateField field={props.fields.date} />
+        </li>
+        <li>
+          Date helper (datetime): <DateField field={props.fields.dateTime} />
+        </li>
+        <li>
+          UTC Date string:&nbsp;
+          {/*
+            Date helper supports a render props API to give you direct access to the JS Date object for formatting.
+            IMPORTANT: the render prop is ignored when in Experience Editor mode to support inline editing.
+          */}
+          <DateField field={props.fields.date} render={(date) => date && date.toUTCString()} />
+        </li>
+        <li>
+          Localized Date string (local timezone):&nbsp;
+          <DateField
+            field={props.fields.date}
+            render={(date) => date && date.toLocaleDateString()}
+          />
+        </li>
+        <li>
+          Localized DateTime string (local timezone):&nbsp;
+          {/* React components can also be returned from the render props for wrapping */}
+          <DateField
+            field={props.fields.dateTime}
+            render={(date) => <em>{date && date.toLocaleString()}</em>}
+          />
+        </li>
+      </ul>
+    </StyleguideSpecimen>
+  );
+};
+
+export default withDatasourceCheck()<StyleguideFieldUsageDateProps>(StyleguideFieldUsageDate);

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-File.tsx

@@ -0,0 +1,30 @@
+import { File, FileField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideFieldUsageFileProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    fields: {
+      file: FileField;
+    };
+  };
+
+/**
+ * Demonstrates usage of a File content field within JSS.
+ * File types are stored within Sitecore's Media Library data, and can be edited.
+ */
+const StyleguideFieldUsageFile = (props: StyleguideFieldUsageFileProps): JSX.Element => (
+  <StyleguideSpecimen {...props} e2eId="styleguide-fieldusage-file">
+    {/* Renders a file link */}
+    <File field={props.fields.file} />
+    <br />
+
+    {/* Renders a file link with a custom body and opening in a new tab */}
+    <File field={props.fields.file} target="_blank">
+      Custom link body
+    </File>
+  </StyleguideSpecimen>
+);
+
+export default withDatasourceCheck()<StyleguideFieldUsageFileProps>(StyleguideFieldUsageFile);

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx

@@ -0,0 +1,58 @@
+import { Image, ImageField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideFieldUsageImageProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    fields: {
+      sample1: ImageField;
+      sample2: ImageField;
+    };
+  };
+
+/**
+ * Demonstrates usage of an Image content field within JSS.
+ * Image field data is uploaded into the Sitecore Media Library.
+ */
+const StyleguideFieldUsageImage = (props: StyleguideFieldUsageImageProps): JSX.Element => (
+  <StyleguideSpecimen {...props} e2eId="styleguide-fieldusage-image">
+    <p>Plain image</p>
+    <Image media={props.fields.sample1} />
+
+    {/*
+      Advanced image usage example
+      editable: controls whether image can be edited in Sitecore Experience Editor
+      imageParams: parameters that are passed to Sitecore to perform server-side resizing of the image.
+        Sample rescales image to max 100x50 dimensions on the server, respecting aspect ratio
+        IMPORTANT: imageParams must be whitelisted for resizing to occur. See /sitecore/config/*.config (search for 'allowedMediaParams')
+      any other attributes: pass through to img tag
+    */}
+    <p>Advanced image (not editable)</p>
+    <Image
+      field={props.fields.sample2}
+      editable={false}
+      imageParams={{ mw: 100, mh: 50 }}
+      height="50"
+      width="94"
+      data-sample="other-attributes-pass-through"
+    />
+
+    {/*
+      Srcset adaptive image usage example
+      Adaptive srcsets are supported using Sitecore server-side resizing.
+      The `srcSet` can use Sitecore image resizing parameters (i.e. w, h, mw, mh).
+      Sample create a srcset using two sizes (server resizing), 300 and 100px max widths, respecting aspect ratio.
+      IMPORTANT: srcSet params must be whitelisted for adaptive resizing to occur. See /sitecore/config/*.config (search for 'allowedMediaParams')
+    */}
+    <p>Srcset responsive image</p>
+    <Image
+      field={props.fields.sample2}
+      srcSet={[{ mw: 300 }, { mw: 100 }]}
+      sizes="(min-width: 960px) 300px, 100px"
+      className="img-fluid"
+    />
+  </StyleguideSpecimen>
+);
+
+export default withDatasourceCheck()<StyleguideFieldUsageImageProps>(StyleguideFieldUsageImage);

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-ItemLink.tsx

@@ -0,0 +1,50 @@
+import { Field, Text, Item, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideFieldUsageItemLinkProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    fields: {
+      sharedItemLink: Item;
+      localItemLink: Item;
+    };
+  };
+
+/**
+ * Demonstrates usage of a Content Link content field within JSS.
+ * Content links are a reference to a single other piece of content.
+ */
+const StyleguideFieldUsageItemLink = (props: StyleguideFieldUsageItemLinkProps): JSX.Element => {
+  const { sharedItemLink, localItemLink } = props.fields;
+
+  return (
+    <StyleguideSpecimen {...props} e2eId="styleguide-fieldusage-itemlink">
+      <h5>Shared Item Link</h5>
+      {/*
+        Item link fields are returned with their value as the referenced item value.
+      */}
+      {sharedItemLink && (
+        <div>
+          {/* The referenced item's fields can be rendered and edited using normal helper components: */}
+          <p>
+            Field: <Text field={sharedItemLink.fields.textField as Field<string>} />
+          </p>
+        </div>
+      )}
+
+      <h5>Local Item Link</h5>
+      {localItemLink && (
+        <div>
+          <p>
+            Field: <Text field={localItemLink.fields.textField as Field<string>} />
+          </p>
+        </div>
+      )}
+    </StyleguideSpecimen>
+  );
+};
+
+export default withDatasourceCheck()<StyleguideFieldUsageItemLinkProps>(
+  StyleguideFieldUsageItemLink
+);

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Link.tsx

@@ -0,0 +1,46 @@
+import { Link, LinkField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideFieldUsageLinkProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    fields: {
+      externalLink: LinkField;
+      internalLink: LinkField;
+      emailLink: LinkField;
+      paramsLink: LinkField;
+    };
+  };
+
+/**
+ * Demonstrates usage of a General Link (hyperlink) content field within JSS.
+ */
+const StyleguideFieldUsageLink = (props: StyleguideFieldUsageLinkProps): JSX.Element => (
+  <StyleguideSpecimen {...props} e2eId="styleguide-fieldusage-link">
+    External link:&nbsp;
+    <Link field={props.fields.externalLink} />
+    <br />
+    Internal link:&nbsp;
+    <Link field={props.fields.internalLink}>
+      <em>HTML</em> or other components can be used within link renderers, for example links to
+      images.
+    </Link>
+    <br />
+    Email link:&nbsp;
+    <Link field={props.fields.emailLink} />
+    <br />
+    All possible content params link:&nbsp;
+    <Link field={props.fields.paramsLink} />
+    <br />
+    The link component accepts params of its own:&nbsp;
+    <Link
+      field={props.fields.externalLink}
+      showLinkTextWithChildrenPresent={true}
+      className="font-weight-bold"
+      data-otherattributes="pass-through-to-anchor-tag"
+    />
+  </StyleguideSpecimen>
+);
+
+export default withDatasourceCheck()<StyleguideFieldUsageLinkProps>(StyleguideFieldUsageLink);

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Number.tsx

@@ -0,0 +1,34 @@
+import { Text, Field, getFieldValue, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideFieldUsageTextProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    fields: {
+      sample: Field<string>;
+    };
+  };
+
+/**
+ * Demonstrates usage of a Number (decimal) content field within JSS.
+ */
+const StyleguideFieldUsageText = (props: StyleguideFieldUsageTextProps): JSX.Element => {
+  const fieldValue = getFieldValue(props.fields, 'sample');
+
+  return (
+    <StyleguideSpecimen {...props} e2eId="styleguide-fieldusage-number">
+      {/* Basic emission of a number field for editing can be done with the <Text> component. */}
+      <Text field={props.fields.sample} />
+
+      {/* Direct access to the value, which is a JS number, is also supported. */}
+      <p>
+        JS value type: {typeof fieldValue}
+        <br />
+        JS value: {fieldValue}
+      </p>
+    </StyleguideSpecimen>
+  );
+};
+
+export default withDatasourceCheck()<StyleguideFieldUsageTextProps>(StyleguideFieldUsageText);

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-RichText.tsx

@@ -0,0 +1,35 @@
+import { RichText, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideFieldUsageRichTextProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    fields: {
+      sample: Field<string>;
+      sample2: Field<string>;
+    };
+  };
+
+/**
+ * Demonstrates usage of a Rich Text (HTML) content field within JSS.
+ */
+const StyleguideFieldUsageRichText = (props: StyleguideFieldUsageRichTextProps): JSX.Element => (
+  <StyleguideSpecimen {...props} e2eId="styleguide-fieldusage-richtext">
+    {/* Basic use of a rich text field. Wraps in a <div>. */}
+    <RichText field={props.fields.sample} />
+
+    {/* Advanced usage of rich text field. Specifies a custom wrapper tag, turns off Sitecore editing, and has a CSS class on the wrapper */}
+    <RichText
+      field={props.fields.sample2}
+      tag="section"
+      editable={false}
+      className="text-center"
+      data-sample="other-attributes-pass-through"
+    />
+  </StyleguideSpecimen>
+);
+
+export default withDatasourceCheck()<StyleguideFieldUsageRichTextProps>(
+  StyleguideFieldUsageRichText
+);

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Text.tsx

@@ -0,0 +1,43 @@
+import { Text, Field, getFieldValue, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideFieldUsageTextProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    fields: {
+      sample: Field<string>;
+      sample2: Field<string>;
+    };
+  };
+
+/**
+ * Demonstrates usage of a Text content field within JSS.
+ * Text fields are HTML encoded by default.
+ */
+const StyleguideFieldUsageText = (props: StyleguideFieldUsageTextProps): JSX.Element => (
+  <StyleguideSpecimen {...props} e2eId="styleguide-fieldusage-text">
+    {/* Basic use of a text field. No wrapper. */}
+    <Text field={props.fields.sample} />
+
+    {/* Advanced usage of text field. Specifies a wrapper tag, turns off Sitecore editing, supports raw HTML, and has a CSS class on the wrapper */}
+    <Text
+      field={props.fields.sample2}
+      tag="section"
+      editable={false}
+      encode={false}
+      className="font-weight-bold"
+      data-sample="other-attributes-pass-through"
+    />
+
+    {/*
+      Use this API when you need direct programmatic access to a field as a variable.
+      Note: editing such a value in Experience Editor is not possible, and direct field
+      editing must be used to edit a value emitted like this (the pencil icon when the rendering
+      is selected in xEditor)
+    */}
+    <div>Raw value (not editable): {getFieldValue(props.fields, 'sample')}</div>
+  </StyleguideSpecimen>
+);
+
+export default withDatasourceCheck()<StyleguideFieldUsageTextProps>(StyleguideFieldUsageText);

package/dist/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.graphql

@@ -0,0 +1,69 @@
+# This file contains a GraphQL query that will be executed and the result provided to
+# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
+
+# Note that we're executing _two queries_ (datasource and contextItem)
+# within the context of the ConnectedDemoQuery _operation_. This makes it
+# very efficient at gathering data from multiple sources.
+
+query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
+  # Datasource query
+  # $datasource should be set to the ID of the rendering's datasource item
+  datasource: item(path: $datasource, language: $language) {
+    id
+    name
+    # Strongly-typed querying on known templates is possible!
+    ...on <%- appPrefix ? `${helper.getPascalCaseName(appName)}` : "" %>GraphQLConnectedDemo {
+      # Single-line text field
+      sample1 {
+        # 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)
+        jsonValue
+        value
+      }
+      # General Link field
+      sample2 {
+        jsonValue
+        # Structured querying of the field's values is possible
+        text
+        target
+        url
+        # Access to the template definition is possible
+        definition {
+          type
+          shared
+        }
+      }
+    }
+  }
+
+  # Context/route item query
+  # $contextItem should be set to the ID of the current context item (the route item)
+  contextItem: item(path: $contextItem, language: $language) {
+    id
+    # Get the page title from the app route template
+    ...on <%- appPrefix ? `${helper.getPascalCaseName(appName)}` : "" %>AppRoute {
+      pageTitle {
+        value
+      }
+    }
+
+    # List the children of the current route
+    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 <%- appPrefix ? `${helper.getPascalCaseName(appName)}` : "" %>AppRoute {
+          pageTitle {
+            jsonValue
+            value
+          }
+        }
+        url{
+          path
+        }
+      }
+    }
+  }
+}