Получить состояние из формы выбора в дочернем компоненте с помощью Gatsby

Я кодирую приложение Gatsby с главной страницей и двумя компонентами. Значение из формы выбора будет использоваться для запроса базы данных Postgresql через запрос graphql.

Что я уже могу сделать: в компоненте формы я получаю значение из меню выбора и передаю его из этого дочернего компонента родительскому компоненту (главной странице). В компоненте данных я могу запросить базу данных с помощью graphql и получить результаты с жестко запрограммированными значениями.

Что я пока не могу сделать: получить значение из компонента выбора в компонент данных и использовать его в моем запросе graphql.

Я безуспешно пробовал разные способы получить значение, используя this.props.value1 или this.state.value1. Я также протестировал простой компонент, чтобы убедиться, что могу получить значение от родительского компонента к дочернему, и он работал без проблем. Проблема заключается в том, как я пытаюсь импортировать значение в запрашивающий компонент.

**//Data component**
let val = 88 //for hardcoded test. That works.

const DataPage = () => {
  const data = useStaticQuery(query)
  return (
    <div>
      <p>From Postgres: {data.postgres.allEstivalsList[val].nbr}</p>
    </div>
  )
}

const query = graphql`
{
  postgres {
    allAveragesList {
     avg
    }
     allEstivalsList {
      year
      nbr
    }
  }
}
`;

export default DataPage; 

**//Main page**
export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    value1: null,
    // other values
  }

  render() {
        return (
          <div>
            <p>Get state in main page: {this.state.value1}</p>
            <DataPage val = {this.state.value1} />
            <SelectForm clickHandler={y => { this.setState({ value1: y }); }} />
          </div>
        )
    }
}

**//Form component**

export default class IndexPage extends React.Component {
  state = {
    value1: null,
  }

  handleClick = () => {
    this.props.clickHandler(this.state.value1);

    this.setState(prevState => {
      return { value1: prevState.value1 };
    });
  };

  render() {
    return (
      <Formlayout>                                    
      <p>Test -- Value for the selected year: {this.state.value1}</p>
      <select onChange = {(e) => this.setState({ value1: e.target.value })}>
      <option value="">-- Year --</option>
      <option value="1">1901</option>
      <option value="2">1902</option>
      <option value="3">1903</option>
      </select>
      <button onClick={this.handleClick}>Go!</button>
      </Formlayout>
    )
  }
}

Я был бы признателен за указания, как получить значение select в компоненте данных. Поскольку моя тестовая переменная val эффективно работает при использовании в запросе, я бы хотел применить к этой переменной состояние из компонента. И вот где я застрял прямо сейчас.


gatsby graphql
person Plouf    schedule 08.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Запрос GraphQL выполняется во время сборки, а не во время выполнения. Посмотрите документацию, можно запрашивать данные при сборке и во время выполнения.

https://www.gatsbyjs.org/docs/client-data-fetching/ < / а>

// редактировать

Обычно вы должны предварительно сгенерировать все (статические) страницы с контентом - например, если у вас есть данные за 50 лет, вы позволяете Гэтсби построить эти 50 страниц, а затем вы можете перемещаться по пути к странице.

Если вы хотите передать переменную в запрос, проверьте документы: https://www.gatsbyjs.org/docs/graphql-reference/#query-variables

query GetBlogPosts(
  $limit: Int, $filter: MarkdownRemarkFilterInput, $sort: MarkdownRemarkSortInput
) {
    allMarkdownRemark(
    limit: $limit,
    filter: $filter,
    sort: $sort
  ) {
    edges {
      node {
        frontmatter {
          title
          date(formatString: "dddd DD MMMM YYYY")
        }
      }
    }
  }
}
person wiesson    schedule 10.08.2019
comment
Я этого не знал, спасибо. Но сначала я хотел бы найти способ получить this.props.value1 в этом компоненте, а затем использовать его в запросе. В классе это несложно, но здесь я не могу найти правильный путь. - person Plouf; 10.08.2019
comment
Я использовал graphql с gatsby только во время сборки, а не во время выполнения. В вашем случае я бы ожидал, что у вас есть какой-то интерфейс graphql или rest для извлечения данных. Также было бы полезно, если бы вы назвали реквизит по назначению. Например. год вместо этого, если значение1 :) - person wiesson; 10.08.2019
comment
Нейминг: правда, я это изменю. Статический: здесь у меня есть 150 лет для нескольких местоположений, поэтому, возможно, создание всех страниц может быть слишком загруженным. Мне не хватает того, чтобы уловить значение, исходящее от родителя, и повлиять на него в этой переменной. Я понятия не имею, как это сделать. - person Plouf; 10.08.2019
comment
Так вот как должен работать Гэтсби! Предварительно сгенерируйте весь контент, чтобы не было обращений к базе данных, и доставляйте как можно больше предварительно обработанного HTML. Я поддерживаю страницу с более чем 1000 сгенерированными страницами, и если кто-то сделает обновление, мы просто повторно развернем все это - person wiesson; 11.08.2019