[NextJs] GraphQL schema updates and fragment data generation removal (#…

…648)

* Removed GraphQLFragmentTypes.json and corresponding script to generate. This is no longer needed with our removal of Apollo in the sample app. Also, added apikey to the introspection fetch and switched to use our GraphQLRequestClient as opposed to cross-fetch.

* Updates for item children GraphQL edge schema change (now uses item search results pattern vs an array of items).

docs/data/routes/docs/nextjs/graphql/introspection/en.md

@@ -13,24 +13,16 @@ The file `.graphql-let.yml` in the sample app root contains configuration for `g
 
 > Read more about [graphql-let configuration](https://github.com/piglovesyou/graphql-let#configuration-is-compatible-with-codegenyml-except).
 
-When working with GraphQL in the sample Next.js application, you should be aware of two concepts:
-* **Introspection data**, which describes the queries supported by the GraphQL schema. Read more [here](https://graphql.org/learn/introspection). `graphq-let` uses this introspection data to understand which types it should use during code generation.
-* **Fragment data**, which is basic information about the shape of the GraphQL schema. Apollo Client supports caching GraphQL responses, which can greatly reduce network traffic needs. To work correctly with interfaces in GraphQL, the Apollo Client needs to know the information in this file. Read more [here](https://www.apollographql.com/docs/react/advanced/fragments.html#fragment-matcher).
+When working with GraphQL in the sample Next.js application, you should be aware of the concept of **introspection data**, which describes the queries supported by the GraphQL schema. Read more [here](https://graphql.org/learn/introspection). `graphq-let` uses this introspection data to understand which types it should use during code generation.
 
-After you build the application for the first time, you will find: 
-* `src/temp/GraphQLIntrospectionResult.json`, containing introspection data.
-* `src/temp/GraphQLFragmentTypes.json`, containing fragment data.
+After you build the application for the first time, you will find `src/temp/GraphQLIntrospectionResult.json`, containing introspection data.
 
 When you alter Sitecore templates related to the site, you should update the introspection data. 
 In the root of your Next.js application, run: 
 
 ```
 jss graphql:update 
 ```
-This script will fetch fresh introspection data and fragment data from your defined GraphQL endpoint and update the two files. 
+This calls a script `scripts/fetch-graphql-introspection-data.ts` which will fetch fresh introspection data from your defined GraphQL endpoint and update the file.
 
-The script `jss graphql:update` calls two other scripts: 
-* `scripts/fetch-graphql-introspection-data.ts` is responsible for fetching introspection data. 
-* `scripts/update-graphql-fragment-data.ts` is responsible for fetching fragment data. 
-
-Both scripts use the `graphQLEndpoint` defined in `src/temp/config.js`, a file generated when you start your sample app for the first time.
+The script uses the `graphQLEndpoint` and `sitecoreApiKey` defined in `src/temp/config.js`, a file generated when you start your sample app for the first time.

docs/data/routes/docs/nextjs/troubleshooting/en.md

@@ -179,9 +179,9 @@ These are less common issues that we have encountered.
 
 If the GraphQL schema changes, you must regenerate GraphQL introspection data. 
 
-In the sample app, you regenerate introspection data using the command `npm run graphql:update`.
+In the sample app, you regenerate introspection data using the command `jss graphql:update`.
 
-> The scripts that this calls depends on the `scjssconfig.json` file being present and populated.
+> The script that this calls depends on the `scjssconfig.json` file being present and populated.
 
 ### Vercel unable to show data from a local Sitecore environment
 If you are using [ngrok](https://ngrok.com/) to expose your local Sitecore endpoint to Vercel, verify that you are using the `host-header` flag.

samples/nextjs/package.json

@@ -33,7 +33,6 @@
     "@sitecore-jss/sitecore-jss-nextjs": "^16.1.0-canary.19",
     "@sitecore-jss/sitecore-jss-tracking": "^16.1.0-canary.19",
     "bootstrap": "^4.3.1",
-    "cross-fetch": "^3.0.6",
     "graphql": "~15.4.0",
     "graphql-tag": "^2.11.0",
     "next": "^10.0.3",
@@ -81,9 +80,7 @@
     "lint": "eslint ./src/**/*.tsx ./src/**/*.ts ./sitecore/definitions/**/*.ts ./scripts/**/*.ts ./data/**/*.yml",
     "bootstrap": "ts-node --project tsconfig.scripts.json scripts/bootstrap.ts && graphql-let",
     "build": "npm-run-all --serial bootstrap next:build",
-    "graphql:fetch-introspection": "ts-node --project tsconfig.scripts.json ./scripts/fetch-graphql-introspection-data.ts",
-    "graphql:fetch-fragment-data": "ts-node --project tsconfig.scripts.json ./scripts/update-graphql-fragment-data.ts",
-    "graphql:update": "npm-run-all --serial graphql:fetch-fragment-data graphql:fetch-introspection",
+    "graphql:update": "ts-node --project tsconfig.scripts.json ./scripts/fetch-graphql-introspection-data.ts",
     "next:build": "next build",
     "next:dev": "cross-env NODE_OPTIONS='--inspect' next dev",
     "next:start": "next start",

samples/nextjs/scripts/fetch-graphql-introspection-data.ts

@@ -1,4 +1,4 @@
-import fetch from 'cross-fetch';
+import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-nextjs';
 import fs from 'fs';
 import { getIntrospectionQuery } from 'graphql';
 import { generateConfig } from './generate-config';
@@ -23,14 +23,12 @@ try {
 
 console.log(`Fetch graphql introspection data from ${jssConfig.graphQLEndpoint}...`);
 
-fetch(jssConfig.graphQLEndpoint, {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({
-    query: getIntrospectionQuery(),
-  }),
-})
-  .then((result) => result.json())
+const client = new GraphQLRequestClient(jssConfig.graphQLEndpoint, {
+  apiKey: jssConfig.sitecoreApiKey,
+});
+
+client
+  .request(getIntrospectionQuery())
   .then((result) => {
     fs.writeFile(
       './src/temp/GraphQLIntrospectionResult.json',

samples/nextjs/sitecore/definitions/components/graphql/GraphQL-IntegratedDemo.sitecore.graphql

@@ -51,18 +51,20 @@ query IntegratedDemoQuery($datasource: String!, $contextItem: String!) {
 
     # List the children of the current route
     children(hasLayout: 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 {
-          jsonValue
-          value
+      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{
-        path
       }
     }
   }

samples/nextjs/src/components/graphql/GraphQL-ConnectedDemo.graphql

@@ -49,18 +49,20 @@ query ConnectedDemoQuery($datasource: String!, $contextItem: String!) {
 
     # List the children of the current route
     children(hasLayout: 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 {
-          jsonValue
-          value
+      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{
-        path
       }
     }
   }

samples/nextjs/src/components/graphql/GraphQL-ConnectedDemo.tsx

@@ -76,7 +76,7 @@ const GraphQLConnectedDemo = (props: StyleguideComponentProps): JSX.Element => {
           <br />
           children:
           <ul>
-            {data.contextItem.children.map((child) => {
+            {data.contextItem.children.results.map((child) => {
               const routeItem = child as RouteItem;
 
               return (

samples/nextjs/src/components/graphql/GraphQL-IntegratedDemo.tsx

@@ -30,7 +30,7 @@ interface DataSource {
   id: string;
 }
 
-interface ContextItemChild {
+interface Item {
   id: string;
   url: {
     path: string;
@@ -43,13 +43,17 @@ interface ContextItemChild {
   };
 }
 
+interface ItemSearchResults {
+  results: Item[];
+}
+
 interface GraphQlIntegratedDemoProps {
   fields: {
     data: {
       datasource: DataSource;
       contextItem: {
         id: string;
-        children: ContextItemChild[];
+        children: ItemSearchResults;
         pageTitle: {
           value: string;
         };
@@ -107,7 +111,7 @@ const GraphQLIntegratedDemo = (props: GraphQlIntegratedDemoProps): JSX.Element =
           <br />
           children:
           <ul>
-            {contextItem.children.map((child: ContextItemChild) => (
+            {contextItem.children.results.map((child: Item) => (
               <li key={child.id}>
                 <NextLink href={child.url.path}>
                   <a>{child.pageTitle.value}</a>

samples/nextjs/src/temp/.gitignore

@@ -1,4 +1,3 @@
 *
 !.gitignore
-!GraphQLFragmentTypes.json
 !GraphQLIntrospectionResult.json