422 error with dynamic route with longform data property

Themes
1

Hi there !

I’m trying to create dynmic routing in a project I’m working on.

I added a static page that list all the tags available on the blog by modifying the routes.yaml as followed:

routes:
  /tags/: tags

I also added a {{#get 'tags'}} inside my tags.hbs file to pull up all the tags from Ghost. This has worked well. But then If found this sentence about the data property in the documentation:

This property can fetch [data] to be made available in a handlebars template, avoiding the need to use {{get}} everywhere.

So it thought about giving it a try to remove the call to {{#get}} from my template. Thus, I changed my routes.yaml file to what I understood was the Right Way of doing:

routes:
  /tags/:
    template: tags
    data:
      tags:
        resource: tags
        type: read

What I suppose this config means is:

  1. Create a route matching /tags/
  2. Render it with the tags.hbs template
  3. Add a tags variable containing all the tags to the template’s context

Note that I’m note quite sure of what the type property do. I tried with the browse value: no success.

Also changed the content of my tags.hbs file to this:

{{!< default}}

<main role="main">
  <ul>
    {{#foreach tags}}
      <li>
        <a class="link f2" href="{{url}}" title="{{name}}">{{name}}</a>
      </li>
    {{/foreach}}
  </ul>
</main>

Problem is, when uploading the new routes.yaml and trying to access the /tags/ route, I’m welcomed with a 422error and a somewhat cryptic message:

image

There’s obviously something wrong in my configuration… but what ?

Would anyone know what this message is trying to tell me ? Have I done something wrong in my routes.yaml file or elsewhere ?

Thanks in advance for your input !

2

You are using the read method, which requires adding a slug property.
I assume you want to use browse?

3

I suppose I am, yes.

If I understand correctly, the read method should be used when one wants to access one specific resource, and thus the slug property is mandatory, while the browse method should be used to access a list of the specified resource?

I tried using the browse method in my routes.yaml. I also renamed my data variable from tags to categories, as this seemed to be the cause of a 500 error telling me that tags.map was not a function.

My routes.yaml now looks like this:

routes:
  /: index
  /tags/:
    template: tags
    data:
      categories:
        resource: tags
        type: browse

collections:
  /all/:
    permalink: /{slug}/
    template:
      - articles

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

My template’s only change is in the foreach that now loops on categories instead of tags.

I don’t have any error in the page, but the result still isn’t what I expected, as I have a list of three empty items…

image
image939×256 3.55 KB

Just to see what would happen, I also tried changing the resource property to posts and authors. The result was the same as above in both cases: a list of three empty items.

This is very strange :sweat_smile: Am I still missing or misusing something ?

4

I think you have to use

{{#foreach categories.tags}}
    {{this.slug}}
{{/foreach}}

We probably need to revisit the way you access.data properties in templates :thinking:

5

Ooh! That worked, thanks!

You might want to update the documentation to include those information on the property and how to access the data :wink: :+1:

6

I have raised:

1 Like