Contentful + GraphQL + angular

Recently I have worked on a website that was using a very good architecture for a Headless CMS Driven Approach.

I have used contentful as a CMS and Show the data in GraphQL Quires and finally bring the content with angular

A sample response from contentful

https://gist.github.com/tarun-nagpal-github/0ad9cd24fdafddd13550067ef7595d2b

Section 1 (Optional) — Setup and Use ContentFul

You can skip this step and use the keys provided in the example directly. In case you want to continue, let's start

Step 1 — Set up a ContentFUl account

https://www.contentful.com/sign-up/

Step 2 — Create a Content-Type and add the fields

Content-Type Page

Add Some fields

https://app.contentful.com/spaces/<your-space-id>/content_types

example — Blog Post and the fields like title and description

Step -3 Add some content entries

Add the content fields

Step 3 — Check the spaceId etc and set up a GraphQL Playground

GraphQL Editors

https://graphql.contentful.com/content/v1/spaces/j5fihdm9uq5m/environments/master/explore?access_token=jiCMLgiCBClcd7rwnPW6Jryryi3_N9B1laQGWm7i6Ws

Step 4 — Authenticate and use the API in Angular

I have created a sample APP with Angular that will be fetching the records with angular-contentful service. In this approach, I have not used apollo-angular but it is recommended to use.

You can also use the tutorial provided by contentful to set up and use it directly.

https://www.contentful.com/developers/docs/javascript/tutorials/using-contentful-in-an-angular-project/

Example repo — I have created a repo using my keys and access_tokens. This is a basic one and can be extended.

You can check it out and I am open to exploring it more.

https://github.com/tarun-nagpal-github/contentful-blog-catalog-angular