![]() ![]() For example, a nodeType of "paragraph" should become a React element of type "p". ![]() This property indicates what type of React Element the node should map to. If you noticed in the sketch of the data above, each node has a nodeType property. This algorithm uses Depth First Search to traverse the tree. ![]() The arrows going down are new function invocations being added to the call stack, and vice versa. If you follow the arrows, you will see the order in which each node is invoked to be parsed and converted. The conversion from Axios + Drupal over to Contentful was actually surprisingly simple however, as with most new systems Contentful was not without its headaches. All "leaf" nodes will be converted first. I decided to give Contentful a try since some of our clients had been inquiring and would give me an oppotunity to learn some new stuff. But some of those child nodes inevitably have children of their own, so we will convert all of those children first. not a "leaf" - and invokes the same function parseNode on each node in the array, returning a new array of React Elements. #CONTENTFUL RICH TEXT CODE#That one line of code checks to see if this node has child nodes - i.e. Well we want to convert all of those nodes into React Elements too! We will convert all of a node's children before we continue converting itself.Ĭonst mappedContent = content & content.map(parseNode) Once again, we know that content is an array of all the child nodes. The query from Contentful might looks something like this:ĬontentfulBlogPost(contentful_id: = node The reason I bring this up, is because the api is slightly different when querying for data with Gatsby than with Contentful's built in GraphQL api. Monorepo with Typescript libraries for handling and rendering Contentful Rich Text documents. The context of this post is very meta - parsing Contentful's Rich Text Editor response to display the content of a blog post on a website made with Gatsby. I didn't want to pay just to get some data returned to test with. Rich Text on iOS apps, check out rich-text-renderer.swift on Github. SEO matters.įree: At the time, I was not considering building anything on top of whichever CMS I went with. Swift library for the Contentful Content Delivery API and Content Preview API. In fact, I'm not even sure Contentful is one of the best options available, because I have never used any of the others. I needed to explore one of the most popular GraphQL implementations, Apollo.īest of Breed Headless CMS: After a quick search for "best headless cms", Contentful was the first hit. Has GraphQL api : The original reason for even looking for a headless CMS was to create some content that can be returned through a GraphQL api. We also do something similar at CNBC to convert some JSON data into the components that make up our Articles. There already exists an official package that I am sure is more robust, but I wanted a fun programming exercise to work through.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |