How to get the html elements from Contentful Raw Data for RSS-feeds (gatsby-plugin-feed)

Question

I'm bustin' my head trying to solve the latest breaking changes of my RSSfeeds using gatsby-plugin-feed@3.4.0 & gatsby@3.4.0 (latest of the latest).

This is my config: (gatsby-config.js)

{
      resolve: 'gatsby-plugin-feed',
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                author
                description
                bizEmail
                authorEmail
                siteUrl
                site_url: siteUrl
              }
            }
          }
        `,

        setup: ({ query: { site } }, options) => ({
          ...options,
          title: 'Menefex WMB: RSS Feeds',
          description: site.siteMetadata.description,
          site_url: site.siteMetadata.siteUrl,
          feed_url: `${site.siteMetadata.siteUrl}/rss.xml`,
          image_url: 'https://i.postimg.cc/JnqZPb3f/Gx-FAVICON.png',
          webMaster: `${site.siteMetadata.bizEmail} (${site.siteMetadata.title})`,
          managingEditor: `${site.siteMetadata.authorEmail} (${site.siteMetadata.author})`,
          copyright: `© 2019 - ${new Date().getFullYear()} ${
            site.siteMetadata.title
          }, Alle rechten voorbehouden.`,
          language: 'nl',
          generator: 'GatsbyJS',
          ttl: '60',
          custom_namespaces: {
            webfeeds: 'http://webfeeds.org/rss/1.0',
          },
          custom_elements: [
            {
              'webfeeds:cover': {
                _attr: {
                  image: 'https://i.postimg.cc/WbsmfwKc/Gx-NEWLOGO.png',
                },
              },
            },
            { 'webfeeds:icon': 'https://i.postimg.cc/JnqZPb3f/Gx-FAVICON.png' },
            { 'webfeeds:logo': 'https://i.postimg.cc/JnqZPb3f/Gx-FAVICON.png' },
            { 'webfeeds:accentColor': 'FFCC00' },
            {
              'webfeeds:related': {
                _attr: {
                  layout: 'card',
                  target: 'browser',
                },
              },
            },
          ],
        }),

        feeds: [
          {
            serialize: ({ query: { site, allContentfulBlogPost } }) =>
              allContentfulBlogPost.edges.map((edge) => ({
                title: edge.node.title,
                author: site.siteMetadata.authorEmail,
                description: edge.node.subtitle,
                date: edge.node.updatedAt,
                url: `${site.siteMetadata.siteUrl}/blog/${edge.node.slug}`,
                guid: edge.node.updatedAt,
                enclosure: {
                  url: `https:${edge.node.image.file.url}`,
                },
                custom_elements: [
                  {
                    'webfeeds:featuredImage': `https:${edge.node.image.file.url}`,
                  },
                  {
                    'content:encoded': JSON.stringify(edge.node.body),
                  },
                ],
              })),

            query: `
              {
                allContentfulBlogPost(sort: { fields: publishedDate, order: DESC }) {
                  edges {
                    node {
                      title
                      subtitle
                      slug
                      updatedAt
                      body {
                        raw
                        references {
                          ... on ContentfulAsset {
                            contentful_id
                            __typename
                            fixed(width: 1600) {
                              width
                              height
                              src
                              srcSet
                            }
                          }
                        }
                      }
                      image {
                        file {
                          url
                        }
                      }
                    }
                  }
                }
              }
            `,

            output: '/rss.xml',
            title: 'Menefex WMB: RSS Feeds',
            // optional configuration to insert feed reference in pages:
            // if `string` is used, it will be used to create RegExp and then test if pathname of
            // current page satisfied this regular expression;
            // if not provided or `undefined`, all pages will have feed reference inserted
            match: '^/blog/',
            // optional configuration to specify external rss feed, such as feedburner
            link: 'https://feeds.feedburner.com/GimmixWMB',
          },
        ],
      },
    },

With the code above I get this code beneath; (focus: content:encoded). I think this is not good/enough to view my rssfeeds the right way. How do I parse the raw data to html elements?

I used to have this piece of code beneath working before i migrated my Gatsby project to v3: Its now complaining about using a CreateType/createSchemaCustomization function & my rssHtml is not reachable in the GrapQhl playground.

my gatsby-node.js


const { documentToHtmlString } = require('@contentful/rich-text-html-renderer');

exports.createResolvers = ({ createResolvers }) => {
  createResolvers({
    contentfulBlogPostBodyRichTextNode: {
      rssHtml: {
        type: 'String',
        resolve: (source) => documentToHtmlString(source),
      },
    },
  });
};

What am i missing here? Thanks in advance.

How is it complaining? Do you have any error messages or warnings? — diedu, Jun 01 '21 at 03:16
I've changed the `contentfulBlogPostBodyRichTextNode` to `contentfulBlogPostBody` to target the blogpost body. That gets me a step further, but i'm still not getting the formatted raw data at all. And no i have no errors or warnings... @diedu — mikeyfe6, Jun 01 '21 at 05:44
what is the step further? were you able to see the `rssHtml` in GrapQhl playground now? please be a little more specific — diedu, Jun 01 '21 at 05:52
hey @mikeyfe6, were you able to try the solution on my answer? — diedu, Jun 02 '21 at 02:09

diedu · Accepted Answer · 2021-06-02T15:01:24.243

2

Looking at your screenshot, the edge.node.body has the raw field, which I think is what you want to parse. Try passing that value to the documentToHtmlString call

        resolve: (source) => documentToHtmlString(JSON.parse(source.raw)),

and in your RSS feed config pass the new resolved value

                      'content:encoded': edge.node.body.rssHtml,

You might as well try to use the @contentful/rich-text-html-renderer directly in your gatsby-config.js file and avoid adding a custom resolver

const { documentToHtmlString } = require('@contentful/rich-text-html-renderer');

...
                    'content:encoded': documentToHtmlString(edge.node.body.raw),
...

edited Jun 02 '21 at 15:01

answered Jun 01 '21 at 06:24

diedu

19,277
4
32
49

I'm will try it right now! Will edit this post for the results. And with a step further I meant targeting the right Content-type name to parse the raw data. Contentful changed it, before you could target the contentfulBlogPostBodyRichTextNode. – mikeyfe6 Jun 02 '21 at 14:16
This still results in empty strings @diedu, when previewing Grapqhl playground and query for rssHtml: "" (see screenshot: https://i.postimg.cc/brHv9Cbw/Error-rss-Html.png) – mikeyfe6 Jun 02 '21 at 14:53
1

@mikeyfe6 probably `raw` is stringified, try adding a `JSON.parse` before the `documentToHtmlString` function, I updated my answer with this change – diedu Jun 02 '21 at 15:01
You're the man, i can see my content now I will also implement it in the gatsby-config.js for a cleaner approach. – mikeyfe6 Jun 02 '21 at 21:09
@mikeyfe6 I'm glad it worked. Let me know how the gatsby-config.js approach goes. Also I'd appreciate it If you accept my answer – diedu Jun 02 '21 at 23:06
1

Till today I havent tried the gatsby-config.js approach though, busy dayss. I think its the better way cause I also need the reference for embedded assets... My rssfeeds are coming without assets, but its fine for now because people will mostly use screenreaders... Thank you thooo – mikeyfe6 Jun 12 '21 at 15:40

How to get the html elements from Contentful Raw Data for RSS-feeds (gatsby-plugin-feed)

1 Answers1