Skip to content

Commit

Permalink
refactor: flatten Contentful asset data structure to match GraphQL AP…
Browse files Browse the repository at this point in the history 
…I schema (#31115)
  • Loading branch information
@axe312ger
axe312ger committed Feb 1, 2022
1 parent 220624a commit 1f87c63
Show file tree
Hide file tree
Showing 8 changed files with 95 additions and 174 deletions.
54 changes: 24 additions & 30 deletions e2e-tests/contentful/src/pages/gatsby-plugin-image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ const GatsbyPluginImagePage = ({ data }) => {
<div>
<p>
<strong>
{node.title} ({node.file.fileName.split(".").pop()})
{node.title} ({node.fileName.split(".").pop()})
</strong>
</p>
{node.description && <p>{node.description}</p>}
{node.constrained ? (
<GatsbyImage image={node.constrained} />
) : (
<SvgImage src={node.file.url} />
<SvgImage src={node.url} />
)}
</div>
))}
Expand All @@ -34,14 +34,14 @@ const GatsbyPluginImagePage = ({ data }) => {
<div>
<p>
<strong>
{node.title} ({node.file.fileName.split(".").pop()})
{node.title} ({node.fileName.split(".").pop()})
</strong>
</p>
{node.description && <p>{node.description}</p>}
{node.fullWidth ? (
<GatsbyImage image={node.fullWidth} />
) : (
<SvgImage src={node.file.url} />
<SvgImage src={node.url} />
)}
</div>
))}
Expand All @@ -53,14 +53,14 @@ const GatsbyPluginImagePage = ({ data }) => {
<div>
<p>
<strong>
{node.title} ({node.file.fileName.split(".").pop()})
{node.title} ({node.fileName.split(".").pop()})
</strong>
</p>
{node.description && <p>{node.description}</p>}
{node.fixed ? (
<GatsbyImage image={node.fixed} />
) : (
<SvgImage src={node.file.url} />
<SvgImage src={node.url} />
)}
</div>
))}
Expand All @@ -72,14 +72,14 @@ const GatsbyPluginImagePage = ({ data }) => {
<div>
<p>
<strong>
{node.title} ({node.file.fileName.split(".").pop()})
{node.title} ({node.fileName.split(".").pop()})
</strong>
</p>
{node.description && <p>{node.description}</p>}
{node.dominantColor ? (
<GatsbyImage image={node.dominantColor} />
) : (
<SvgImage src={node.file.url} />
<SvgImage src={node.url} />
)}
</div>
))}
Expand All @@ -91,14 +91,14 @@ const GatsbyPluginImagePage = ({ data }) => {
<div>
<p>
<strong>
{node.title} ({node.file.fileName.split(".").pop()})
{node.title} ({node.fileName.split(".").pop()})
</strong>
</p>
{node.description && <p>{node.description}</p>}
{node.traced ? (
<GatsbyImage image={node.traced} />
) : (
<SvgImage src={node.file.url} />
<SvgImage src={node.url} />
)}
</div>
))}
Expand All @@ -110,14 +110,14 @@ const GatsbyPluginImagePage = ({ data }) => {
<div>
<p>
<strong>
{node.title} ({node.file.fileName.split(".").pop()})
{node.title} ({node.fileName.split(".").pop()})
</strong>
</p>
{node.description && <p>{node.description}</p>}
{node.blurred ? (
<GatsbyImage image={node.blurred} />
) : (
<SvgImage src={node.file.url} />
<SvgImage src={node.url} />
)}
</div>
))}
Expand Down Expand Up @@ -148,7 +148,7 @@ const GatsbyPluginImagePage = ({ data }) => {
<div>
<p>
<strong>
{node.title} ({node.file.fileName.split(".").pop()})
{node.title} ({node.fileName.split(".").pop()})
</strong>
</p>
{node.description && <p>{node.description}</p>}
Expand All @@ -162,7 +162,7 @@ const GatsbyPluginImagePage = ({ data }) => {
}}
/>
) : (
<SvgImage src={node.file.url} />
<SvgImage src={node.url} />
)}
</div>
))}
Expand All @@ -174,14 +174,14 @@ const GatsbyPluginImagePage = ({ data }) => {
<div>
<p>
<strong>
{node.title} ({node.file.fileName.split(".").pop()})
{node.title} ({node.fileName.split(".").pop()})
</strong>
</p>
{node.description && <p>{node.description}</p>}
{node.constrained ? (
<GatsbyImage image={node.constrained} />
) : (
<SvgImage src={node.file.url} />
<SvgImage src={node.url} />
)}
</div>
))}
Expand All @@ -193,14 +193,14 @@ const GatsbyPluginImagePage = ({ data }) => {
<div>
<p>
<strong>
{node.title} ({node.file.fileName.split(".").pop()})
{node.title} ({node.fileName.split(".").pop()})
</strong>
</p>
{node.description && <p>{node.description}</p>}
{node.constrained ? (
<GatsbyImage image={node.constrained} />
) : (
<SvgImage src={node.file.url} />
<SvgImage src={node.url} />
)}
</div>
))}
Expand Down Expand Up @@ -231,10 +231,8 @@ export const pageQuery = graphql`
nodes {
title
description
file {
fileName
url
}
fileName
url
constrained: gatsbyImageData(width: 420)
fullWidth: gatsbyImageData(width: 200, layout: FIXED)
fixed: gatsbyImageData(width: 200, layout: FIXED)
Expand Down Expand Up @@ -268,10 +266,8 @@ export const pageQuery = graphql`
nodes {
title
description
file {
fileName
url
}
fileName
url
constrained: gatsbyImageData(width: 420)
}
}
Expand All @@ -284,10 +280,8 @@ export const pageQuery = graphql`
nodes {
title
description
file {
fileName
url
}
fileName
url
constrained: gatsbyImageData(width: 420)
}
}
Expand Down
90 changes: 20 additions & 70 deletions e2e-tests/contentful/src/pages/media-reference.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,12 @@ const MediaReferencePage = ({ data }) => {
let content = null
if (many) {
content = many.map(imageData => (
<img src={imageData.file.url} style={{ width: 200 }} alt={title} />
<img src={imageData.url} style={{ width: 200 }} alt={title} />
))
}

if (one) {
content = (
<img src={one.file.url} style={{ width: 200 }} alt={title} />
)
content = <img src={one.url} style={{ width: 200 }} alt={title} />
}

return (
Expand All @@ -41,38 +39,24 @@ const MediaReferencePage = ({ data }) => {
let content = null
if (manyLocalized) {
content = manyLocalized.map(imageData => (
<img
src={imageData.file.url}
style={{ width: 200 }}
alt={title}
/>
<img src={imageData.url} style={{ width: 200 }} alt={title} />
))
}

if (oneLocalized) {
content = (
<img
src={oneLocalized.file.url}
style={{ width: 200 }}
alt={title}
/>
<img src={oneLocalized.url} style={{ width: 200 }} alt={title} />
)
}

if (many) {
content = many.map(imageData => (
<img
src={imageData.file.url}
style={{ width: 200 }}
alt={title}
/>
<img src={imageData.url} style={{ width: 200 }} alt={title} />
))
}

if (one) {
content = (
<img src={one.file.url} style={{ width: 200 }} alt={title} />
)
content = <img src={one.url} style={{ width: 200 }} alt={title} />
}

return (
Expand All @@ -92,38 +76,24 @@ const MediaReferencePage = ({ data }) => {
let content = null
if (manyLocalized) {
content = manyLocalized.map(imageData => (
<img
src={imageData.file.url}
style={{ width: 200 }}
alt={title}
/>
<img src={imageData.url} style={{ width: 200 }} alt={title} />
))
}

if (oneLocalized) {
content = (
<img
src={oneLocalized.file.url}
style={{ width: 200 }}
alt={title}
/>
<img src={oneLocalized.url} style={{ width: 200 }} alt={title} />
)
}

if (many) {
content = many.map(imageData => (
<img
src={imageData.file.url}
style={{ width: 200 }}
alt={title}
/>
<img src={imageData.url} style={{ width: 200 }} alt={title} />
))
}

if (one) {
content = (
<img src={one.file.url} style={{ width: 200 }} alt={title} />
)
content = <img src={one.url} style={{ width: 200 }} alt={title} />
}

return (
Expand Down Expand Up @@ -155,14 +125,10 @@ export const pageQuery = graphql`
id
}
one {
file {
url
}
url
}
many {
file {
url
}
url
}
}
}
Expand All @@ -179,24 +145,16 @@ export const pageQuery = graphql`
id
}
one {
file {
url
}
url
}
many {
file {
url
}
url
}
oneLocalized {
file {
url
}
url
}
manyLocalized {
file {
url
}
url
}
}
}
Expand All @@ -213,24 +171,16 @@ export const pageQuery = graphql`
id
}
one {
file {
url
}
url
}
many {
file {
url
}
url
}
oneLocalized {
file {
url
}
url
}
manyLocalized {
file {
url
}
url
}
}
}
Expand Down
9 changes: 8 additions & 1 deletion packages/gatsby-source-contentful/src/__tests__/gatsby-node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,8 @@ describe(`gatsby-node`, () => {
})
)

const file = getFieldValue(asset.fields.file, locale, defaultLocale)

// check if asset exists
expect(getNode(assetId)).toMatchObject({
title: getFieldValue(asset.fields.title, locale, defaultLocale),
Expand All @@ -268,7 +270,12 @@ describe(`gatsby-node`, () => {
locale,
defaultLocale
),
file: getFieldValue(asset.fields.file, locale, defaultLocale),
contentType: file.contentType,
fileName: file.fileName,
url: file.url,
size: file.details.size,
width: file.details?.image?.width || null,
height: file.details?.image?.height || null,
})
})
})
Expand Down
Loading

0 comments on commit 1f87c63

Please sign in to comment.