Returning all fields with Wagtail API from page slug

Question

I'm creating a VueJS front-end app that uses Wagtail CMS for the backend and connects through the Wagtail APIV2. The problem I'm having is when retreiving page information via the page slug. This query will not return additional fields, whereas queires by page type and page id will.

The Blog model looks like this (I've trimed out some methods for brevity:

class BlogPage(Page):
    intro = RichTextField(blank=True)
    body = StreamField(blocks.CMSStreamBlock(), blank=True)
    tags = ClusterTaggableManager(through=BlogPageTag, blank=True)
    date = models.DateField("Post date")
    author = models.ForeignKey(
        settings.AUTH_USER_MODEL,
        default='',
        on_delete=models.SET_NULL,
        related_name='author_data',
        null=True,
        blank=True,
        limit_choices_to=limit_author_choices
    )
    feed_image = models.ForeignKey(
        'wagtailimages.Image',
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name='+'
    )

    class Meta:
        verbose_name = "Blog and Updates Page"

    content_panels = [
        FieldPanel('title', classname="full title"),
        FieldPanel('date'),
        FieldPanel('author'),
        ImageChooserPanel('feed_image'),
        FieldPanel('tags'),
        FieldPanel('intro', classname="full"),
        StreamFieldPanel('body'),
    ]

    api_fields = [
        APIField('feed_img', serializer=ImageRenditionField('width-800', source='feed_image')),
        APIField('intro'),
        APIField('body'),
        APIField('tags'),
        APIField('date'),
        APIField('author')
    ]

If I query http://localhost:8000/api/v2/pages/?type=cms.BlogPage&fields=* It returns:

{
    "meta": {
        "total_count": 4
    },
    "items": [
        {
            "id": 8,
            "meta": {
                "type": "cms.BlogPage",
                "detail_url": "http://localhost:8000/api/v2/pages/8/",
                "html_url": "http://localhost:8000/en/blog/first-blog-post/",
                "slug": "first-blog-post",
                "show_in_menus": false,
                "seo_title": "",
                "search_description": "",
                "first_published_at": "2017-10-18T22:54:14.709694Z"
            },
            "title": "First blog post",
            "feed_img": {
                "url": "/media/images/DSC02705.width-800.jpg",
                "width": 800,
                "height": 534
            },
            "intro": "<p>Praesent placerat in eros sit amet gravida. Curabitur nec semper ligula, sit amet egestas sapien. Nullam feugiat non mi vitae egestas. Morbi hendrerit mauris mauris, et tempor eros euismod hendrerit. Integer tempor lacus nulla, eget posuere ex dignissim quis. Donec laoreet tempor suscipit. Etiam ut purus eget turpis commodo aliquam. Donec sed maximus diam, non venenatis arcu. Sed mollis laoreet euismod.</p>",
            "body": [
                {
                    "type": "paragraph",
                    "value": "<p>A bunch more text in here.</p><p>Ut sit amet nisl condimentum, convallis neque eu, fringilla leo. Quisque tincidunt sed quam vel pulvinar. Maecenas vehicula pharetra volutpat. Integer velit mi, scelerisque quis lacus nec, molestie pharetra nisi. Vivamus efficitur magna vel justo lacinia tincidunt. Nam at mi accumsan, sagittis risus sed, iaculis leo. Nullam faucibus lorem a consequat varius. Etiam consectetur metus dui, et maximus turpis volutpat at. Donec vitae blandit nisi. Phasellus commodo vehicula ante vel accumsan. Fusce nec lorem urna. Pellentesque eget dapibus nibh, in ultrices felis. Curabitur felis erat, luctus eu maximus eu, pretium id lorem.</p><p>Nunc consequat, velit non consectetur laoreet, elit nisl finibus diam, id ultrices nunc quam imperdiet mi. Integer vel mi ac quam viverra pellentesque eu eu ante. Cras at est id augue hendrerit pretium ac non sem. Donec quis auctor sem, vel commodo nisi. Mauris ac tincidunt diam. Sed vel erat rhoncus, euismod nisl sit amet, tincidunt arcu. Nam a auctor lorem. Vestibulum in mauris lacus.</p><p>Duis posuere enim odio, vel lacinia nulla condimentum non. Nulla vitae pulvinar neque, sed ultricies est. Nullam fringilla id nibh imperdiet euismod. Pellentesque mauris turpis, tincidunt id commodo in, dictum a tortor. Vestibulum sit amet mollis lacus. Aenean laoreet venenatis orci. Sed nec aliquam ante. Cras congue eu urna eget faucibus. Ut lobortis convallis dictum. Donec aliquet massa sed tortor molestie, ac vestibulum eros imperdiet. Sed eget elit est. Nulla convallis, lorem ac dignissim aliquam, nisi turpis sollicitudin ipsum, vel dictum urna turpis eu orci. Morbi varius massa nisi, nec egestas massa imperdiet tempor. Morbi semper enim non condimentum bibendum. Mauris pulvinar hendrerit tincidunt.</p>",
                    "id": "bebd35d4-a2ad-4b82-baf1-305e817ec55e"
                }
            ],
            "tags": [
                "Tag1",
                "Tag2"
            ],
            "date": "2017-10-18",
            "author": {
                "id": 2,
                "meta": {
                    "type": "users.User"
                }
            }
        },
        {
            "id": 9,
    .....

If I query http://localhost:8000/api/v2/pages/8/ all fields are returned. However, if I query http://localhost:8000/api/v2/pages/?slug=second-blog-post&fields=*

I get

{
    "meta": {
        "total_count": 1
    },
    "items": [
        {
            "id": 9,
            "meta": {
                "type": "cms.BlogPage",
                "detail_url": "http://localhost:8000/api/v2/pages/9/",
                "html_url": "http://localhost:8000/en/blog/second-blog-post/",
                "slug": "second-blog-post",
                "show_in_menus": false,
                "seo_title": "",
                "search_description": "",
                "first_published_at": "2017-10-19T00:07:22.887487Z"
            },
            "title": "Second blog post"
        }
    ]
}

And if I query http://localhost:8000/api/v2/pages/?slug=second-blog-post&fields=body I get

{
    "message": "unknown fields: body"
}

So it appears I am unable to retrieve all record fields from a slug lookup. This mean to populate a page from a slug lookup I need to: 1. lookup the page via the slug 2. record the page ID 3. make a second call to retrive the field by page ID.

This seems like the long way round. Am I missing something?

allcaps allcaps · Accepted Answer · 2018-06-09T22:53:34

This question is raised and answered on Wagtail Slack. This is the answer by @gasman

I think the issue is that the 'fetch by slug' mechanism is still ultimately using the API endpoint for fetching a listing of pages rather than a single page, and that one doesn't call specific() on the queryset - which means only the core Page fields are available.

With a bit of re-plumbing you could customise the PagesAPIEndpoint class to call specific() - the Wagtail admin has an internal API that does a similar thing (along with a bunch of other customisations): https://github.com/wagtail/wagtail/blob/master/wagtail/admin/api/endpoints.py

Alternatively, rather than looking up by slug (which is a bit fragile because the same slug could potentially exist under multiple different parents), you could use the new 'find' endpoint added in Wagtail 2.1: http://docs.wagtail.io/en/v2.1/advanced_topics/api/v2/usage.html#finding-pages-by-html-path

Unfortunately, in its current form it will still involve a redundant round-trip to the API because it works on a redirect, but it'll save you a bit of code at least...

Returning all fields with Wagtail API from page slug

1 Answers