GraphQL and Apollo - Multiple Mutations

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