Gridsome Pages API - передача объекта / массива в контексте - PullRequest
Новая
       63

Gridsome Pages API - передача объекта / массива в контексте

1 голос
/ 17 июня 2020

Я новичок в Gridsome (и GraphQL), и я хотел бы создать следующее. У меня есть прямое отношение сотрудников к проектам, и я хотел бы создать страницу для каждого сотрудника со списком всех проектов, над которыми работал этот сотрудник. Я создаю страницы с помощью 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
        }
      })
    })
  })

page-query в 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 довольно поверхностна.

1 Ответ

1 голос
/ 22 июня 2020

Хотя я не заставил фильтр работать, у меня есть решение для моего варианта использования. Довольно простой c материал, но, поскольку большинство вопросов 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 }}
...
...