Как связать одну таблицу с другой в Аполлоне - PullRequest
Новая
       26

Как связать одну таблицу с другой в Аполлоне

0 голосов
/ 02 мая 2019

У меня есть две таблицы в БД. Команды и Лиги. Через Apollo у меня есть CREATE_TEAM_MUTATION для сохранения в db и ALL_LEAGUES_QUERY для извлечения каждого названия лиги для заполнения опций в виде выбора в форме.

Но когда я сохраняю, я получаю ошибку:

Переменная "$ _v0_data" получила недопустимое значение {"league": "", "name": "Sample Team", "number": 1}; Ожидаемый тип LeagueCreateOneInput будет объектом в value.league.

Я пытаюсь понять поток данных здесь. Мое намерение состоит в том, чтобы сохранить идентификатор выбранной лиги в виде записи столбца (лига) для каждой команды в таблице команд.

Вот моя модель данных призмы на заднем конце 

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

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

Вот моя мутация createTeam на заднем конце: 

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 Ответ

0 голосов
/ 03 мая 2019

Благодаря паре ребят на форумах 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

Во-вторых, я проходил в лигедважды.Один раз с подключением, и еще раз через ... распространение аргов.Именно это и стало причиной ошибки.Поэтому создайте переменную params, передайте ей распространение аргументов, затем удалите лигу из параметров, и тогда это сработало.

...