How to load nested data with Graphql from storyblok?

Question

I'm trying to fetch with one graphql query all needed information for a blog post. I'm using gridsome and storyblok. For that, I'm using this plugin.

The first query loads with the ID everything from a specific blog post but is not loading nested data like categories or authors.

For example:

<page-query>
    query StoryblokEntry ($id: ID) {
        storyblokEntry (id: $id) {
            id
            slug
            content
        }
    }
</page-query>

When I test the query with the ID of "story-3850216-default", I get this result:

{
  "data": {
    "storyblokEntry": {
      "id": "story-3850216-default",
      "slug": "hello-world",
      "content": {
        "_uid": "f5a0bd9d-ec13-4381-ae5f-a7e2bb093fbe",
        "title": "Hello World 👋",
        "authors": [
          "61dec800-1b17-443e-961a-1cf8ef08d803"
        ],
        "content": "hi",
        "component": "article-post",
        "categories": [
          "e1509e6e-2007-4d4b-8857-4bc1105c5505"
        ],
      }
    }
  }
}

What should I do, so that the values of authors and categories are eager loaded?

My background is coming from normal REST-APIs and now I'm a bit overwhelmed.

Answer 1

As Storyblok has components as first class citizens resolving a attribute can be done via the resolve_relations api function. This lets you also resolve attributes in deeply nested components just by providing the component name and the attribute (YOUR_COMPONENT.YOUR_ATTRIBUTE).

{
  use: 'gridsome-source-storyblok',
  options: {
    ...
    params: {
      resolve_relations: 'article-post.authors,article-post.categories'
    }
  }
}