[support] Can we import multiple post types in the asyncData promise?
chasebank opened this issue · 1 comments
chasebank commented
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?
chasebank commented
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
};
});