refactor: align Rich Text field structure to Contentful GraphQL API (#31122)

Author: axe312ger

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

@@ -20,13 +20,13 @@ function renderReferencedComponent(ref) {
   return <Component {...ref} />
 }
 
-const options = {
+const makeOptions = ({ assetBlockMap, entryBlockMap, entryInlineMap }) => ({
   renderMark: {
     [MARKS.BOLD]: text => <strong data-cy-strong>{text}</strong>,
   },
   renderNode: {
     [BLOCKS.EMBEDDED_ASSET]: node => {
-      const asset = node.data.target
+      const asset = assetBlockMap.get(node?.data?.target?.sys.id)
       if (asset.fluid) {
         return <GatsbyImage {...asset} style={{ width: 200 }} />
       }
@@ -40,7 +40,7 @@ const options = {
       )
     },
     [BLOCKS.EMBEDDED_ENTRY]: node => {
-      const entry = node?.data?.target
+      const entry = entryBlockMap.get(node?.data?.target?.sys.id)
       if (!entry) {
         throw new Error(
           `Entity not available for node:\n${JSON.stringify(node, null, 2)}`
@@ -49,7 +49,7 @@ const options = {
       return renderReferencedComponent(entry)
     },
     [INLINES.EMBEDDED_ENTRY]: node => {
-      const entry = node.data.target
+      const entry = entryInlineMap.get(node?.data?.target?.sys.id)
       if (entry.__typename === "ContentfulText") {
         return (
           <span data-cy-id="inline-text">
@@ -64,7 +64,7 @@ const options = {
       )
     },
   },
-}
+})
 
 const RichTextPage = ({ data }) => {
   const entries = data.allContentfulRichText.nodes
@@ -75,7 +75,7 @@ const RichTextPage = ({ data }) => {
         return (
           <div data-cy-id={slug} key={id}>
             <h2>{title}</h2>
-            {renderRichText(richText, options)}
+            {renderRichText(richText, makeOptions)}
             <hr />
           </div>
         )
@@ -93,77 +93,94 @@ export const pageQuery = graphql`
         id
         title
         richText {
-          raw
-          references {
-            __typename
-            sys {
-              id
-            }
-            ... on ContentfulAsset {
-              fluid(maxWidth: 200) {
-                ...GatsbyContentfulFluid
-              }
-            }
-            ... on ContentfulText {
-              title
-              short
-            }
-            ... on ContentfulLocation {
-              location {
-                lat
-                lon
+          json
+          links {
+            assets {
+              block {
+                sys {
+                  id
+                }
+                fluid(maxWidth: 200) {
+                  ...GatsbyContentfulFluid
+                }
               }
             }
-            ... on ContentfulContentReference {
-              title
-              one {
+            entries {
+              block {
                 __typename
                 sys {
                   id
+                  type
                 }
                 ... on ContentfulText {
                   title
                   short
                 }
+                ... on ContentfulLocation {
+                  location {
+                    lat
+                    lon
+                  }
+                }
                 ... on ContentfulContentReference {
                   title
                   one {
+                    __typename
+                    sys {
+                      id
+                    }
+                    ... on ContentfulText {
+                      title
+                      short
+                    }
                     ... on ContentfulContentReference {
                       title
+                      one {
+                        ... on ContentfulContentReference {
+                          title
+                        }
+                      }
+                      many {
+                        ... on ContentfulContentReference {
+                          title
+                        }
+                      }
                     }
                   }
                   many {
+                    __typename
+                    sys {
+                      id
+                    }
+                    ... on ContentfulText {
+                      title
+                      short
+                    }
+                    ... on ContentfulNumber {
+                      title
+                      integer
+                    }
                     ... on ContentfulContentReference {
                       title
+                      one {
+                        ... on ContentfulContentReference {
+                          title
+                        }
+                      }
+                      many {
+                        ... on ContentfulContentReference {
+                          title
+                        }
+                      }
                     }
                   }
                 }
               }
-              many {
+              inline {
                 __typename
                 sys {
                   id
-                }
-                ... on ContentfulText {
-                  title
-                  short
-                }
-                ... on ContentfulNumber {
-                  title
-                  integer
-                }
-                ... on ContentfulContentReference {
-                  title
-                  one {
-                    ... on ContentfulContentReference {
-                      title
-                    }
-                  }
-                  many {
-                    ... on ContentfulContentReference {
-                      title
-                    }
-                  }
+                  type
                 }
               }
             }

packages/gatsby-source-contentful/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
+    "@contentful/rich-text-links": "^14.1.2",
     "@contentful/rich-text-react-renderer": "^14.1.2",
     "@contentful/rich-text-types": "^14.1.2",
     "@hapi/joi": "^15.1.1",