2

我是 Gridsome（和 GraphQL）的新手，我想构建以下内容。我有员工与项目的 n 对 n 关系，并希望为每个员工生成一个页面，列出该员工从事的所有项目。我使用 Pages 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 文档很浅。

4

1 回答 1

2

虽然我没有让过滤器工作，但我确实为我的用例提供了解决方案。非常基本的东西，但由于大多数 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 }}
...
于 2020-06-22T09:44:36.850 回答