Skip to content

Commit 6e68121

Browse files
axe312geraxe312ger
authored
CTF-next: codemods to help for migration (#35113)
* WIP - first codemods for graphql changes * feat: add name subfield for new contentType sys field * tell user about manual required changes and transform some content type selectors in code * feat: flatten asset filters * fix: all Contentful content type selectors within a query will now replaced * feat: apply changes to sys structure to js and improve sys.type edge-case handling * fix: take useNameForId into account when creating reference fields * fix: rename metadata field to contentfulMetadata * fix: add linkedFrom field to restricted/reserved field names * fix: use same list of restricted node fields everywhere * refactor: cleanup codemods * fix: avoid endless loop when transforming spaceId for sys * fix: avoid endless loop when transforming spaceId for sys * feat: basic support for fragments * test: initial fixtures for most yet implemented codemods * test: ensure fragments also support asset flattening * test: extend codemod test for fragments * feat: support inline fragments as well * feat: support flattening of single target contentful asset queries * feat: transform sys fields in single entity and collection queries * feat: add more tests and almost working asset object transform * feat: properly merge existing fields in sys and fix contentType transform * feat: add support for tags and rename metadata to contentfulMetadata * feat: support new sys and asset structures when sorting * feat: warn when using schema customizations or identifiers that match old sys field names * feat: properly restructure object destructure code with new sys structure * feat: flatten asset structure in js object selectors * feat: rename content type names within custom resolvers defined in a createResolvers implementation * chore: cleanup * feat: support typescript interfaces and improve content type selector renaming * fix: make codemods more reliable * chore: format using-contentful * refactor: migrate using-contentful example code via codemods * WIP - manual migrations * build: fix versions in using-contentful example * build: update yarn.lock
1 parent 36a2933 commit 6e68121

33 files changed

+1223
-46
lines changed

‎examples/using-contentful/package.json‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
"version": "1.0.0",
66
"author": "Marcus Ericsson <[email protected]> (mericsson.com)",
77
"dependencies": {
8-
"gatsby": "next",
9-
"gatsby-core-utils": "next",
10-
"gatsby-plugin-image": "next",
11-
"gatsby-plugin-sharp": "next",
12-
"gatsby-plugin-typography": "next",
13-
"gatsby-source-contentful": "next",
14-
"gatsby-transformer-remark": "next",
8+
"gatsby": "^5.13.0-next.1",
9+
"gatsby-core-utils": "^4.13.0-next.0",
10+
"gatsby-plugin-image": "^3.13.0-next.0",
11+
"gatsby-plugin-sharp": "^5.13.0-next.0",
12+
"gatsby-plugin-typography": "^5.13.0-next.0",
13+
"gatsby-source-contentful": "^8.13.0-next.1",
14+
"gatsby-transformer-remark": "^6.13.0-next.0",
1515
"prop-types": "^15.7.2",
1616
"react": "^18.2.0",
1717
"react-dom": "^18.2.0",
@@ -24,9 +24,6 @@
2424
],
2525
"license": "MIT",
2626
"main": "n/a",
27-
"resolutions": {
28-
"contentful": "6.1.3"
29-
},
3027
"scripts": {
3128
"develop": "gatsby develop",
3229
"build": "gatsby build",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const DefaultLayout = ({ children }) => (
1212
<>
1313
<header
1414
style={{
15-
textAlign: "center",
15+
textAlign: `center`,
1616
backgroundColor: `tomato`,
1717
padding: rhythm(1 / 2),
1818
}}

‎examples/using-contentful/src/pages/categories/{ContentfulCategory.id}.js‎ renamed to ‎examples/using-contentful/src/pages/categories/{ContentfulContentTypeCategory.id}.js‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ const propTypes = {
1313

1414
class CategoryTemplate extends React.Component {
1515
render() {
16-
const category = this.props.data.contentfulCategory
16+
const category = this.props.data.contentfulContentTypeCategory
1717
const {
18-
title: { title },
19-
product,
18+
title: { raw: title },
19+
linkedFrom: { ContentfulContentTypeProduct },
2020
icon,
2121
} = category
2222
const iconImg = icon.gatsbyImageData
@@ -42,10 +42,10 @@ class CategoryTemplate extends React.Component {
4242
<div>
4343
<h2>Products</h2>
4444
<ul>
45-
{product &&
46-
product.map((p, i) => (
45+
{ContentfulContentTypeProduct.length &&
46+
ContentfulContentTypeProduct.map((p, i) => (
4747
<li key={i}>
48-
<Link to={p.gatsbyPath}>{p.productName.productName}</Link>
48+
<Link to={p.gatsbyPath}>{p.productName.raw}</Link>
4949
</li>
5050
))}
5151
</ul>
@@ -60,19 +60,21 @@ CategoryTemplate.propTypes = propTypes
6060
export default CategoryTemplate
6161

6262
export const pageQuery = graphql`
63-
query($id: String!) {
64-
contentfulCategory(id: { eq: $id }) {
63+
query ($id: String!) {
64+
contentfulContentTypeCategory(id: { eq: $id }) {
6565
title {
66-
title
66+
raw
6767
}
6868
icon {
6969
gatsbyImageData(layout: FIXED, width: 75)
7070
}
71-
product {
72-
gatsbyPath(filePath: "/products/{ContentfulProduct.id}")
73-
id
74-
productName {
75-
productName
71+
linkedFrom {
72+
ContentfulContentTypeProduct {
73+
gatsbyPath(filePath: "/products/{ContentfulContentTypeProduct.id}")
74+
id
75+
productName {
76+
raw
77+
}
7678
}
7779
}
7880
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -316,8 +316,8 @@ const ImageAPI = props => {
316316
export default ImageAPI
317317

318318
export const pageQuery = graphql`
319-
query {
320-
allContentfulAsset(filter: { node_locale: { eq: "en-US" } }) {
319+
{
320+
allContentfulAsset(filter: { sys: { locale: { eq: "en-US" } } }) {
321321
edges {
322322
node {
323323
title

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -85,28 +85,32 @@ IndexPage.propTypes = propTypes
8585
export default IndexPage
8686

8787
export const pageQuery = graphql`
88-
query {
89-
us: allContentfulProduct(filter: { node_locale: { eq: "en-US" } }) {
88+
{
89+
us: allContentfulContentTypeProduct(
90+
filter: { sys: { locale: { eq: "en-US" } } }
91+
) {
9092
edges {
9193
node {
9294
id
93-
gatsbyPath(filePath: "/products/{ContentfulProduct.id}")
95+
gatsbyPath(filePath: "/products/{ContentfulContentTypeProduct.id}")
9496
productName {
95-
productName
97+
raw
9698
}
9799
image {
98100
gatsbyImageData(layout: FIXED, width: 75)
99101
}
100102
}
101103
}
102104
}
103-
german: allContentfulProduct(filter: { node_locale: { eq: "de" } }) {
105+
german: allContentfulContentTypeProduct(
106+
filter: { sys: { locale: { eq: "de" } } }
107+
) {
104108
edges {
105109
node {
106110
id
107-
gatsbyPath(filePath: "/products/{ContentfulProduct.id}")
111+
gatsbyPath(filePath: "/products/{ContentfulContentTypeProduct.id}")
108112
productName {
109-
productName
113+
raw
110114
}
111115
image {
112116
gatsbyImageData(layout: FIXED, width: 75)

‎examples/using-contentful/src/pages/products/{ContentfulProduct.id}.js‎ renamed to ‎examples/using-contentful/src/pages/products/{ContentfulContentTypeProduct.id}.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ const propTypes = {
1313

1414
class ProductTemplate extends React.Component {
1515
render() {
16-
const product = this.props.data.contentfulProduct
16+
const product = this.props.data.contentfulContentTypeProduct
1717
const {
18-
productName: { productName },
18+
productName: { raw: productName },
1919
productDescription,
2020
price,
2121
image,
@@ -39,7 +39,7 @@ class ProductTemplate extends React.Component {
3939
)}
4040
</div>
4141
<h1 style={{ marginBottom: rhythm(1 / 2) }}>{productName}</h1>
42-
<h4>Made by {brand.companyName.companyName}</h4>
42+
<h4>Made by {brand.companyName.raw}</h4>
4343
<div>
4444
<span>Price: ${price}</span>
4545
<div
@@ -53,7 +53,7 @@ class ProductTemplate extends React.Component {
5353
{categories.map((category, i) => (
5454
<li key={i}>
5555
<Link key={i} to={category.gatsbyPath}>
56-
{category.title.title}
56+
{category.title.raw}
5757
</Link>
5858
</li>
5959
))}
@@ -70,10 +70,10 @@ ProductTemplate.propTypes = propTypes
7070
export default ProductTemplate
7171

7272
export const pageQuery = graphql`
73-
query($id: String!) {
74-
contentfulProduct(id: { eq: $id }) {
73+
query ($id: String!) {
74+
contentfulContentTypeProduct(id: { eq: $id }) {
7575
productName {
76-
productName
76+
raw
7777
}
7878
productDescription {
7979
childMarkdownRemark {
@@ -86,14 +86,14 @@ export const pageQuery = graphql`
8686
}
8787
brand {
8888
companyName {
89-
companyName
89+
raw
9090
}
9191
}
9292
categories {
9393
id
94-
gatsbyPath(filePath: "/categories/{ContentfulCategory.id}")
94+
gatsbyPath(filePath: "/categories/{ContentfulContentTypeCategory.id}")
9595
title {
96-
title
96+
raw
9797
}
9898
}
9999
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,8 @@
126126
"watch": "lerna run watch --no-sort --stream --concurrency 999"
127127
},
128128
"workspaces": [
129-
"packages/*"
129+
"packages/*",
130+
"examples/using-contentful"
130131
],
131132
"resolutions": {
132133
"@babel/plugin-transform-modules-commonjs": "7.18.6"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import path from "path"
22
import execa from "execa"
33

44
const codemods = [
5+
`gatsby-source-contentful`,
56
`gatsby-plugin-image`,
67
`global-graphql-calls`,
78
`import-link`,

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
interface Data {
2+
allContentfulTemplatePage: FooConnection
3+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
interface Data {
2+
allContentfulContentTypeTemplatePage: FooConnection
3+
}

0 commit comments

Comments
 (0)