GraphQL 和 Apollo - 多重突变答案

【问题标题】：GraphQL and Apollo - Multiple MutationsGraphQL 和 Apollo - 多重突变
【发布时间】：2019-11-27 14:21:23
【问题描述】：

我正在开发一个使用 Auth0、Hasura/PostgreSQL、GraphQL 和 Apollo 的 React 应用程序，而且我很环保，所以我显然需要一些帮助。以下是我想要实现的目标：

用户提交表单以创建新团队。记录已添加到“teams”表中，现在我需要返回该 ID，以便在“teamstaff”表中创建一行。

表结构：

用户
- 身份证
- 姓名
- auth0_id
团队
- 身份证
- 姓名
- Created_By
团队人员
- 身份证
- 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;

我可以将一个新团队添加到数据库，但我需要帮助从新创建的团队获取 ID，以便我可以在“teamstaff”表中创建初始记录。另外，有没有更好的方法来构建我的表格？每个用户都可以分配到多个团队和每个团队的不同角色。

【问题讨论】：

标签： reactjs postgresql graphql apollo

【解决方案1】：

我知道这个问题很老了，但 Hasura 会为你处理这个问题（此时）。您只需提供与 User_Id 字段的关系的一侧

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

【讨论】：

【解决方案2】：

我不确定您是如何执行此突变的，但我假设您使用的是 Apollo 的 Mutation Component。这是一个如何获取最近添加记录的 ID 的示例：

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;

您可能已经注意到，我已更新您的查询以遵循属性的命名约定（是的，使用 camelCase），但此更改对最终结果没有影响。

如果您还没有阅读它，Apollo 文档中的Mutation Component section 谈到了很多重要的事情，比如更新缓存和处理错误，所以它是必读的！ ?

【讨论】：