CTF-next: Generate GraphQL schema based on Contentful Content Types

.eslintignore

@@ -24,6 +24,7 @@ packages/gatsby-source-shopify/**/*.js
 packages/gatsby-plugin-preload-fonts/prepare/*.js
 packages/gatsby/cache-dir/commonjs/**/*
 packages/gatsby-codemods/transforms
+packages/gatsby-source-contentful/src/types/contentful-js-sdk
 packages/gatsby-source-graphql/batching
 packages/gatsby-plugin-gatsby-cloud/components
 packages/gatsby-plugin-gatsby-cloud/context

e2e-tests/contentful/cypress.config.ts

@@ -1,30 +1,35 @@
 import { defineConfig } from "cypress"
 import { addMatchImageSnapshotPlugin } from "@simonsmith/cypress-image-snapshot/plugin"
 
+const specFolder = process.env.CTF_API === "preview" ? "preview" : "delivery"
+
 export default defineConfig({
   e2e: {
     baseUrl: `http://localhost:9000`,
-    specPattern: `cypress/integration/**/*.{js,ts}`,
+    specPattern: `cypress/integration/${specFolder}/**/*.{js,ts}`,
     projectId: `2193cm`,
     viewportWidth: 1440,
     viewportHeight: 900,
     retries: {
       runMode: 0,
-      openMode: 0
+      openMode: 0,
     },
     videoUploadOnPasses: false,
     setupNodeEvents(on, config) {
       addMatchImageSnapshotPlugin(on, config)
-      on("before:browser:launch", (browser = {} as Cypress.Browser, launchOptions) => {
-        if (browser.family === "chromium" || browser.name === "chrome") {
-          // Make retina screens run at 1x density so they match the versions in CI
-          launchOptions.args.push("--force-device-scale-factor=1")
+      on(
+        "before:browser:launch",
+        (browser = {} as Cypress.Browser, launchOptions) => {
+          if (browser.family === "chromium" || browser.name === "chrome") {
+            // Make retina screens run at 1x density so they match the versions in CI
+            launchOptions.args.push("--force-device-scale-factor=1")
+          }
+          return launchOptions
         }
-        return launchOptions
-      })
+      )
     },
   },
   env: {
     requireSnapshots: true,
-  }
+  },
 })

e2e-tests/contentful/cypress/integration/delivery/content-reference.js

@@ -0,0 +1,68 @@
+// Make sure to keep test from this file in sync with previews/content-reverence.js
+describe(`content-reference`, () => {
+  beforeEach(() => {
+    cy.visit("/content-reference").waitForRouteChange()
+  })
+  it(`content-reference-many-2nd-level-loop`, () => {
+    cy.get(
+      '[data-cy-id="default-content-reference-many-2nd-level-loop"]'
+    ).snapshot()
+  })
+  it(`content-reference-many-loop-a-greater-b`, () => {
+    cy.get(
+      '[data-cy-id="default-content-reference-many-loop-a-greater-b"]'
+    ).snapshot()
+  })
+  it(`content-reference-many-loop-b-greater-a`, () => {
+    cy.get(
+      '[data-cy-id="default-content-reference-many-loop-b-greater-a"]'
+    ).snapshot()
+  })
+  it(`content-reference-many-self-reference`, () => {
+    cy.get(
+      '[data-cy-id="default-content-reference-many-self-reference"]'
+    ).snapshot()
+  })
+  it(`content-reference-one`, () => {
+    cy.get('[data-cy-id="default-content-reference-one"]').snapshot()
+  })
+  it(`content-reference-one-loop-a-greater-b`, () => {
+    cy.get(
+      '[data-cy-id="default-content-reference-one-loop-a-greater-b"]'
+    ).snapshot()
+  })
+  it(`content-reference-one-loop-b-greater-a`, () => {
+    cy.get(
+      '[data-cy-id="default-content-reference-one-loop-b-greater-a"]'
+    ).snapshot()
+  })
+  it(`content-reference-one-self-reference`, () => {
+    cy.get(
+      '[data-cy-id="default-content-reference-one-self-reference"]'
+    ).snapshot()
+  })
+  // Previe api test. Content should not exist on delivery
+  it(`content-reference-preview-api-test`, () => {
+    cy.get(
+      '[data-cy-id="default-preview-api-test-unpublished-and-linking-to-non-existing-entry"]'
+    ).should("not.exist")
+  })
+})
+
+describe(`content-reference localized`, () => {
+  beforeEach(() => {
+    cy.visit("/content-reference").waitForRouteChange()
+  })
+  it(`english-content-reference-one-localized`, () => {
+    cy.get('[data-cy-id="english-content-reference-one-localized"]').snapshot()
+  })
+  it(`english-content-reference-many-localized`, () => {
+    cy.get('[data-cy-id="english-content-reference-many-localized"]').snapshot()
+  })
+  it(`german-content-reference-one-localized`, () => {
+    cy.get('[data-cy-id="german-content-reference-one-localized"]').snapshot()
+  })
+  it(`german-content-reference-many-localized`, () => {
+    cy.get('[data-cy-id="german-content-reference-many-localized"]').snapshot()
+  })
+})

e2e-tests/contentful/cypress/integration/delivery/custom-fields.js

@@ -0,0 +1,19 @@
+describe(`custom-fields`, () => {
+  beforeEach(() => {
+    cy.visit("/custom-fields").waitForRouteChange()
+  })
+
+  it(`custom-fields: custom field`, () => {
+    cy.get(`[data-cy-id="field"] [data-cy-value]`).should(
+      `have.text`,
+      `customFieldValue`
+    )
+  })
+
+  it(`custom-fields: custom resolver`, () => {
+    cy.get(`[data-cy-id="resolver"] [data-cy-value]`).should(
+      `have.text`,
+      `customResolverResult`
+    )
+  })
+})

e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js → e2e-tests/contentful/cypress/integration/delivery/gatsby-plugin-image.js

@@ -77,9 +77,6 @@ describe(`gatsby-plugin-image`, () => {
   it(`dominant-color`, testConfig, () =>
     testGatsbyPluginImage(`dominant-color`, hasColorPlaceholder)
   )
-  it(`traced`, testConfig, () =>
-    testGatsbyPluginImage(`traced`, hasColorPlaceholder)
-  )
   it(`blurred`, testConfig, () =>
     testGatsbyPluginImage(`blurred`, hasBase64Placeholder)
   )

e2e-tests/contentful/cypress/integration/media-reference.js → e2e-tests/contentful/cypress/integration/delivery/media-reference.js

@@ -7,15 +7,15 @@ describe(`media-reference`, () => {
       cy.get("img")
         .should("have.length", 2)
         .should("have.attr", "src")
-        .should("match", /^\/\/images\.ctfassets\.net/)
+        .should("match", /^https:\/\/images\.ctfassets\.net/)
     })
   })
 
   it(`media-reference: one`, () => {
     cy.get('[data-cy-id="media-reference-one"]').within(() => {
       cy.get("img")
         .should("have.attr", "src")
-        .should("match", /^\/\/images\.ctfassets\.net/)
+        .should("match", /^https:\/\/images\.ctfassets\.net/)
     })
   })
 })

e2e-tests/contentful/cypress/integration/content-reference.js → e2e-tests/contentful/cypress/integration/preview/content-reference.js

