[NextJS] GraphQL Request Client + GraphQL Sitemap Service (#530)

packages/sitecore-jss-nextjs/package.json

@@ -48,6 +48,7 @@
     "jsdom": "^15.1.1",
     "mocha": "^8.1.3",
     "next": "^10.0.3",
+    "nock": "^13.0.5",
     "nyc": "^15.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

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

@@ -40,6 +40,11 @@ export { ComponentModule } from './sharedTypes/component-module';
 
 export { ComponentPropsService } from './services/component-props-service';
 
+export {
+  GraphQLSitemapService,
+  GraphQLSitemapServiceConfig,
+} from './services/graphql-sitemap-service';
+
 export {
   ComponentPropsReactContext,
   ComponentPropsContextProps,

packages/sitecore-jss-nextjs/src/services/graphql-sitemap-service.test.ts

@@ -0,0 +1,321 @@
+import { expect } from 'chai';
+import nock from 'nock';
+import { GraphQLSitemapService } from './graphql-sitemap-service';
+
+describe('GraphQLSitemapService', () => {
+  const ROOT_ITEM = '/sitecore/next/home';
+  const graphQLLayoutService = new GraphQLSitemapService({
+    endpoint: 'http://jssnextweb/graphql',
+  });
+
+  const mockRootItemIdRequest = () => {
+    nock('http://jssnextweb')
+      .post('/graphql')
+      .reply(200, {
+        data: {
+          item: {
+            id: '4FEFEBB5-49D7-4E8F-89D5-D40BC1F23BAD',
+          },
+        },
+      });
+  };
+
+  const mockPathsRequest = (results: { url: { path: string } }[]) => {
+    nock('http://jssnextweb')
+      .post('/graphql')
+      .reply(200, {
+        data: {
+          search: {
+            results,
+          },
+        },
+      });
+  };
+
+  beforeEach(() => {
+    nock.cleanAll();
+  });
+
+  describe('SSG mode', () => {
+    it('should fetch sitemap', async () => {
+      mockRootItemIdRequest();
+
+      mockPathsRequest([
+        {
+          url: { path: '/' },
+        },
+        {
+          url: { path: '/x1' },
+        },
+        {
+          url: { path: '/y1/y2/y3/y4' },
+        },
+        {
+          url: { path: '/y1/y2' },
+        },
+      ]);
+
+      const sitemap = await graphQLLayoutService.fetchSSGSitemap(['ua'], ROOT_ITEM);
+
+      expect(sitemap).to.deep.equal([
+        {
+          params: {
+            path: [''],
+          },
+          locale: 'ua',
+        },
+        {
+          params: {
+            path: ['x1'],
+          },
+          locale: 'ua',
+        },
+        {
+          params: {
+            path: ['y1', 'y2', 'y3', 'y4'],
+          },
+          locale: 'ua',
+        },
+        {
+          params: {
+            path: ['y1', 'y2'],
+          },
+          locale: 'ua',
+        },
+      ]);
+    });
+
+    it('should fetch sitemap using multiple locales', async () => {
+      mockRootItemIdRequest();
+
+      mockPathsRequest([
+        {
+          url: { path: '/' },
+        },
+        {
+          url: { path: '/x1' },
+        },
+        {
+          url: { path: '/y1/y2/y3/y4' },
+        },
+        {
+          url: { path: '/y1/y2' },
+        },
+      ]);
+
+      mockPathsRequest([
+        {
+          url: { path: '/' },
+        },
+        {
+          url: { path: '/x1-da-DK' },
+        },
+        {
+          url: { path: '/y1/y2/y3/y4-da-DK' },
+        },
+        {
+          url: { path: '/y1/y2-da-DK' },
+        },
+      ]);
+
+      const sitemap = await graphQLLayoutService.fetchSSGSitemap(['ua', 'da-DK'], ROOT_ITEM);
+
+      expect(sitemap).to.deep.equal([
+        {
+          params: {
+            path: [''],
+          },
+          locale: 'ua',
+        },
+        {
+          params: {
+            path: ['x1'],
+          },
+          locale: 'ua',
+        },
+        {
+          params: {
+            path: ['y1', 'y2', 'y3', 'y4'],
+          },
+          locale: 'ua',
+        },
+        {
+          params: {
+            path: ['y1', 'y2'],
+          },
+          locale: 'ua',
+        },
+        {
+          params: {
+            path: [''],
+          },
+          locale: 'da-DK',
+        },
+        {
+          params: {
+            path: ['x1-da-DK'],
+          },
+          locale: 'da-DK',
+        },
+        {
+          params: {
+            path: ['y1', 'y2', 'y3', 'y4-da-DK'],
+          },
+          locale: 'da-DK',
+        },
+        {
+          params: {
+            path: ['y1', 'y2-da-DK'],
+          },
+          locale: 'da-DK',
+        },
+      ]);
+    });
+
+    it('should fetch sitemap when items is empty', async () => {
+      mockRootItemIdRequest();
+
+      mockPathsRequest([]);
+
+      const sitemap = await graphQLLayoutService.fetchSSGSitemap(['ua'], ROOT_ITEM);
+
+      expect(sitemap).to.deep.equal([]);
+    });
+
+    it('should fetch sitemap if locales are not provided', async () => {
+      mockRootItemIdRequest();
+
+      const sitemap = await graphQLLayoutService.fetchSSGSitemap([], ROOT_ITEM);
+
+      expect(sitemap).to.deep.equal([]);
+    });
+
+    it('should not fetch sitemap if rootItemId is not provided', async () => {
+      nock('http://jssnextweb')
+        .post('/graphql')
+        .reply(200, {
+          data: null,
+        });
+
+      const sitemap = await graphQLLayoutService.fetchSSGSitemap([], ROOT_ITEM);
+
+      expect(sitemap).to.deep.equal([]);
+    });
+
+    it('should handle error when request root item id', async () => {
+      nock('http://jssnextweb')
+        .post('/graphql')
+        .reply(401, {
+          error: 'whoops',
+        });
+
+      const sitemap = await graphQLLayoutService.fetchSSGSitemap(['ua'], ROOT_ITEM);
+
+      expect(sitemap).to.deep.equal([]);
+    });
+
+    it('should handle error when request paths', async () => {
+      mockRootItemIdRequest();
+
+      nock('http://jssnextweb')
+        .post('/graphql')
+        .reply(401, 'whoops');
+
+      const sitemap = await graphQLLayoutService.fetchSSGSitemap(['ua'], ROOT_ITEM);
+
+      expect(sitemap).to.deep.equal([]);
+    });
+  });
+
+  describe('Export mode', () => {
+    it('should fetch sitemap', async () => {
+      mockRootItemIdRequest();
+
+      mockPathsRequest([
+        {
+          url: { path: '/' },
+        },
+        {
+          url: { path: '/x1' },
+        },
+        {
+          url: { path: '/y1/y2/y3/y4' },
+        },
+        {
+          url: { path: '/y1/y2' },
+        },
+      ]);
+
+      const sitemap = await graphQLLayoutService.fetchExportSitemap('ua', ROOT_ITEM);
+
+      expect(sitemap).to.deep.equal([
+        {
+          params: {
+            path: [''],
+          },
+        },
+        {
+          params: {
+            path: ['x1'],
+          },
+        },
+        {
+          params: {
+            path: ['y1', 'y2', 'y3', 'y4'],
+          },
+        },
+        {
+          params: {
+            path: ['y1', 'y2'],
+          },
+        },
+      ]);
+    });
+
+    it('should fetch sitemap when items is empty', async () => {
+      mockRootItemIdRequest();
+
+      mockPathsRequest([]);
+
+      const sitemap = await graphQLLayoutService.fetchExportSitemap('ua', ROOT_ITEM);
+
+      expect(sitemap).to.deep.equal([]);
+    });
+
+    it('should not fetch sitemap if rootItemId is not provided', async () => {
+      nock('http://jssnextweb')
+        .post('/graphql')
+        .reply(200, {
+          data: null,
+        });
+
+      const sitemap = await graphQLLayoutService.fetchSSGSitemap([], ROOT_ITEM);
+
+      expect(sitemap).to.deep.equal([]);
+    });
+
+    it('should handle error when request root item id', async () => {
+      nock('http://jssnextweb')
+        .post('/graphql')
+        .reply(401, {
+          error: 'whoops',
+        });
+
+      const sitemap = await graphQLLayoutService.fetchSSGSitemap(['ua'], ROOT_ITEM);
+
+      expect(sitemap).to.deep.equal([]);
+    });
+
+    it('should handle error when request paths', async () => {
+      mockRootItemIdRequest();
+
+      nock('http://jssnextweb')
+        .post('/graphql')
+        .reply(401, 'whoops');
+
+      const sitemap = await graphQLLayoutService.fetchSSGSitemap(['ua'], ROOT_ITEM);
+
+      expect(sitemap).to.deep.equal([]);
+    });
+  });
+});