Skip to content

Commit 02cde9e

Browse files
committed
refactor: flatten Contentful asset data structure to match GraphQL API schema (#31115)
1 parent d7d6f3f commit 02cde9e

File tree

9 files changed

+623
-1230
lines changed

9 files changed

+623
-1230
lines changed

e2e-tests/contentful/src/pages/gatsby-plugin-image.js

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ const GatsbyPluginImagePage = ({ data }) => {
1616
<div>
1717
<p>
1818
<strong>
19-
{node.title} ({node.file.fileName.split(".").pop()})
19+
{node.title} ({node.fileName.split(".").pop()})
2020
</strong>
2121
</p>
2222
{node.description && <p>{node.description}</p>}
2323
{node.constrained ? (
2424
<GatsbyImage image={node.constrained} />
2525
) : (
26-
<SvgImage src={node.file.url} />
26+
<SvgImage src={node.url} />
2727
)}
2828
</div>
2929
))}
@@ -34,14 +34,14 @@ const GatsbyPluginImagePage = ({ data }) => {
3434
<div>
3535
<p>
3636
<strong>
37-
{node.title} ({node.file.fileName.split(".").pop()})
37+
{node.title} ({node.fileName.split(".").pop()})
3838
</strong>
3939
</p>
4040
{node.description && <p>{node.description}</p>}
4141
{node.fullWidth ? (
4242
<GatsbyImage image={node.fullWidth} />
4343
) : (
44-
<SvgImage src={node.file.url} />
44+
<SvgImage src={node.url} />
4545
)}
4646
</div>
4747
))}
@@ -53,14 +53,14 @@ const GatsbyPluginImagePage = ({ data }) => {
5353
<div>
5454
<p>
5555
<strong>
56-
{node.title} ({node.file.fileName.split(".").pop()})
56+
{node.title} ({node.fileName.split(".").pop()})
5757
</strong>
5858
</p>
5959
{node.description && <p>{node.description}</p>}
6060
{node.fixed ? (
6161
<GatsbyImage image={node.fixed} />
6262
) : (
63-
<SvgImage src={node.file.url} />
63+
<SvgImage src={node.url} />
6464
)}
6565
</div>
6666
))}
@@ -72,14 +72,14 @@ const GatsbyPluginImagePage = ({ data }) => {
7272
<div>
7373
<p>
7474
<strong>
75-
{node.title} ({node.file.fileName.split(".").pop()})
75+
{node.title} ({node.fileName.split(".").pop()})
7676
</strong>
7777
</p>
7878
{node.description && <p>{node.description}</p>}
7979
{node.dominantColor ? (
8080
<GatsbyImage image={node.dominantColor} />
8181
) : (
82-
<SvgImage src={node.file.url} />
82+
<SvgImage src={node.url} />
8383
)}
8484
</div>
8585
))}
@@ -91,14 +91,14 @@ const GatsbyPluginImagePage = ({ data }) => {
9191
<div>
9292
<p>
9393
<strong>
94-
{node.title} ({node.file.fileName.split(".").pop()})
94+
{node.title} ({node.fileName.split(".").pop()})
9595
</strong>
9696
</p>
9797
{node.description && <p>{node.description}</p>}
9898
{node.traced ? (
9999
<GatsbyImage image={node.traced} />
100100
) : (
101-
<SvgImage src={node.file.url} />
101+
<SvgImage src={node.url} />
102102
)}
103103
</div>
104104
))}
@@ -110,14 +110,14 @@ const GatsbyPluginImagePage = ({ data }) => {
110110
<div>
111111
<p>
112112
<strong>
113-
{node.title} ({node.file.fileName.split(".").pop()})
113+
{node.title} ({node.fileName.split(".").pop()})
114114
</strong>
115115
</p>
116116
{node.description && <p>{node.description}</p>}
117117
{node.blurred ? (
118118
<GatsbyImage image={node.blurred} />
119119
) : (
120-
<SvgImage src={node.file.url} />
120+
<SvgImage src={node.url} />
121121
)}
122122
</div>
123123
))}
@@ -148,7 +148,7 @@ const GatsbyPluginImagePage = ({ data }) => {
148148
<div>
149149
<p>
150150
<strong>
151-
{node.title} ({node.file.fileName.split(".").pop()})
151+
{node.title} ({node.fileName.split(".").pop()})
152152
</strong>
153153
</p>
154154
{node.description && <p>{node.description}</p>}
@@ -162,7 +162,7 @@ const GatsbyPluginImagePage = ({ data }) => {
162162
}}
163163
/>
164164
) : (
165-
<SvgImage src={node.file.url} />
165+
<SvgImage src={node.url} />
166166
)}
167167
</div>
168168
))}
@@ -174,14 +174,14 @@ const GatsbyPluginImagePage = ({ data }) => {
174174
<div>
175175
<p>
176176
<strong>
177-
{node.title} ({node.file.fileName.split(".").pop()})
177+
{node.title} ({node.fileName.split(".").pop()})
178178
</strong>
179179
</p>
180180
{node.description && <p>{node.description}</p>}
181181
{node.constrained ? (
182182
<GatsbyImage image={node.constrained} />
183183
) : (
184-
<SvgImage src={node.file.url} />
184+
<SvgImage src={node.url} />
185185
)}
186186
</div>
187187
))}
@@ -193,14 +193,14 @@ const GatsbyPluginImagePage = ({ data }) => {
193193
<div>
194194
<p>
195195
<strong>
196-
{node.title} ({node.file.fileName.split(".").pop()})
196+
{node.title} ({node.fileName.split(".").pop()})
197197
</strong>
198198
</p>
199199
{node.description && <p>{node.description}</p>}
200200
{node.constrained ? (
201201
<GatsbyImage image={node.constrained} />
202202
) : (
203-
<SvgImage src={node.file.url} />
203+
<SvgImage src={node.url} />
204204
)}
205205
</div>
206206
))}
@@ -231,10 +231,8 @@ export const pageQuery = graphql`
231231
nodes {
232232
title
233233
description
234-
file {
235-
fileName
236-
url
237-
}
234+
fileName
235+
url
238236
constrained: gatsbyImageData(width: 420)
239237
fullWidth: gatsbyImageData(width: 200, layout: FIXED)
240238
fixed: gatsbyImageData(width: 200, layout: FIXED)
@@ -268,10 +266,8 @@ export const pageQuery = graphql`
268266
nodes {
269267
title
270268
description
271-
file {
272-
fileName
273-
url
274-
}
269+
fileName
270+
url
275271
constrained: gatsbyImageData(width: 420)
276272
}
277273
}
@@ -284,10 +280,8 @@ export const pageQuery = graphql`
284280
nodes {
285281
title
286282
description
287-
file {
288-
fileName
289-
url
290-
}
283+
fileName
284+
url
291285
constrained: gatsbyImageData(width: 420)
292286
}
293287
}

e2e-tests/contentful/src/pages/media-reference.js

Lines changed: 20 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,12 @@ const MediaReferencePage = ({ data }) => {
1616
let content = null
1717
if (many) {
1818
content = many.map(imageData => (
19-
<img src={imageData.file.url} style={{ width: 200 }} alt={title} />
19+
<img src={imageData.url} style={{ width: 200 }} alt={title} />
2020
))
2121
}
2222

2323
if (one) {
24-
content = (
25-
<img src={one.file.url} style={{ width: 200 }} alt={title} />
26-
)
24+
content = <img src={one.url} style={{ width: 200 }} alt={title} />
2725
}
2826

2927
return (
@@ -41,38 +39,24 @@ const MediaReferencePage = ({ data }) => {
4139
let content = null
4240
if (manyLocalized) {
4341
content = manyLocalized.map(imageData => (
44-
<img
45-
src={imageData.file.url}
46-
style={{ width: 200 }}
47-
alt={title}
48-
/>
42+
<img src={imageData.url} style={{ width: 200 }} alt={title} />
4943
))
5044
}
5145

5246
if (oneLocalized) {
5347
content = (
54-
<img
55-
src={oneLocalized.file.url}
56-
style={{ width: 200 }}
57-
alt={title}
58-
/>
48+
<img src={oneLocalized.url} style={{ width: 200 }} alt={title} />
5949
)
6050
}
6151

6252
if (many) {
6353
content = many.map(imageData => (
64-
<img
65-
src={imageData.file.url}
66-
style={{ width: 200 }}
67-
alt={title}
68-
/>
54+
<img src={imageData.url} style={{ width: 200 }} alt={title} />
6955
))
7056
}
7157

7258
if (one) {
73-
content = (
74-
<img src={one.file.url} style={{ width: 200 }} alt={title} />
75-
)
59+
content = <img src={one.url} style={{ width: 200 }} alt={title} />
7660
}
7761

7862
return (
@@ -92,38 +76,24 @@ const MediaReferencePage = ({ data }) => {
9276
let content = null
9377
if (manyLocalized) {
9478
content = manyLocalized.map(imageData => (
95-
<img
96-
src={imageData.file.url}
97-
style={{ width: 200 }}
98-
alt={title}
99-
/>
79+
<img src={imageData.url} style={{ width: 200 }} alt={title} />
10080
))
10181
}
10282

10383
if (oneLocalized) {
10484
content = (
105-
<img
106-
src={oneLocalized.file.url}
107-
style={{ width: 200 }}
108-
alt={title}
109-
/>
85+
<img src={oneLocalized.url} style={{ width: 200 }} alt={title} />
11086
)
11187
}
11288

11389
if (many) {
11490
content = many.map(imageData => (
115-
<img
116-
src={imageData.file.url}
117-
style={{ width: 200 }}
118-
alt={title}
119-
/>
91+
<img src={imageData.url} style={{ width: 200 }} alt={title} />
12092
))
12193
}
12294

12395
if (one) {
124-
content = (
125-
<img src={one.file.url} style={{ width: 200 }} alt={title} />
126-
)
96+
content = <img src={one.url} style={{ width: 200 }} alt={title} />
12797
}
12898

12999
return (
@@ -155,14 +125,10 @@ export const pageQuery = graphql`
155125
id
156126
}
157127
one {
158-
file {
159-
url
160-
}
128+
url
161129
}
162130
many {
163-
file {
164-
url
165-
}
131+
url
166132
}
167133
}
168134
}
@@ -179,24 +145,16 @@ export const pageQuery = graphql`
179145
id
180146
}
181147
one {
182-
file {
183-
url
184-
}
148+
url
185149
}
186150
many {
187-
file {
188-
url
189-
}
151+
url
190152
}
191153
oneLocalized {
192-
file {
193-
url
194-
}
154+
url
195155
}
196156
manyLocalized {
197-
file {
198-
url
199-
}
157+
url
200158
}
201159
}
202160
}
@@ -213,24 +171,16 @@ export const pageQuery = graphql`
213171
id
214172
}
215173
one {
216-
file {
217-
url
218-
}
174+
url
219175
}
220176
many {
221-
file {
222-
url
223-
}
177+
url
224178
}
225179
oneLocalized {
226-
file {
227-
url
228-
}
180+
url
229181
}
230182
manyLocalized {
231-
file {
232-
url
233-
}
183+
url
234184
}
235185
}
236186
}

0 commit comments

Comments
 (0)