Get started


4 Apr 2017

Getting Started with Wagtail and GraphQL

I was recently tasked with adding a CMS to an existing React application using GraphQL and Python+Django on the back end.

Brent Clark

Brent Clark

Wagtail - GraphQL

Wagtail was a perfect fit for this task because it is simple to drop in as a Django app, and was easy to expose to our GraphQL layer. The ability to integrate Wagtail with our existing domain models at the GraphQL layer meant that we could leverage our existing API calls inside an article with little more than a ForeignKey and a small resolver.


  1. Starting from a blank repository
  2. Python 3.6
  3. virtualenv

Installing Wagtail

Add Blog App

Run python startapp blog

Update blog/ with the following content:

# Taken From

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 + [

    content_panels = Page.content_panels + [
        FieldPanel('body', classname="full"),

Install Graphene

Run pip install "graphene-django==1.2"

Configure Graphene

Add additional graphene settings to

    'SCHEMA': 'api.schema.schema',

Add an API app

Make a new folder at the root of mysite, called api


Make a new file inside the new api folder called, and paste in the following:

from django.apps import AppConfig

class ApiConfig(AppConfig):
    name = 'api'


Make another new file inside the api folder named 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)

    def resolve_articles(self):

schema = graphene.Schema(query=Query)

Configure URLs

Add two new imports to your file.

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

Add two new URLs to your file, just above the Wagtail entry.

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

Add the new apps to settings

    # ... previously installed apps

Commit new models

Run python makemigrations

Run python migrate

Start your local server

Run python runserver

Make a new blog entry

  • Access the wagtail admin at http://localhost:8000/admin/.
  • Using the menu, navigate to Explorer > Home Page and click Add Child Page
  • Add a new page of type BlogPage
  • Fill in all the fields
  • Save & publish

Test GraphQL

Navigate to http://localhost:8000/api/graphiql and run the query below:

query articles {
  articles {

Wagtail and GraphQL

Editor's note: see Supporting StreamFields, Snippets and Images in a Wagtail GraphQL API for a continuation of this post.