如何在 Apollo 中将一张表关联到另一张表

Posted 2023-03-08

【中文标题】如何在 Apollo 中将一张表关联到另一张表

【英文标题】：How to associate one table to another in Apollo

【发布时间】：2019-09-21 03:02:54

【问题描述】：

我在一个数据库中有两个表。球队和联赛。通过 Apollo，我有一个 CREATE_TEAM_MUTATION 用于保存到数据库，还有一个 ALL_LEAGUES_QUERY 用于检索每个联赛名称以将选项填充为表单中的选择。

但是当我保存时，我得到了错误：

变量“$_v0_data”的值无效 "league":"","name":"Sample Team","number":1;预期类型 LeagueCreateOneInput 是 value.league 中的对象。

我想了解这里的数据流。我的意图是将所选联赛的 id 保存为 teams 表中每支球队的列条目（联赛）。

这是我在后端的 prisma 数据模型

type League 
  id: ID! @unique
  name: String!
  description: String


type Team 
  id: ID! @unique
  name: String!
  number: Int!
  league: League

这是我在后端的 createTeam Mutation：

async createTeam(parent, args, ctx, info)         
    // create the user in the database
    const team = await ctx.db.mutation.createTeam(
      
        data: 
          league: 
            connect: 
              id: ctx.request.leagueId
            
          ,
          ...args,          
        ,
      ,
      info
    );
    return team;
  ,

这是我来自前端的查询和变异：

const CREATE_TEAM_MUTATION = gql`
  mutation CREATE_TEAM_MUTATION(
    $name: String!
    $number: Int
    $league: String    
  ) 
    createTeam(
      name: $name
      number: $number
      league: $league      
    ) 
      id
    
  
`;

const ALL_LEAGUES_QUERY = gql`
  query ALL_LEAGUES_QUERY 
    leagues 
      id
      name
      description
    
  
`;

这是我的渲染（）：

render()     
    return (
      <Mutation mutation=CREATE_TEAM_MUTATION variables=this.state>
        (createTeam,  loading, error ) => (
          <Form
            onSubmit=async e => 
              // Stop the form from submitting
              e.preventDefault();
              // call the mutation
              const res = await createTeam();
              // change them to the single team page
              console.log(res);
              Router.push(
                pathname: '/team',
                query:  id: res.data.createTeam.id ,
              );
            
          >
            <Error error=error />
            <fieldset disabled=loading aria-busy=loading>              
              <label htmlFor="name">
                Name
                <input
                  type="text"
                  id="name"
                  name="name"
                  placeholder="Team Name"
                  required
                  value=this.state.name
                  onChange=this.handleChange
                />
              </label>

              <label htmlFor="number">
                Number
                <input
                  type="number"
                  id="number"
                  name="number"
                  placeholder="Team Number"                 
                  value=this.state.number
                  onChange=this.handleChange
                />
              </label>
              <label htmlFor="league">
                League
                <Query query=ALL_LEAGUES_QUERY>               
                  ( data, error, loading ) => 
                    console.log('data', data);
                    if (loading) return <p>Loading...</p>
                    if (error) return <p>Error... error.message</p>
                    return (                      
                      <select id="league"
                        name="league"
                        value=this.state.league
                        onChange=this.handleChange>
                        data.leagues.map((league) => (

                          <option key=league.id value=league.id>league.name</option> 
                        ))
                      </select>                                                                 
                    )
                  
                </Query>
              </label>              
              <button type="submit">Create Team</button>
            </fieldset>
          </Form>
        )
      </Mutation>
    );
  

【参考方案1】：

感谢 Slack 论坛的几个人，终于找到了答案。在这里发布它，希望它可以帮助遇到同样事情的其他人：

这是旧代码：

async createTeam(parent, args, ctx, info)         
    // create the user in the database
    const team = await ctx.db.mutation.createTeam(
      
        data: 
          league: 
            connect: 
              id: ctx.request.leagueId
            
          ,
          ...args,          
        ,
      ,
      info
    );
    return team;
  ,

这是新的：

const params = ...args;
    delete params.league;
    const team = await ctx.db.mutation.createTeam(
      
        data: 
          league: 
            connect: 
              id: args.league
            
          ,
          ...params          
        ,
      ,
      info
    );
    return team;
  ,

所以你看我有两个问题。

首先，id: ctx.request.leagueId 需要是 id: id: args.league

其次，我两次在联赛中传球。一次通过连接，再一次通过 ...args 传播。那是实际上导致错误的原因。因此，创建一个参数 var，将 args 传播传递给它，然后从参数中删除联赛，然后它就起作用了。