The following examples use JavaScript to fetch data from this example blog post. Rendering Rich Text references using the REST API That’s the visual structure of the Rich Text field, but how is the content - and especially the references - represented in the JSON response? What are the differences between the REST and GraphQL API responses? Let’s take a look. The video embed entry contains the following fields:
CONTENTFUL JSON EDITOR CODE
Additionally, it allows entries and assets within our Contentful space to be linked dynamically and embedded within the flow of the text. The key difference here is that the Contentful Rich Text field response is returned as pure JSON rather than HTML.
Rich Text is a field type that enables authors to create rich text content, similar to traditional “what you see is what you get” (WYSIWYG) editors. Now that we’re familiar with how Contentful returns items and their linked entries and assets, and how we can resolve the links either manually (through a lot of hard work!) or with the JavaScript SDK (that’s nice and easy), let’s look at how it works with links inside the Rich Text field.
CONTENTFUL JSON EDITOR HOW TO
Trying to understand how to identify the select dropdown and update the last selected values. This post focuses on working with Contentful in a JavaScript ecosystem, but the principals and methods are the same across the tech stack and can be applied to your favorite programming language, too.īefore you get started, you might want to check out this blog post to take a deep dive into the inner workings of the Contentful REST API and GraphQL API, how our links are returned in the response and how they can be resolved into a rich object graph. Ive created custom editor app for JSON object field in Contentful, and created two dropdowns select-react, the flow is working fine, but while saving the values are not getting saved in Contentful. 4) Add your environment variablesĪdd a now.In order to understand how to render linked assets and entries inside the Contentful Rich Text field on the front end, it is crucial to understand how linked assets and entries work across Contentful as a whole. If you are missing these directories, you did not properly initialize the project. Whether you’re adding more products into your portfolio, evolving your tech stack, increasing your project’s complexity, or expanding into. Open the project within your preferred text editor and make sure your project has the following directories: package.json, package-lock.json. Used by over 30,000 teams of all sizes across the world, Hygraph is the solid content infrastructure powering the ambitious ideas of companies like Shure, Unilever, and Discovery. Next, add the project dependencies: npm i contentful next react react-dom Next, initialize your project, creating a package.json file in the process: npm init -y We will be storing these in our env files or Now’s handy CLI 3) Spin up your Next appĬreate a directory for your project: mkdir nextjs-contentful-blog & cd nextjs-contentful-blog With the keys created, make a note of both the Space ID and the Content Delivery API - access token, these will be used later on. 2) Create your API KeysĬlick through to the Settings tab and choose the API Keys option, then click the Add API Key button. Next, let’s create a set of API keys as well as find your space id, this will allow you to connect to the Contentful Client to request your posts. Just like that, you have a post you can make a request for then render on your Nextjs site. Next, open the Content section using the Content tab, click the Add Post button and create a dumby post.
0 kommentar(er)