@@ -1,4 +1,4 @@
-describe(`content-reference`, () => {
+describe(`prewview-content-reference`, () => {
   beforeEach(() => {
     cy.visit("/content-reference").waitForRouteChange()
   })
@@ -40,6 +40,12 @@ describe(`content-reference`, () => {
       '[data-cy-id="default-content-reference-one-self-reference"]'
     ).snapshot()
   })
+  // Most relevant preview api test (the others are still good to test!)
+  it(`content-reference-preview-api-test`, () => {
+    cy.get(
+      '[data-cy-id="default-preview-api-test-unpublished-and-linking-to-non-existing-entry"]'
+    ).snapshot()
+  })
 })
 
 describe(`content-reference localized`, () => {

e2e-tests/contentful/gatsby-config.js

@@ -1,19 +1,25 @@
+const ctfOptions = {
+  // This space is for testing purposes only.
+  // Never store your Contentful credentials in your projects config file.
+  // Use: https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/
+  spaceId: `k8iqpp6u0ior`,
+  accessToken: `hO_7N0bLaCJFbu5nL3QVekwNeB_TNtg6tOCB_9qzKUw`,
+  downloadLocal: true,
+}
+
+if (process.env.CTF_API === "preview") {
+  ctfOptions.host = `preview.contentful.com`
+  ctfOptions.accessToken = `IkSw3qEFt8NHKQUko2hIVDgu6x3AMtAkNecQZvg2034`
+}
+
 module.exports = {
   siteMetadata: {
     title: `Gatsby Contentful e2e`,
   },
   plugins: [
     {
       resolve: `gatsby-source-contentful`,
-      options: {
-        // This space is for testing purposes only.
-        // Never store your Contentful credentials in your projects config file.
-        // Use: https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/
-        spaceId: `k8iqpp6u0ior`,
-        accessToken: `hO_7N0bLaCJFbu5nL3QVekwNeB_TNtg6tOCB_9qzKUw`,
-        enableTags: true,
-        downloadLocal: true,
-      },
+      options: ctfOptions,
     },
     `gatsby-transformer-remark`,
     `gatsby-transformer-sharp`,

e2e-tests/contentful/gatsby-node.js

@@ -0,0 +1,39 @@
+exports.onCreateNode = ({ node, actions }) => {
+  const { createNodeField } = actions
+
+  if (node.internal.type === "ContentfulContentTypeText") {
+    createNodeField({
+      node,
+      name: "customField",
+      value: "customFieldValue",
+    })
+  }
+}
+
+exports.createSchemaCustomization = ({ actions, schema }) => {
+  const { createTypes } = actions
+
+  const typeDefs = `
+    type ContentfulContentTypeTextFields {
+      customField: String!
+    }
+    type ContentfulContentTypeText {
+      fields: ContentfulContentTypeTextFields!
+    }
+  `
+
+  createTypes(typeDefs)
+}
+
+exports.createResolvers = ({ createResolvers }) => {
+  createResolvers({
+    ContentfulContentTypeText: {
+      customResolver: {
+        type: 'String!',
+        resolve(source, args, context, info) {
+          return "customResolverResult"
+        },
+      },
+    },
+  })
+}

e2e-tests/contentful/package.json

@@ -24,6 +24,7 @@
     "cross-env": "^7.0.3",
     "cypress": "^12.16.0",
     "gatsby-cypress": "next",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "srcset": "^5.0.0",
     "start-server-and-test": "^2.0.3",
@@ -38,7 +39,9 @@
     "build": "gatsby build",
     "develop": "gatsby develop",
     "format": "prettier --write '**/*.js'",
-    "test": "cross-env CYPRESS_SUPPORT=y npm run build && npm run start-server-and-test",
+    "test": "npm-run-all -c -s test:delivery test:preview",
+    "test:delivery": "gatsby clean && cross-env CYPRESS_SUPPORT=y CTF_API=delivery npm run build && CTF_API=delivery npm run start-server-and-test",
+    "test:preview": "gatsby clean && cross-env CYPRESS_SUPPORT=y CTF_API=preview npm run build && CTF_API=preview npm run start-server-and-test",
     "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run",
     "serve": "gatsby serve",
     "cy:open": "cypress open --browser chrome --e2e",