marinaaisa/nuxt-markdown-blog-starter

[support] Can we import multiple post types in the asyncData promise?

chasebank opened this issue · 1 comments

Awesome work with this! The way you're handling everything is pretty straight forward and works great, so thanks for sharing.

I'm running into an issue though: What if you have multiple post types, like "blog" and "projects" and want to load both in the same page? I can't figure it out.

Here's what I've tried (that doesn't work):

import blog from "~/pages/blog/list.js";
import projects from "~/pages/projects/list.js";

export default {
  async asyncData({ app }) {
    async function asyncImportBlog(postName) {
      const wholeMD = await import(`~/pages/blog/${postName}.md`);
      return wholeMD.attributes;
    }

    async function asyncImportProjects(projectName) {
      const wholeMD = await import(`~/pages/projects/${projectName}.md`);
      return wholeMD.attributes;
    }

    return Promise.all([
        blog.map(post => asyncImportBlog(post)),
        projects.map(post => asyncImportProjects(post))
      ]).then(res => {
        return {
          blog: res[0],
          projects: res[1]
        };
      });
  },

And here's a CodeSandbox with that running: https://codesandbox.io/s/nuxt-markdown-blog-starter-g83c5

I'm trying to import the markdown files into the main index page. Any ideas?

Got it! Looks like wrapping the maps in a nested Promise.all gets the job done

return Promise.all([
    Promise.all(blog.map(post => asyncImportBlog(post))),
    Promise.all(projects.map(post => asyncImportProjects(post))),
  ]).then(results => {
    const [blogRes,projectRes] = results

    return {
      blog: blogRes,
      projects: projectRes
    };
  });