Getting started with Wagtail CMS (Django) and GraphQL

If you have a need to add React to Wagtail CMS, and even using GraphQL, this guide should help you with this.







This is a translation of an article from the official Wagtail blog by Brent Clark.



The ability to integrate a Wagtail CMS (Django) with existing graphQL site models means that we could use our existing API calls inside blog articles using little more than a ForeignKey and a small converter.

')

Required:

• Empty folder for the project
• Python 3.6
• virtualenv
• Installed Wagtail CMS ( Installation Guide )

Let's start creating a standard blog:



Add a blog application:

python manage.py startapp blog 

Update blog / models.py with the following content:

 # Taken From http://docs.wagtail.io/en/v1.9/getting_started/tutorial.html from __future__ import unicode_literals from django.db import models # Create your models here. from wagtail.wagtailcore.models import Page from wagtail.wagtailcore.fields import RichTextField from wagtail.wagtailadmin.edit_handlers import FieldPanel from wagtail.wagtailsearch import index class BlogIndexPage(Page): intro = RichTextField(blank=True) content_panels = Page.content_panels + [ FieldPanel('intro', classname="full") ] class BlogPage(Page): date = models.DateField("Post date") intro = models.CharField(max_length=250) body = RichTextField(blank=True) search_fields = Page.search_fields + [ index.SearchField('intro'), index.SearchField('body'), ] content_panels = Page.content_panels + [ FieldPanel('date'), FieldPanel('intro'), FieldPanel('body', classname="full"), ] 

To implement the Wagtail CMS bundle (Django) and GraphQL, we use Graphene .



Note: This solution is universal for many Django projects thanks to the Graphene-django package.



Install Graphene :

 pip install "graphene-django==1.2" 

Graphene Setup:



Add the GRAPHENE parameter to base.py

 GRAPHENE = { 'SCHEMA': 'api.schema.schema', } 

Add an API application:



Create a folder called api in the root folder of the site .



Add apps.py



Create an apps.py file inside the new api folder and paste the following into it:

 from django.apps import AppConfig class ApiConfig(AppConfig): name = 'api' 

Add schema.py



Create another schema.py file inside the api folder with the following contents:

 from __future__ import unicode_literals import graphene from graphene_django import DjangoObjectType from blog.models import BlogPage from django.db import models class ArticleNode(DjangoObjectType): class Meta: model = BlogPage only_fields = ['id', 'title', 'date', 'intro', 'body'] class Query(graphene.ObjectType): articles = graphene.List(ArticleNode) @graphene.resolve_only_args def resolve_articles(self): return BlogPage.objects.live() schema = graphene.Schema(query=Query) 

URL setting



Add two new imports to your urls.py file.

 from django.views.decorators.csrf import csrf_exempt from graphene_django.views import GraphQLView 

Add two new URLs to your urls.py file, just above the Wagtail addresses.

 url(r'^api/graphql', csrf_exempt(GraphQLView.as_view())), url(r'^api/graphiql', csrf_exempt(GraphQLView.as_view(graphiql=True, pretty=True))), 

Add new applications to settings:

 INSTALLED_APPS = ( # ...    'api', 'blog', 'graphene_django', ) 

Commit changes:

 python manage.py makemigrations python manage.py migrate 

If everything was done correctly and there were no errors, then start the local server:

 python manage.py runserver 

Create a new blog entry:

• Log in to the wagtail admin panel at http: // localhost: 8000 / admin / .
• Using the menu, go to Explorer> Home Page and click Add Child Page
• Add New BlogPage Type Page
• Fill in all the fields
• Save and publish the new page.

GraphQL Testing:



Go to http: // localhost: 8000 / api / graphiql and execute the query shown below:

 query articles { articles { id title date intro body } } 

You should see something like this:







Then you can already use GraphQL to implement interaction with React or any other component of your site.