GraphQL join-like query custom schema and resolvers

[mbwatson]

Preliminaries

I have received excellent assistance from the Gatsby community in the past, and I'm hoping this is another situation that someone can easily resolve for me. Suppose I have two types of data--people and teams--in YAML files in my './data directory.

People files look like the following:

id: alice-albertson
name: Alice Albertson
bio: >
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.

Teams YAML files look like this:

id: team-awesome
name: Team Awesome
description: >
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Temporibus ipsam provident quasi soluta ex fugit, asperiores
  itaque voluptas. Cupiditate nisi enim eius rem tempore
  debitis eum impedit fugiat nostrum magnam.
members:
  - alice-albertson
  - bob-bobberson

Then I can grab teams and their members with a query like this:

{
  allTeamsYaml {
    edges {
      node {
        id
        name
        members {
          id
          name
        }
      }
    }
  }
}

which results in data like this:

{
  "data": {
    "allTeamsYaml": {
      "edges": [
        {
          "node": {
            "id": "team-awesome",
            "name": "Team Awesome",
            "members": [
              {
                "id": "alice-albertson",
                "name": "Alice Albertson"
              },
              {
                "id": "bob-bobberson",
                "name": "Bob Bobberson"
              }
            ]
          }
        },
        {
          "node": {
            "id": "team-mediocre",
            "name": "Team Mediocre",
            "members": [
              {
                "id": "alice-albertson",
                "name": "Alice Albertson"
              },
              {
                "id": "carl-carlson",
                "name": "Carl Carlson"
              }
            ]
          }
        }
      ]
    }
  }
}

Perfect! I can also do the reverse mapping--that is, getting all teams to which people belong. These are all achieved through mapping definitions in gatsby-config.js and customSchemaCustomization & createResolvers in gatsby-node.js. Details for accomplishing this can be found in this issue #25077 I asked earlier this year.

Question

Now, I need to do something new: Each person on each team needs a role, e.g., "leader." People possibly have different roles on each team, thus I would like to format my team data files like the following:

id: team-awesome
name: Team Awesome
description: >
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Temporibus ipsam provident quasi soluta ex fugit, asperiores
  itaque voluptas. Cupiditate nisi enim eius rem tempore
  debitis eum impedit fugiat nostrum magnam.
members:
  - id: alice-albertson
    role: Leader
  - id: bob-bobberson
    role: Secretary

This doesn't mesh with my mapping and createschemaCustomization/createResolvers solution described above, as my goal is to have each member's role returned along with their other details. That is, I'd like the results returned from a query like this:

{
  allTeamsYaml {
    edges {
      node {
        id
        name
        members {
          id
          name
          role
        }
      }
    }
  }
}

to give data that looks like this:

{
  "data": {
    "allTeamsYaml": {
      "edges": [
        {
          "node": {
            "id": "team-awesome",
            "name": "Team Awesome",
            "members": [
              {
                "id": "alice-albertson",
                "name": "Alice Albertson",
                "role": "Leader"
              },
              {
                "id": "bob-bobberson",
                "name": "Bob Bobberson",
                "role": "Secretary"
              }
            ]
          }
        },
        {
          "node": {
            "id": "team-mediocre",
            "name": "Team Mediocre",
            "members": [
              {
                "id": "alice-albertson",
                "name": "Alice Albertson",
                "role": "Vice President"
              },
              {
                "id": "carl-carlson",
                "name": "Carl Carlson",
                "role": "President"
              }
            ]
          }
        }
      ]
    }
  }
}

I would appreciate any guidance toward achieving this functionality. This is starting to make me wonder if I should move to a relational database, as this feels like a simple JOIN would take care of, but I bet this is a common situation people have solved with GraphQL.

[muescha]

I think you look for an many-to-many relationship

Remove the members from team yaml and a new relationship yaml with items of:

- 
  team_id: team-awesome
  member_id: alice-albertson
  role_type: Leader
-
  team_id: team-awesome
  member_id: bob-bobberson
  role_type: Secretary

[muescha]

I am not sure but maybe you can do this in the team yaml with this syntax:

members:
  - 
    id: alice-albertson
    role: Leader
  - 
    id: bob-bobberson
    role: Secretary

[mbwatson]

thanks for your reply! before i saw your response, i worked out a non-built-in solution in gatsby-node.js that looks like the following:

exports.createResolvers = ({ actions, createResolvers }) => {
  // ...
  const resolvers = {
    TeamsYaml: {
      members: {
        type: ["PeopleYaml"],
        resolve(source, args, context, info) {
          if (!source.members) { return [] }
          const memberIds = source.members.map(member => member.id)
          // console.log(source.members.map(({ id, role }) => `${ id } (${ role })`))
          return context.nodeModel.getNodesByIds({ ids: memberIds })
            .map(node => {
              const index = source.members.findIndex(member => member.id === node.id)
              if (index === -1) {
                return node
              }
              return ({ ...node, role: source.members[index].role })
            })
        }
      },
    },
    // ...
  }
  createResolvers(resolvers)
}

this gives me exactly what i need.

what obvious problems might i be facing in the future if i leave it with the solution i've implemented? possibly a performance hit at build-time?