GraphQL and Apollo - Multiple Mutations - reactjs

Question

I'm working on a React app that is using Auth0, Hasura/PostgreSQL, GraphQL and Apollo and I'm very green so I obviously need some help. Below is what I'm trying to achieve:
A user submits the form to create a new team. The record is added to 'teams' table and now I need to return that Id so I can create a row inside 'teamstaff' table.
Table Structures:
Users
Id
Name
auth0_id
Teams
Id
Name
Created_By
Teamstaff
Id
User_Id
Team_Id
Role_Id
import gql from "graphql-tag";
const insertTeam = gql `
mutation ($name: String!, $gender: String!, $birth_year: Int!, $created_by: String!) {
insert_teams(objects: {name: $name, gender: $gender, birth_year: $birth_year, created_by: $created_by}) {
affected_rows
returning {
id
name
gender
birth_year
created_by
}
}
}
`;
export default insertTeam;
I'm able to add a new team to the DB but I need help on getting the Id from that newly created team so I can create the initial record in the 'teamstaff' table. Also, is there a better way of structuring my tables? Each user can be assigned to multiple teams and different roles for each team.

Answer 1

I'm not sure how you're performing this mutation, but I'll assume that you're using Apollo's Mutation Component. This is an example of how you could get the ID of the recently added record:
import React from "react";
import gql from "graphql-tag";
import { Mutation } from "react-apollo";
const INSERT_TEAM = gql `
mutation InsertTeam($name: String!, $gender: String!, $birthYear: Int!, $createdBy: String!) {
insertTeam(objects: {name: $name, gender: $gender, birthYear: $birthYear, createdBy: $createdBy}) {
affectedRows
returning {
id
name
gender
birthYear
createdBy
}
}
}
`;
const onInsertTeamCompleted = ({ insertTeam }) => {
console.log(insertTeam.returning.id); // Here you have your ID
}
const Screen = () => (
<Mutation mutation={INSERT_TEAM} onCompleted={onInsertTeamCompleted}>
{(insertTeam, { data }) => { // Through data, you can also access data.insertTeam results.
const onInserTeam = () => {
insertTeam({ variables: {name: "Mary", gender: "Female", birthYear: 1990} });
};
return (
<button onClick={onInserTeam}>Insert demo team</button>
);
})}
</Mutation>
)
export default Screen;
As you might have noticed, I've updated your query to follow the naming conventions for attributes (yep, using camelCase), but this change has no impact on the final result.
If you've not read it already, the Mutation Component section in Apollo docs talks about a lot of important things like updating the cache and handling errors, so it's a must-read! 😉

Answer 2

I know this question is old, but Hasura will handle this for you (at this point).
You just need to supply one side of the relationship with the User_Id field
https://docs.hasura.io/1.0/graphql/manual/mutations/insert.html#insert-an-object-along-with-its-related-objects-through-relationships
mutation($name: String!, $gender: String!, $birth_year: Int!, $created_by: String, $user_id: String!) {
insert_teams(
objects: {
TeamStaff: {
data: {
User_Id: $user_id
}
},
name: $name,
gender: $gender,
birth_year: $birth_year,
created_by: $created_by }
) {
affected_rows
returning {
id
name
gender
birth_year
created_by
}
}
}