Gridsome Pages API - 在上下文中传递对象/数组

Question

我是Gridsome(和GraphQL(的新手，我想构建以下内容。我有一个员工与项目的 n 到 n 关系，并希望为每个员工生成一个页面，列出该员工参与的所有项目。我使用页面 API 创建页面，这是可以工作的部分。但是，传递上下文/列出每个员工的项目是行不通的。

所有数据都在标记中，如下所示： 项目：

---
name: "Project 1"
...
---

员工：

---
name: "Employee 1" 
projects:
- name: "Project 1"
- name: "Project 2"
---

gridsome.server.js：

api.createPages(async ({ graphql, createPage }) => {
const { data } = await graphql(`{
allEmployee {
edges {
node {
id
name
projects {
name 
}
}
}
}
}`)
data.allEmployee.edges.forEach(({ node }) => {
createPage({
path: `/${node.name}`,
component: './src/templates/Employee.vue',
context: {
id: node.id,
name: node.name,
projectsWorkedOn: node.projects
}
})
})
})

Employee.vue 中的页面查询：

<page-query>
query EmployeeProjects ($projectsWorkedOn: [String]) {
allProject (filter: { name: { in: $projectsWorkedOn } } ) { //how to use the $projectsWorkedOn object here?
edges {
node {
id
name
}
}
}
}
</page-query>

现在这不起作用，至少我尝试将该对象用作数组，但我确信它还有其他问题。我希望有人能为我指出正确的方向，不幸的是，Gridsome文档很肤浅。

Answer 1

虽然我没有让过滤器工作，但我确实有一个针对我的用例的解决方案。非常基本的东西，但由于大多数 Gridsome 问题在 stackoverflow 上仍未得到解答，我发布它，希望有人发现它有用。

我只是查询所有内容，而不是在页面查询中进行过滤

<page-query>
query 
projects { allProject {
edges {
node {
id
title
content
}
}
}
}
</page-query>

然后使用辅助函数得到我想要的：

<script>
export default {
methods: {
getProjectDetails(id) {
return this.$page.allProject.edges.filter(edge => {
return edge.node.id === id
})
}
}
}
</script>

我可以像这样在模板中使用：

<span v-for="project in $context.projects" :key="project.id">
{{ getProjectDetails(project.id)[0].node.title }}
...