[Chore] Removed deprecated props, updated samples to use clientFactory (

#1783)

* Updated Angular sample and exposed GraphQLRequestClient

* Upgraded React app, removed deprecated defaultProps property

* Updated node-headless-ssr-experience-edge and vue samples

* Updated comments

* Updated CHANGELOG

CHANGELOG.md

@@ -29,6 +29,10 @@ Our versioning strategy is as follows:
 
 * `[sitecore-jss-react]` Deprecated `media` prop is removed from Image component. Use `field` prop instead ([#1780](https://github.com/Sitecore/jss/pull/1780)).
 
+* `[templates/react]` `[templates/angular]` `[templates/vue]` `[templates/node-headless-ssr-experience-edge]` `[sitecore-jss-react]` `[sitecore-jss-nextjs]` ([#1783](https://github.com/Sitecore/jss/pull/1783)):
+  * GraphQL-based services can now only be initialized with clientFactory parameter. Previously deprecated option of providing endpoint and apiKey has been removed
+  * Removed deprecated _defaultProps_ react component property
+
 * `[templates/nextjs]` GraphQL-based services can now only be initialized with clientFactory parameter. Previously deprecated option of providing endpoint and apiKey has been removed ([#1780](https://github.com/Sitecore/jss/pull/1780)).
 
 * `[templates/nextjs]` `[templates/react]` `[templates/vue]` `[templates/angular]` Deprecated JSS_APP_NAME environment variable has been removed ([#1780](https://github.com/Sitecore/jss/pull/1780)).

packages/create-sitecore-jss/src/templates/angular/src/app/lib/client-factory.ts

@@ -0,0 +1,28 @@
+import {
+  GraphQLRequestClientFactoryConfig,
+  GraphQLRequestClient,
+} from '@sitecore-jss/sitecore-jss-angular';
+import { environment as env } from '../../environments/environment';
+
+// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
+
+/**
+ * Creates a new GraphQLRequestClientFactory instance
+ * @returns GraphQLRequestClientFactory instance
+ */
+export const createGraphQLClientFactory = () => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  if (env.graphQLEndpoint && env.sitecoreApiKey) {
+    clientConfig = {
+      endpoint: env.graphQLEndpoint,
+      apiKey: env.sitecoreApiKey,
+    };
+  } else {
+    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
+  }
+
+  return GraphQLRequestClient.createClientFactory(clientConfig);
+};
+
+export const clientFactory = createGraphQLClientFactory();

packages/create-sitecore-jss/src/templates/angular/src/app/lib/dictionary-service-factory.ts

@@ -5,13 +5,13 @@ import {
   constants,
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment as env } from '../../environments/environment';
+import { clientFactory } from './client-factory';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
     return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLDictionaryService({
-          endpoint: env.graphQLEndpoint,
-          apiKey: env.sitecoreApiKey,
+          clientFactory,
           siteName: env.sitecoreSiteName,
           /*
             The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current

packages/create-sitecore-jss/src/templates/angular/src/app/lib/layout-service-factory.ts

@@ -5,13 +5,13 @@ import {
   constants,
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment } from '../../environments/environment';
+import { clientFactory } from './client-factory';
 
 export class LayoutServiceFactory {
   create(): LayoutService {
     return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLLayoutService({
-          endpoint: environment.graphQLEndpoint,
-          apiKey: environment.sitecoreApiKey,
+          clientFactory,
           siteName: environment.sitecoreSiteName,
         })
       : new RestLayoutService({

packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/client-factory.ts

@@ -0,0 +1,28 @@
+import {
+  GraphQLRequestClientFactoryConfig,
+  GraphQLRequestClient,
+} from '@sitecore-jss/sitecore-jss';
+import { config } from './config';
+
+// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
+
+/**
+ * Creates a new GraphQLRequestClientFactory instance
+ * @returns GraphQLRequestClientFactory instance
+ */
+export const createGraphQLClientFactory = () => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  if (config.endpoint && config.apiKey) {
+    clientConfig = {
+      endpoint: config.endpoint,
+      apiKey: config.apiKey,
+    };
+  } else {
+    throw new Error('Please configure your endpoint and apiKey.');
+  }
+
+  return GraphQLRequestClient.createClientFactory(clientConfig);
+};
+
+export const clientFactory = createGraphQLClientFactory();

packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/index.ts

@@ -4,18 +4,17 @@ import 'dotenv/config';
 import { GraphQLLayoutService } from '@sitecore-jss/sitecore-jss/layout';
 import { GraphQLDictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
 import { config } from './config';
+import { clientFactory } from './client-factory';
 
 const server = express();
 
 const layoutService = new GraphQLLayoutService({
-  endpoint: config.endpoint,
-  apiKey: config.apiKey,
+  clientFactory,
   siteName: config.siteName,
 });
 
 const dictionaryService = new GraphQLDictionaryService({
-  endpoint: config.endpoint,
-  apiKey: config.apiKey,
+  clientFactory,
   siteName: config.siteName,
   /*
     The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current

packages/create-sitecore-jss/src/templates/react/src/lib/client-factory.js

@@ -0,0 +1,25 @@
+import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-react';
+import config from '../temp/config';
+
+// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
+
+/**
+ * Creates a new GraphQLRequestClientFactory instance
+ * @returns GraphQLRequestClientFactory instance
+ */
+export const createGraphQLClientFactory = () => {
+  let clientConfig;
+
+  if (config.graphQLEndpoint && config.sitecoreApiKey) {
+    clientConfig = {
+      endpoint: config.graphQLEndpoint,
+      apiKey: config.sitecoreApiKey,
+    };
+  } else {
+    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
+  }
+
+  return GraphQLRequestClient.createClientFactory(clientConfig);
+};
+
+export const clientFactory = createGraphQLClientFactory();

packages/create-sitecore-jss/src/templates/react/src/lib/dictionary-service-factory.js

@@ -4,13 +4,13 @@ import {
   constants,
 } from '@sitecore-jss/sitecore-jss-react';
 import config from '../temp/config';
+import { clientFactory } from './client-factory';
 
 export class DictionaryServiceFactory {
   create() {
     return process.env.REACT_APP_FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLDictionaryService({
-          endpoint: config.graphQLEndpoint,
-          apiKey: config.sitecoreApiKey,
+          clientFactory,
           siteName: config.sitecoreSiteName,
           /*
             The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current

packages/create-sitecore-jss/src/templates/react/src/lib/layout-service-factory.js

@@ -4,13 +4,13 @@ import {
   constants,
 } from '@sitecore-jss/sitecore-jss-react';
 import config from '../temp/config';
+import { clientFactory } from './client-factory';
 
 export class LayoutServiceFactory {
   create() {
     return process.env.REACT_APP_FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLLayoutService({
-          endpoint: config.graphQLEndpoint,
-          apiKey: config.sitecoreApiKey,
+          clientFactory,
           siteName: config.sitecoreSiteName,
         })
       : new RestLayoutService({

packages/create-sitecore-jss/src/templates/vue/src/lib/client-factory.js

@@ -0,0 +1,25 @@
+import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-vue';
+import config from '../temp/config';
+
+// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
+
+/**
+ * Creates a new GraphQLRequestClientFactory instance
+ * @returns GraphQLRequestClientFactory instance
+ */
+export const createGraphQLClientFactory = () => {
+  let clientConfig;
+
+  if (config.graphQLEndpoint && config.sitecoreApiKey) {
+    clientConfig = {
+      endpoint: config.graphQLEndpoint,
+      apiKey: config.sitecoreApiKey,
+    };
+  } else {
+    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
+  }
+
+  return GraphQLRequestClient.createClientFactory(clientConfig);
+};
+
+export const clientFactory = createGraphQLClientFactory();

packages/create-sitecore-jss/src/templates/vue/src/lib/dictionary-service-factory.js

@@ -4,13 +4,13 @@ import {
   constants,
 } from '@sitecore-jss/sitecore-jss-vue';
 import config from '../temp/config';
+import { clientFactory } from './client-factory';
 
 export class DictionaryServiceFactory {
   create() {
     return process.env.VUE_APP_FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLDictionaryService({
-          endpoint: config.graphQLEndpoint,
-          apiKey: config.sitecoreApiKey,
+          clientFactory,
           siteName: config.sitecoreSiteName,
           /*
             The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current

packages/create-sitecore-jss/src/templates/vue/src/lib/layout-service-factory.js

@@ -1,12 +1,12 @@
 import { GraphQLLayoutService, RestLayoutService, constants } from '@sitecore-jss/sitecore-jss-vue';
 import config from '../temp/config';
+import { clientFactory } from './client-factory';
 
 export class LayoutServiceFactory {
   create() {
     return process.env.VUE_APP_FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLLayoutService({
-          endpoint: config.graphQLEndpoint,
-          apiKey: config.sitecoreApiKey,
+          clientFactory,
           siteName: config.sitecoreSiteName,
         })
       : new RestLayoutService({

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

@@ -60,6 +60,8 @@ export {
   RetryStrategy,
   DefaultRetryStrategy,
   GraphQLClientError,
+  GraphQLRequestClientFactoryConfig,
+  GraphQLRequestClient,
 } from '@sitecore-jss/sitecore-jss/graphql';
 export {
   constants,

packages/sitecore-jss-nextjs/src/components/Link.tsx

@@ -21,7 +21,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   (props: LinkProps, ref): JSX.Element | null => {
     const {
       field,
-      editable,
+      editable = true,
       children,
       internalLinkMatcher = /^\//g,
       showLinkTextWithChildrenPresent,
@@ -72,10 +72,6 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   }
 );
 
-Link.defaultProps = {
-  editable: true,
-};
-
 Link.displayName = 'NextLink';
 
 Link.propTypes = {

packages/sitecore-jss-nextjs/src/components/NextImage.tsx

@@ -13,7 +13,7 @@ import Image, { ImageProps as NextImageProperties } from 'next/image';
 type NextImageProps = ImageProps & Partial<NextImageProperties>;
 
 export const NextImage: React.FC<NextImageProps> = ({
-  editable,
+  editable = true,
   imageParams,
   field,
   mediaUrlPrefix,
@@ -105,8 +105,4 @@ NextImage.propTypes = {
   ),
 };
 
-NextImage.defaultProps = {
-  editable: true,
-};
-
 NextImage.displayName = 'NextImage';

packages/sitecore-jss-nextjs/src/components/RichText.tsx

@@ -25,9 +25,14 @@ export type RichTextProps = ReactRichTextProps & {
 const prefetched: { [cacheKey: string]: boolean } = {};
 
 export const RichText = (props: RichTextProps): JSX.Element => {
-  const { internalLinksSelector = 'a[href^="/"]', prefetchLinks = true, ...rest } = props;
+  const {
+    internalLinksSelector = 'a[href^="/"]',
+    prefetchLinks = true,
+    editable = true,
+    ...rest
+  } = props;
   const hasText = props.field && props.field.value;
-  const isEditing = props.editable && props.field && props.field.editable;
+  const isEditing = editable && props.field && props.field.editable;
 
   const router = useRouter();
   const richTextRef = useRef<HTMLElement>(null);
@@ -77,9 +82,4 @@ RichText.propTypes = {
   ...RichTextPropTypes,
 };
 
-RichText.defaultProps = {
-  tag: 'div',
-  editable: true,
-};
-
 RichText.displayName = 'NextRichText';

packages/sitecore-jss-react/src/components/Date.tsx

@@ -24,7 +24,7 @@ export interface DateFieldProps {
 export const DateField: React.FC<DateFieldProps> = ({
   field,
   tag,
-  editable,
+  editable = true,
   render,
   ...otherProps
 }) => {
@@ -68,8 +68,4 @@ DateField.propTypes = {
   render: PropTypes.func,
 };
 
-DateField.defaultProps = {
-  editable: true,
-};
-
 DateField.displayName = 'Date';

packages/sitecore-jss-react/src/components/Image.tsx

@@ -143,7 +143,7 @@ export const getEEMarkup = (
 };
 
 export const Image: React.FC<ImageProps> = ({
-  editable,
+  editable = true,
   imageParams,
   field,
   mediaUrlPrefix,
@@ -206,8 +206,4 @@ Image.propTypes = {
   ),
 };
 
-Image.defaultProps = {
-  editable: true,
-};
-
 Image.displayName = 'Image';

packages/sitecore-jss-react/src/components/Link.tsx

@@ -41,7 +41,7 @@ export type LinkProps = React.DetailedHTMLProps<
 };
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ field, editable, showLinkTextWithChildrenPresent, ...otherProps }, ref) => {
+  ({ field, editable = true, showLinkTextWithChildrenPresent, ...otherProps }, ref) => {
     const children = otherProps.children as React.ReactNode;
     const dynamicField: LinkField | LinkFieldValue = field;
 
@@ -143,8 +143,4 @@ export const LinkPropTypes = {
 
 Link.propTypes = LinkPropTypes;
 
-Link.defaultProps = {
-  editable: true,
-};
-
 Link.displayName = 'Link';

packages/sitecore-jss-react/src/components/RichText.tsx

@@ -24,7 +24,7 @@ export interface RichTextProps {
 }
 
 export const RichText: React.FC<RichTextProps> = forwardRef(
-  ({ field, tag, editable, ...otherProps }, ref) => {
+  ({ field, tag = 'div', editable = true, ...otherProps }, ref) => {
     if (!field || (!field.editable && !field.value)) {
       return null;
     }
@@ -52,9 +52,4 @@ export const RichTextPropTypes = {
 
 RichText.propTypes = RichTextPropTypes;
 
-RichText.defaultProps = {
-  tag: 'div',
-  editable: true,
-};
-
 RichText.displayName = 'RichText';