[www/starters] tweaks to fix DX for no GH token on www (#8718)

Relevant to #8700 

The mocked defaults for when there's no token / no github data fetched were incorrectly formatted. This fix ensures that you can develop on `www` without a token.

cc @DSchau

Author: amberleyromo

www/gatsby-node.js

@@ -444,18 +444,18 @@ exports.onCreateNode = ({ node, actions, getNode, getNodes }) => {
     // Default fields are to avoid graphql errors.
     const { owner, name: repoStub } = parseGHUrl(node.repo)
     const defaultFields = {
-      slug: ``,
-      stub: ``,
+      slug: `/${repoStub}/`,
+      stub: repoStub,
       name: ``,
       description: ``,
       stars: 0,
       lastUpdated: ``,
       owner: ``,
       githubFullName: ``,
-      gatsbyMajorVersion: ``,
-      allDependencies: [],
-      gatsbyDependencies: [],
-      miscDependencies: [],
+      gatsbyMajorVersion: [[`no data`, `0`]],
+      allDependencies: [[`no data`, `0`]],
+      gatsbyDependencies: [[`no data`, `0`]],
+      miscDependencies: [[`no data`, `0`]],
     }
 
     if (!process.env.GITHUB_API_TOKEN) {
@@ -466,92 +466,92 @@ exports.onCreateNode = ({ node, actions, getNode, getNodes }) => {
           ...defaultFields,
         },
       })
-    }
-
-    Promise.all([
-      getpkgjson(node.repo),
-      githubApiClient.request(`
-          query {
-            repository(owner:"${owner}", name:"${repoStub}") {
-              name
-              stargazers {
-                totalCount
-              }
-              createdAt
-              updatedAt
-              owner {
-                login
+    } else {
+      Promise.all([
+        getpkgjson(node.repo),
+        githubApiClient.request(`
+            query {
+              repository(owner:"${owner}", name:"${repoStub}") {
+                name
+                stargazers {
+                  totalCount
+                }
+                createdAt
+                updatedAt
+                owner {
+                  login
+                }
+                nameWithOwner
               }
-              nameWithOwner
             }
+          `),
+      ])
+        .then(results => {
+          const [pkgjson, githubData] = results
+          const {
+            stargazers: { totalCount: stars },
+            updatedAt: lastUpdated,
+            owner: { login: owner },
+            name,
+            nameWithOwner: githubFullName,
+          } = githubData.repository
+
+          const { dependencies = [], devDependencies = [] } = pkgjson
+          const allDependencies = Object.entries(dependencies).concat(
+            Object.entries(devDependencies)
+          )
+
+          const gatsbyMajorVersion = allDependencies
+            .filter(([key, _]) => key === `gatsby`)
+            .map(version => {
+              let [gatsby, versionNum] = version
+              if (versionNum === `latest` || versionNum === `next`) {
+                return [gatsby, `2`]
+              }
+              return [gatsby, versionNum.replace(/\D/g, ``).charAt(0)]
+            })
+
+          // If a new field is added here, make sure a corresponding
+          // change is made to "defaultFields" to not break DX
+          const starterShowcaseFields = {
+            slug: `/${repoStub}/`,
+            stub: repoStub,
+            name,
+            description: pkgjson.description,
+            stars,
+            lastUpdated,
+            owner,
+            githubFullName,
+            gatsbyMajorVersion,
+            allDependencies,
+            gatsbyDependencies: allDependencies
+              .filter(
+                ([key, _]) => ![`gatsby-cli`, `gatsby-link`].includes(key) // remove stuff everyone has
+              )
+              .filter(([key, _]) => key.includes(`gatsby`)),
+            miscDependencies: allDependencies.filter(
+              ([key, _]) => !key.includes(`gatsby`)
+            ),
           }
-        `),
-    ])
-      .then(results => {
-        const [pkgjson, githubData] = results
-        const {
-          stargazers: { totalCount: stars },
-          updatedAt: lastUpdated,
-          owner: { login: owner },
-          name,
-          nameWithOwner: githubFullName,
-        } = githubData.repository
-
-        const { dependencies = [], devDependencies = [] } = pkgjson
-        const allDependencies = Object.entries(dependencies).concat(
-          Object.entries(devDependencies)
-        )
-
-        const gatsbyMajorVersion = allDependencies
-          .filter(([key, _]) => key === `gatsby`)
-          .map(version => {
-            let [gatsby, versionNum] = version
-            if (versionNum === `latest` || versionNum === `next`) {
-              return [gatsby, `2`]
-            }
-            return [gatsby, versionNum.replace(/\D/g, ``).charAt(0)]
+          createNodeField({
+            node,
+            name: `starterShowcase`,
+            value: starterShowcaseFields,
           })
-
-        // If a new field is added here, make sure a corresponding
-        // change is made to "defaultFields" to not break DX
-        const starterShowcaseFields = {
-          slug: `/${repoStub}/`,
-          stub: repoStub,
-          name,
-          description: pkgjson.description,
-          stars,
-          lastUpdated,
-          owner,
-          githubFullName,
-          gatsbyMajorVersion,
-          allDependencies,
-          gatsbyDependencies: allDependencies
-            .filter(
-              ([key, _]) => ![`gatsby-cli`, `gatsby-link`].includes(key) // remove stuff everyone has
-            )
-            .filter(([key, _]) => key.includes(`gatsby`)),
-          miscDependencies: allDependencies.filter(
-            ([key, _]) => !key.includes(`gatsby`)
-          ),
-        }
-        createNodeField({
-          node,
-          name: `starterShowcase`,
-          value: starterShowcaseFields,
         })
-      })
-      .catch(err => {
-        console.log(
-          `\nError getting repo data. Your GitHub token may be invalid`
-        )
-        return createNodeField({
-          node,
-          name: `starterShowcase`,
-          value: {
-            ...defaultFields,
-          },
+        .catch(err => {
+          console.log(
+            `\nError getting repo data. Your GitHub token may be invalid`
+          )
+          return createNodeField({
+            node,
+            name: `starterShowcase`,
+            value: {
+              ...defaultFields,
+            },
+          })
         })
-      })
+    }
   }
 
   // Community/Creators Pages

www/src/views/starter-library/starter-list.js

@@ -67,15 +67,7 @@ const StartersList = ({ urlState, starters, count, sortRecent }) => {
             stars,
             stub,
           } = starter.fields.starterShowcase
-          const { url: demoUrl, repo: repoUrl } = starter
-          const gatsbyVersion = gatsbyDependencies.find(
-            ([k, v]) => k === `gatsby`
-          )[1]
-          const match = gatsbyVersion.match(/([0-9]+)([.])([0-9]+)/) // we just want x.x
-          const minorVersion = match ? match[0] : gatsbyVersion // default to version if no match
-          const isGatsbyVersionWarning = !/(2..+|next|latest)/g.test(
-            minorVersion
-          ) // either 2.x or next or latest
+          const { url: demoUrl } = starter
 
           return (
             starter.fields && ( // have to filter out null fields from bad data