Wagtail fields not showing up in pages list response

Question

Im using Wagtail with django and I'm following the tutorial. I've got a BlogPage like so:

class BlogPage(Page):
    date = models.DateField("Post date")
    intro = models.CharField(max_length=250)
    body = RichTextField(blank=True)
    # Add this:
    authors = ParentalManyToManyField("blog.Author", blank=True)

    tags = ClusterTaggableManager(through=BlogPageTag, blank=True)

    api_fields: list[APIField] = [
        APIField("tags"),
        APIField("date"),
        APIField("authors", serializer=AuthorSerializer(many=True)),
        APIField("intro"),
        APIField("body"),
    ]

and when I go to a detail view, I'm able to see the fields e.g.http://127.0.0.1:8000/api/v2/pages/5/

{
    "id": 5,
    "meta": {
        "type": "blog.BlogPage",
        "detail_url": "http://localhost/api/v2/pages/5/",
        "html_url": "http://localhost/blog/first-blog-post/",
        "slug": "first-blog-post",
        "show_in_menus": false,
        "seo_title": "",
        "search_description": "",
        "first_published_at": "2023-08-20T04:37:17.102729Z",
        "alias_of": null,
        "parent": {
            "id": 4,
            "meta": {
                "type": "blog.BlogIndexPage",
                "detail_url": "http://localhost/api/v2/pages/4/",
                "html_url": "http://localhost/blog/"
            },
            "title": "Our blog"
        }
    },
    "title": "First blog post",
    "tags": [
        "react"
    ],
    "date": "2023-08-20",
    "authors": [
        {
            "name": "Brad",
            "author_image": "/media/original_images/71UHg51kgKL._AC_SY679_.jpg"
        }
    ],
    "intro": "This is a blog post intro",
    "body": "<p data-block-key=\"q28xv\">Hello World</p>"
}

However, in the list view, this same page does not contain those fields. I have tried using the fields=* parameter in the url and still, all that shows up is the title

e.g http://127.0.0.1:8000/api/v2/pages/

{
    "meta": {
        "total_count": 3
    },
    "items": [
        {
            "id": 3,
            "meta": {
                "type": "home.HomePage",
                "detail_url": "http://localhost/api/v2/pages/3/",
                "html_url": "http://localhost/",
                "slug": "home",
                "first_published_at": "2023-08-20T04:23:02.114917Z"
            },
            "title": "Home"
        },
        {
            "id": 4,
            "meta": {
                "type": "blog.BlogIndexPage",
                "detail_url": "http://localhost/api/v2/pages/4/",
                "html_url": "http://localhost/blog/",
                "slug": "blog",
                "first_published_at": "2023-08-20T04:35:09.759993Z"
            },
            "title": "Our blog"
        },
        {
            "id": 5,
            "meta": {
                "type": "blog.BlogPage",
                "detail_url": "http://localhost/api/v2/pages/5/",
                "html_url": "http://localhost/blog/first-blog-post/",
                "slug": "first-blog-post",
                "first_published_at": "2023-08-20T04:37:17.102729Z"
            },
            "title": "First blog post"
        }
    ]
}

What's happening and how can I fix it?

Answer 1

How are you creating the Page list? It looks like you might have omitted the specific() command of the ORM call. Without that, you get a collection of objects in the class that you've used to build your query. If you've queried Page.obects, you'll get a list of Page objects:

In [3]: Page.objects.public().live()
Out[3]: <PageQuerySet [<Page: Root>, <Page: Home Page>, <Page: Blog Index>, 
    <Page: Also a Blog>, <Page: Some Blog>, <Page: Another Blog>, 
    <Page: test readonly>, <Page: Test CSV>]>

If you add specific(), you get the top-level class of each:

In [4]: Page.objects.public().live().specific()
Out[4]: <PageQuerySet [<Page: Root>, <HomePage: Home Page>, <BlogPage: Blog Index>, 
    <BlogPage: Also a Blog>, <BlogPage: Some Blog>, <BlogPage: Another Blog>, 
    <BlogPage: test readonly>, <HomePage: Test CSV>]>

You'll have access to all the custom attributes of those items now.