Gridsome Pages API - pass object/array in context

Question

I'm new to Gridsome (and GraphQL) and I'd like to build the following. I have a n-to-n relationship of Employees to Projects and would like to generate a page per employee, listing all the projects this employee worked on. I create the pages using the Pages API, which is the part that does work. However, passing the context / listing the projects per employee doesn't work.

All the data is in markup and looks like this: Projects:

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

Employees:

---
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 in 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>

Now that doesn't work, at the very least I'm trying to use the object as an array, but I'm sure there are other things wrong with it as well. I hope someone can point me in the right direction, unfortunately Gridsome documentation is quite shallow.

It looks like you're using `node.title` but aren't bringing title in with your node queries? — vanblart, Jun 18 '20 at 13:52
Thanks for pointing that out. I extracted the code above from my actual project and changed it to boil it down to a bit of a textbook problem and this was a typo. However, unfortunately that doesn't solve the problem.. — dan, Jun 19 '20 at 01:50
I see where you updated it - I was referring to the`gridsome.server.js` file (you also use it in your filter for the `page-query`). Regardless of that, could you not query your Employee in the `page-query` and make each node returned point the user to /project/{identifier}? (You may still have the same issue if you need to create a Project page which shows all Employees that worked on said project) — vanblart, Jun 19 '20 at 19:16
thanks.. I posted the solution I'm using for now. It does basically what I wanted the filter to do. My understanding of Vue/Graphql is pretty thin, the project is an attempt to learn more, so I don't expect my solutions to be the most elegant / straightforward for now.. — dan, Jun 22 '20 at 09:54

dan · Answer 1 · 2020-06-22T09:49:58.817

While I didn't get the filter to work, I do have a solution for my use-case. Pretty basic stuff, but since most Gridsome questions remain unanswered on stackoverflow I post it in the hope someone finds it useful.

Instead of filtering in the page query I just query everything

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

      }
    }
  }
}
</page-query>

and then get what I want with a helper function:

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

that I can use in the template like this:

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

Gridsome Pages API - pass object/array in context

1 Answers1