Build Sports Team API with GraphQL - Hasura - Part 3

This post is part of a series of post and so if you haven't read the previous one, please read that and come back and we will wait :)

Objectives of this post

1. Introduction
2. What is one-to-many relationship
3. Adding Column in support staff table
4. Adding Foreign key to the column
5. Adding array relationship
6. Populate Data
7. Querying the data using GraphQL

Introduction

In the previous post, we learned how to create a support_staff table and creating a one-to-one relationship with the teams table.

BUILD SPORT TEAM API WITH GRAPHQL - HASURA - PART 2

In this post, we will learn about creating a one-to-many relationship and how to add more support staff who are working for the team. This will help us in understanding the one-to-many relationship.

What is one-to-many relationship

For our team, there can be multiple support staff who are working and for each support staff there is only one team. This relationship is called one to many relationship and can be expressed by adding foreign key to the table and creating array relationship in Hasura

Adding column in support staff table

Since we want to have array relationship, we need to mention that each support staff can belong to a team. This will ensure we can add as many support staff to any team. So we need to add a new column to the support_staff table.

Column Name: team_id, Type: Integer, Nullable: True

We are setting the nullable as true in order to add some support staff who are not part of any team.

Adding Foreign key to the column

We have added a new column and now we have to say that this column is a foreign key which refers a row in another table. So open the Modify tab and go to the foreign key section in support_staff table

Add a new foreign key with linking the id column of the teams table.

Adding array relationship

Finally, we need to add the relationship to the teams table so that it can identify the support staff and we can retrive all the support staff members in a single query

Open the Relationships tab in the teams table and you can find a suggestion for Array Relationship. Add the new array relationship and name the field as support_staffs

Populate Data

We can add some support staff to the table and then set the team_id column to a corresponding id of the team from the teams table

Querying the data using GraphQL

Once we have added the data and relationships, we have added a new field to the teams query called support_staffs and we can use this field to get the data of all the support staff associated with that particular team

query MyQuery {
  teams {
    team_name
    support_staffs {
      staff_name
      staff_type
      age
    }
  }
}


OUTPUT:
{
  "data": {
    "teams": [
      {
        "team_name": "Australia Cricket Team",
        "support_staffs": [
          {
            "staff_name": "Staff 7",
            "staff_type": "Batting Coach",
            "age": 32
          }
        ]
      },
      {
        "team_name": "Indian Cricket Team",
        "support_staffs": [
          {
            "staff_name": "Staff 4",
            "staff_type": "Batting Coach",
            "age": 43
          },
          {
            "staff_name": "Staff 5",
            "staff_type": "Bowling Coach",
            "age": 43
          },
          {
            "staff_name": "Staff 6",
            "staff_type": "Fielding Coach",
            "age": 42
          }
        ]
      },
      {
        "team_name": "England Cricket Team",
        "support_staffs": [
          {
            "staff_name": "Staff 8",
            "staff_type": "Bowling Coach",
            "age": 35
          }
        ]
      }
    ]
  }
}

Next Steps

In the next post, we will add the much awaited players to the data and learn about one-to-many relationship in the process.

Stay tuned by subscribing to our mailing list and joining our Discord community

Discord