Переменная карты перед выполнением мутации Apollo - PullRequest
Новая
       36

Переменная карты перед выполнением мутации Apollo

0 голосов
/ 16 декабря 2018

Я следовал этому руководству , чтобы запустить приложение React с Apollo.

Сейчас я нахожусь на этапе запуска мутации, которую я успешно сделал, ноЯ пытаюсь выполнить более сложное.

Итак, одно из полей, ожидаемых в этой мутации, является отношением, ожидающим набор данных connect , который должен быть примерно таким:

tags: {
  connect: [{
   id: "cjoo9e0eq004d0824nibmtzl2"
  },
  {
   id: "cjoopece2000a0899n8jsjkr4"
  },
  {
   id: "cjozmqfal00040878t7huvb2s"
  },
  {
   id: "cjozmsquv000l0878y7t2zccm"
  }],
},

Для этого поля тегов во внешнем интерфейсе я показываю множественный выбор, поэтому значение будет представлять собой массив идентификаторов: ["cjoo9e0eq004d0824nibmtzl2", "cjoopece2000a0899n8jsjkr4" ...].

Поскольку мутация ожидает, что это поле будет массивом объектов с идентификаторами, я пытаюсь каким-то образом отобразить эту строку, чтобы преобразовать ее в ожидаемый формат, но мне не повезло.Я не знаю, где я могу преобразовать эту переменную до того, как будет выполнена мутация.

Похоже на сложную проблему для объяснения, я надеюсь, что объяснение достаточно ясное.

Любая помощь будет чрезвычайноприветствуется!

Изменить, чтобы добавить код: 

const CREATE_VIDEO_MUTATION = gql`
  mutation CreateVideoMutation($title: String!, $tags: [TagWhereUniqueInput!]) {
    createVideo(
      data: {
        title: $title, 
        tags: {
          connect: $tags
        }
      }
    ) {
      id
      title
    }
  }
`

class CreateVideo extends Component {
  state = {
    title: '',
    tags: [],
  }

  render() {
    const { title, tags } = this.state;
    return (
        .....

      <select multiple 
        className="mb2" 
        value={tags}
        onChange={e => {
          this.setState({ tags: [...e.target.options]
            .filter(({selected}) => selected)
            .map(({value}) => value) })
        }}>
        {tagsToRender.map(tag => {
          return (
            <option key={tag.id} value={tag.id}>
              {tag.name}
            </option>
          )
        })}
      </select>

      <Mutation 
        mutation={CREATE_VIDEO_MUTATION} 
        variables={{ title, tags }}
        onCompleted={() => this.props.history.push('/')}>
        {createVideoMutation => <button onClick={createVideoMutation}>Submit</button>}
      </Mutation>

1 Ответ

0 голосов
/ 16 декабря 2018

Ниже следует сделать это. 

const _tags = tags.map(tag => ({id}))

<Mutation 
    mutation={CREATE_VIDEO_MUTATION} 
    variables={{ title, tags: _tags }}
    onCompleted={() => this.props.history.push('/')}>
    {createVideoMutation => <button onClick={createVideoMutation}>Submit</button>}
  </Mutation>
...