ReactJS / Apollo / Graphql: блокировать data.refetch w / @skip до тех пор, пока не будет нажата кнопка onSubmit, но повторное получение будет доступно - PullRequest
Новая
       32

ReactJS / Apollo / Graphql: блокировать data.refetch w / @skip до тех пор, пока не будет нажата кнопка onSubmit, но повторное получение будет доступно

0 голосов
/ 01 ноября 2018

После некоторой отладки я обнаружил, что при загрузке страницы @skip делает то, что я хочу, что блокирует выполнение запроса при загрузке страницы. Однако при нажатии кнопки отправки приложение вылетает.

Я не понимаю, почему начало и конец не определены?

variables: {start: undefined, end: undefined, skipFi: true}

Если я удалю skipF: true из следующего, приложение будет работать нормально: 

export default graphql(getObjQ, { 
    options: (props) => ({ 
        variables: { 
            start: props.start,
            end: props.end,
            skipF: true

        } 
    })         
)(Comp);

Я пытаюсь применить концепцию из h ere к моему приложению: 

 export default graphql(gql`
        query SearchQuery($query: String, $first: Int, $skip: Boolean!) {
            search(query: $query, first: $first) @skip(if: $skip) {
                edges {
                    ....
                }
            }
        }
    `,  { options: {variables: { skip: true } }})(Input);

Функция handleSubmit выглядит следующим образом: 

handleSubmit = event => {
        event.preventDefault();



        this.setState({
          errMsg: "",
          start: new Date(document.getElementById("start").value).valueOf(),
          end: new Date(document.getElementById("end").value).valueOf(),
          submit: true,




        }, () => {
          this.props.data.refetch({
            start: this.state.start,
            end:this.state.end,


          });

Запрос выглядит так, который находится в отдельном файле / компоненте: 

    const Query =gql`
      query getObjQ($start: Float!, $end: Float!, $skipF: Boolean!

) 

  {

    abs(start: $start,  end:$end) @skip(if: $skipF)

1 Ответ

0 голосов
/ 01 ноября 2018

Слишком много «движущихся частей» - сначала попробуйте ввести жестко закодированные значения: 

handleSubmit = event => {
  event.preventDefault();

  this.props.data.refetch({
    start: XXXXXXXXXXX,
    end: YYYYYYYYY,
    skipF: false
  });
}

UPDATE:

метод отладки options параметров (возвращаемый объект): 

export default graphql(getObjQ, { 
  options: (props) => {
    console.log(props.start);
    return { 
      variables: { 
        start: props.start,
        end: props.end,
        skipF: true
      } 
    }
  }
})(Comp);
...