Skip to content

Commit 4badb8d

Browse files
axe312geraxe312ger
committed
refactor: align Rich Text field structure to Contentful GraphQL API (#31122)
1 parent ed999fa commit 4badb8d

File tree

6 files changed

+1990
-1436
lines changed

6 files changed

+1990
-1436
lines changed

‎e2e-tests/contentful/src/pages/rich-text.js

Lines changed: 69 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ function renderReferencedComponent(ref) {
2020
return <Component {...ref} />
2121
}
2222

23-
const options = {
23+
const makeOptions = ({ assetBlockMap, entryBlockMap, entryInlineMap }) => ({
2424
renderMark: {
2525
[MARKS.BOLD]: text => <strong data-cy-strong>{text}</strong>,
2626
},
2727
renderNode: {
2828
[BLOCKS.EMBEDDED_ASSET]: node => {
29-
const asset = node.data.target
29+
const asset = assetBlockMap.get(node?.data?.target?.sys.id)
3030
if (asset.gatsbyImageData) {
3131
return <GatsbyImage image={asset.gatsbyImageData} />
3232
}
@@ -40,7 +40,7 @@ const options = {
4040
)
4141
},
4242
[BLOCKS.EMBEDDED_ENTRY]: node => {
43-
const entry = node?.data?.target
43+
const entry = entryBlockMap.get(node?.data?.target?.sys.id)
4444
if (!entry) {
4545
throw new Error(
4646
`Entity not available for node:\n${JSON.stringify(node, null, 2)}`
@@ -49,7 +49,7 @@ const options = {
4949
return renderReferencedComponent(entry)
5050
},
5151
[INLINES.EMBEDDED_ENTRY]: node => {
52-
const entry = node.data.target
52+
const entry = entryInlineMap.get(node?.data?.target?.sys.id)
5353
if (entry.__typename === "ContentfulText") {
5454
return (
5555
<span data-cy-id="inline-text">
@@ -64,7 +64,7 @@ const options = {
6464
)
6565
},
6666
},
67-
}
67+
})
6868

6969
const RichTextPage = ({ data }) => {
7070
const defaultEntries = data.default.nodes
@@ -77,7 +77,7 @@ const RichTextPage = ({ data }) => {
7777
return (
7878
<div data-cy-id={slug} key={id}>
7979
<h2>{title}</h2>
80-
{renderRichText(richText, options)}
80+
{renderRichText(richText, makeOptions)}
8181
<hr />
8282
</div>
8383
)
@@ -89,7 +89,7 @@ const RichTextPage = ({ data }) => {
8989
return (
9090
<div data-cy-id={`english-${slug}`} key={id}>
9191
<h2>{title}</h2>
92-
{renderRichText(richTextLocalized, options)}
92+
{renderRichText(richTextLocalized, makeOptions)}
9393
<hr />
9494
</div>
9595
)
@@ -101,7 +101,7 @@ const RichTextPage = ({ data }) => {
101101
return (
102102
<div data-cy-id={`german-${slug}`} key={id}>
103103
<h2>{title}</h2>
104-
{renderRichText(richTextLocalized, options)}
104+
{renderRichText(richTextLocalized, makeOptions)}
105105
<hr />
106106
</div>
107107
)
@@ -125,76 +125,92 @@ export const pageQuery = graphql`
125125
id
126126
title
127127
richText {
128-
raw
129-
references {
130-
__typename
131-
sys {
132-
id
133-
}
134-
... on ContentfulAsset {
135-
contentful_id
136-
gatsbyImageData(width: 200)
137-
}
138-
... on ContentfulText {
139-
title
140-
short
141-
}
142-
... on ContentfulLocation {
143-
location {
144-
lat
145-
lon
128+
json
129+
links {
130+
assets {
131+
block {
132+
sys {
133+
id
134+
}
135+
gatsbyImageData(width: 200)
146136
}
147137
}
148-
... on ContentfulContentReference {
149-
title
150-
one {
138+
entries {
139+
block {
151140
__typename
152141
sys {
153142
id
143+
type
154144
}
155145
... on ContentfulText {
156146
title
157147
short
158148
}
149+
... on ContentfulLocation {
150+
location {
151+
lat
152+
lon
153+
}
154+
}
159155
... on ContentfulContentReference {
160156
title
161157
one {
158+
__typename
159+
sys {
160+
id
161+
}
162+
... on ContentfulText {
163+
title
164+
short
165+
}
162166
... on ContentfulContentReference {
163167
title
168+
one {
169+
... on ContentfulContentReference {
170+
title
171+
}
172+
}
173+
many {
174+
... on ContentfulContentReference {
175+
title
176+
}
177+
}
164178
}
165179
}
166180
many {
181+
__typename
182+
sys {
183+
id
184+
}
185+
... on ContentfulText {
186+
title
187+
short
188+
}
189+
... on ContentfulNumber {
190+
title
191+
integer
192+
}
167193
... on ContentfulContentReference {
168194
title
195+
one {
196+
... on ContentfulContentReference {
197+
title
198+
}
199+
}
200+
many {
201+
... on ContentfulContentReference {
202+
title
203+
}
204+
}
169205
}
170206
}
171207
}
172208
}
173-
many {
209+
inline {
174210
__typename
175211
sys {
176212
id
177-
}
178-
... on ContentfulText {
179-
title
180-
short
181-
}
182-
... on ContentfulNumber {
183-
title
184-
integer
185-
}
186-
... on ContentfulContentReference {
187-
title
188-
one {
189-
... on ContentfulContentReference {
190-
title
191-
}
192-
}
193-
many {
194-
... on ContentfulContentReference {
195-
title
196-
}
197-
}
213+
type
198214
}
199215
}
200216
}
@@ -213,7 +229,7 @@ export const pageQuery = graphql`
213229
id
214230
title
215231
richTextLocalized {
216-
raw
232+
json
217233
}
218234
}
219235
}
@@ -228,7 +244,7 @@ export const pageQuery = graphql`
228244
id
229245
title
230246
richTextLocalized {
231-
raw
247+
json
232248
}
233249
}
234250
}

‎packages/gatsby-source-contentful/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"dependencies": {
1010
"@babel/runtime": "^7.15.4",
1111
"@contentful/rich-text-react-renderer": "^15.12.1",
12+
"@contentful/rich-text-links": "^15.12.1",
1213
"@contentful/rich-text-types": "^15.12.1",
1314
"@hapi/joi": "^15.1.1",
1415
"@vercel/fetch-retry": "^5.0.3",

0 commit comments

Comments
 (0)