CTF-next: codemods to help for migration

examples/using-contentful/package.json

@@ -5,13 +5,13 @@
   "version": "1.0.0",
   "author": "Marcus Ericsson <[email protected]> (mericsson.com)",
   "dependencies": {
-    "gatsby": "next",
-    "gatsby-core-utils": "next",
-    "gatsby-plugin-image": "next",
-    "gatsby-plugin-sharp": "next",
-    "gatsby-plugin-typography": "next",
-    "gatsby-source-contentful": "next",
-    "gatsby-transformer-remark": "next",
+    "gatsby": "^5.13.0-next.1",
+    "gatsby-core-utils": "^4.13.0-next.0",
+    "gatsby-plugin-image": "^3.13.0-next.0",
+    "gatsby-plugin-sharp": "^5.13.0-next.0",
+    "gatsby-plugin-typography": "^5.13.0-next.0",
+    "gatsby-source-contentful": "^8.13.0-next.1",
+    "gatsby-transformer-remark": "^6.13.0-next.0",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -24,9 +24,6 @@
   ],
   "license": "MIT",
   "main": "n/a",
-  "resolutions": {
-    "contentful": "6.1.3"
-  },
   "scripts": {
     "develop": "gatsby develop",
     "build": "gatsby build",

examples/using-contentful/src/layouts/index.js

@@ -12,7 +12,7 @@ const DefaultLayout = ({ children }) => (
   <>
     <header
       style={{
-        textAlign: "center",
+        textAlign: `center`,
         backgroundColor: `tomato`,
         padding: rhythm(1 / 2),
       }}

examples/using-contentful/src/pages/categories/{ContentfulCategory.id}.js → examples/using-contentful/src/pages/categories/{ContentfulContentTypeCategory.id}.js

@@ -13,10 +13,10 @@ const propTypes = {
 
 class CategoryTemplate extends React.Component {
   render() {
-    const category = this.props.data.contentfulCategory
+    const category = this.props.data.contentfulContentTypeCategory
     const {
-      title: { title },
-      product,
+      title: { raw: title },
+      linkedFrom: { ContentfulContentTypeProduct },
       icon,
     } = category
     const iconImg = icon.gatsbyImageData
@@ -42,10 +42,10 @@ class CategoryTemplate extends React.Component {
         <div>
           <h2>Products</h2>
           <ul>
-            {product &&
-              product.map((p, i) => (
+            {ContentfulContentTypeProduct.length &&
+              ContentfulContentTypeProduct.map((p, i) => (
                 <li key={i}>
-                  <Link to={p.gatsbyPath}>{p.productName.productName}</Link>
+                  <Link to={p.gatsbyPath}>{p.productName.raw}</Link>
                 </li>
               ))}
           </ul>
@@ -60,19 +60,21 @@ CategoryTemplate.propTypes = propTypes
 export default CategoryTemplate
 
 export const pageQuery = graphql`
-  query($id: String!) {
-    contentfulCategory(id: { eq: $id }) {
+  query ($id: String!) {
+    contentfulContentTypeCategory(id: { eq: $id }) {
       title {
-        title
+        raw
       }
       icon {
         gatsbyImageData(layout: FIXED, width: 75)
       }
-      product {
-        gatsbyPath(filePath: "/products/{ContentfulProduct.id}")
-        id
-        productName {
-          productName
+      linkedFrom {
+        ContentfulContentTypeProduct {
+          gatsbyPath(filePath: "/products/{ContentfulContentTypeProduct.id}")
+          id
+          productName {
+            raw
+          }
         }
       }
     }

examples/using-contentful/src/pages/image-api.js

@@ -316,8 +316,8 @@ const ImageAPI = props => {
 export default ImageAPI
 
 export const pageQuery = graphql`
-  query {
-    allContentfulAsset(filter: { node_locale: { eq: "en-US" } }) {
+  {
+    allContentfulAsset(filter: { sys: { locale: { eq: "en-US" } } }) {
       edges {
         node {
           title

examples/using-contentful/src/pages/index.js

@@ -85,28 +85,32 @@ IndexPage.propTypes = propTypes
 export default IndexPage
 
 export const pageQuery = graphql`
-  query {
-    us: allContentfulProduct(filter: { node_locale: { eq: "en-US" } }) {
+  {
+    us: allContentfulContentTypeProduct(
+      filter: { sys: { locale: { eq: "en-US" } } }
+    ) {
       edges {
         node {
           id
-          gatsbyPath(filePath: "/products/{ContentfulProduct.id}")
+          gatsbyPath(filePath: "/products/{ContentfulContentTypeProduct.id}")
           productName {
-            productName
+            raw
           }
           image {
             gatsbyImageData(layout: FIXED, width: 75)
           }
         }
       }
     }
-    german: allContentfulProduct(filter: { node_locale: { eq: "de" } }) {
+    german: allContentfulContentTypeProduct(
+      filter: { sys: { locale: { eq: "de" } } }
+    ) {
       edges {
         node {
           id
-          gatsbyPath(filePath: "/products/{ContentfulProduct.id}")
+          gatsbyPath(filePath: "/products/{ContentfulContentTypeProduct.id}")
           productName {
-            productName
+            raw
           }
           image {
             gatsbyImageData(layout: FIXED, width: 75)

examples/using-contentful/src/pages/products/{ContentfulProduct.id}.js → examples/using-contentful/src/pages/products/{ContentfulContentTypeProduct.id}.js

@@ -13,9 +13,9 @@ const propTypes = {
 
 class ProductTemplate extends React.Component {
   render() {
-    const product = this.props.data.contentfulProduct
+    const product = this.props.data.contentfulContentTypeProduct
     const {
-      productName: { productName },
+      productName: { raw: productName },
       productDescription,
       price,
       image,
@@ -39,7 +39,7 @@ class ProductTemplate extends React.Component {
           )}
         </div>
         <h1 style={{ marginBottom: rhythm(1 / 2) }}>{productName}</h1>
-        <h4>Made by {brand.companyName.companyName}</h4>
+        <h4>Made by {brand.companyName.raw}</h4>
         <div>
           <span>Price: ${price}</span>
           <div
@@ -53,7 +53,7 @@ class ProductTemplate extends React.Component {
               {categories.map((category, i) => (
                 <li key={i}>
                   <Link key={i} to={category.gatsbyPath}>
-                    {category.title.title}
+                    {category.title.raw}
                   </Link>
                 </li>
               ))}
@@ -70,10 +70,10 @@ ProductTemplate.propTypes = propTypes
 export default ProductTemplate
 
 export const pageQuery = graphql`
-  query($id: String!) {
-    contentfulProduct(id: { eq: $id }) {
+  query ($id: String!) {
+    contentfulContentTypeProduct(id: { eq: $id }) {
       productName {
-        productName
+        raw
       }
       productDescription {
         childMarkdownRemark {
@@ -86,14 +86,14 @@ export const pageQuery = graphql`
       }
       brand {
         companyName {
-          companyName
+          raw
         }
       }
       categories {
         id
-        gatsbyPath(filePath: "/categories/{ContentfulCategory.id}")
+        gatsbyPath(filePath: "/categories/{ContentfulContentTypeCategory.id}")
         title {
-          title
+          raw
         }
       }
     }

package.json

@@ -126,7 +126,8 @@
     "watch": "lerna run watch --no-sort --stream --concurrency 999"
   },
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "examples/using-contentful"
   ],
   "resolutions": {
     "@babel/plugin-transform-modules-commonjs": "7.18.6"

packages/gatsby-codemods/src/bin/cli.js

@@ -2,6 +2,7 @@ import path from "path"
 import execa from "execa"
 
 const codemods = [
+  `gatsby-source-contentful`,
   `gatsby-plugin-image`,
   `global-graphql-calls`,
   `import-link`,

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/content-types-typescript.input.ts

@@ -0,0 +1,3 @@
+interface Data {
+	allContentfulTemplatePage: FooConnection
+}

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/content-types-typescript.output.ts

@@ -0,0 +1,3 @@
+interface Data {
+	allContentfulContentTypeTemplatePage: FooConnection
+}

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/content-types.input.js

@@ -0,0 +1,10 @@
+const demo = [
+  ...data.allContentfulFoo.nodes,
+  ...data.allContentfulBar.nodes,
+]
+const content = data.contentfulPage.content
+const {
+  data: {
+    allContentfulTemplatePage: { nodes: templatePages },
+  },
+} = await graphql(``)

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/content-types.output.js

@@ -0,0 +1,10 @@
+const demo = [
+  ...data.allContentfulContentTypeFoo.nodes,
+  ...data.allContentfulContentTypeBar.nodes,
+]
+const content = data.contentfulContentTypePage.content
+const {
+  data: {
+    allContentfulContentTypeTemplatePage: { nodes: templatePages },
+  },
+} = await graphql(``)

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/contentful-asset.input.js

@@ -0,0 +1,7 @@
+import React from "react"
+
+export default () => (
+  <img
+    src={`${someQueryResultData.logo.file.url}?w=${someQueryResultData.logo.file.details.image.width}&q=40&fm=jpg`}
+  />
+)

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/contentful-asset.output.js

@@ -0,0 +1,7 @@
+import React from "react"
+
+export default () => (
+  <img
+    src={`${someQueryResultData.logo.url}?w=${someQueryResultData.logo.width}&q=40&fm=jpg`}
+  />
+)

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/contentful-sys.input.js

@@ -0,0 +1,11 @@
+const res1 = allContentfulPage.nodes.contentful_id
+const res2 = allContentfulPage.nodes.sys.contentType.__typename
+const { contentful_id, createdAt, updatedAt } = allContentfulPage.nodes
+const { title, metaDescription, metaImage, content } = data.contentfulPage
+const { foo } = result.data.allContentfulPage.nodes[0]
+const {
+  revision,
+  sys: {
+    contentType: { __typename },
+  },
+} = allContentfulPage.nodes

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/contentful-sys.output.js

@@ -0,0 +1,17 @@
+const res1 = allContentfulPage.nodes.sys.id
+const res2 = allContentfulPage.nodes.sys.contentType.name
+const {
+  sys: {
+    id: contentful_id,
+    firstPublishedAt: createdAt,
+    publishedAt: updatedAt
+  }
+} = allContentfulPage.nodes
+const { title, metaDescription, metaImage, content } = data.contentfulContentTypePage
+const { foo } = result.data.allContentfulContentTypePage.nodes[0]
+const {
+  sys: {
+    publishedVersion: revision,
+    contentType: { name }
+  }
+} = allContentfulPage.nodes

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/gatsby-node.input.js

@@ -0,0 +1,14 @@
+exports.createSchemaCustomization = null
+export const createSchemaCustomization = null
+
+// export function createResolvers(actions) {
+//   actions.createResolvers({
+//     ContentfulFoo: {},
+//   })
+// }
+
+export const createResolvers = (actions) => {
+  actions.createResolvers({
+    ContentfulFoo: {},
+  })
+}

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/gatsby-node.output.js

@@ -0,0 +1,14 @@
+exports.createSchemaCustomization = null
+export const createSchemaCustomization = null
+
+// export function createResolvers(actions) {
+//   actions.createResolvers({
+//     ContentfulFoo: {},
+//   })
+// }
+
+export const createResolvers = (actions) => {
+  actions.createResolvers({
+    ContentfulContentTypeFoo: {},
+  })
+}

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/graphql-content-type-all.input.js

@@ -0,0 +1,9 @@
+const result = await graphql`
+  {
+    allContentfulPage(limit: 1000) {
+      nodes {
+        id
+      }
+    }
+  }
+`

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/graphql-content-type-all.output.js

@@ -0,0 +1,7 @@
+const result = await graphql`{
+  allContentfulContentTypePage(limit: 1000) {
+    nodes {
+      id
+    }
+  }
+}`

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-source-contentful/graphql-content-type-fragment.input.js

@@ -0,0 +1,34 @@
+export const ExampleFragment = graphql`
+  fragment Example on ContentfulExample {
+    title
+    contentful_id
+    logo {
+      file {
+        url
+        fileName
+        contentType
+        details {
+          size
+          image {
+            width
+            height
+          }
+        }
+      }
+    }
+  }
+  {
+    allContentfulFoo {
+      nodes {
+        ... on ContentfulExample {
+          contentful_id
+          logo {
+            file {
+              url
+            }
+          }
+        }
+      }
+    }
+  }
+`