Не удается отфильтровать запрос GraphQL с помощью Apollo и отобразить объект данных базы данных

Question

Я пытаюсь использовать ввод формы в реакции, чтобы отфильтровать мою базу данных mongodb с помощью GraphQL и Apollo. У меня настроен и работает бэкэнд. У меня в основном работает интерфейс, за исключением того, что я не могу получить доступ к своим данным в запросе apollo. Не уверен, что мне не хватает, поэтому не уверен, точный вопрос, чтобы задать. Я просто делаю поиск или запрос, а не мутацию. У меня есть 3 компонента в моем приложении React, и я использую styled-компоненты. Я просто хочу захватить входные данные формы и сохранить их в запросе apollo для использования. Я хочу позвонить <h1>{data.herb.name}</h1> и получить объект данных с моего сервера Apollo.

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

App.js

import React, { Component } from 'react'
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'
import { BrowserRouter as Router, Route, Switch } from 'react-route-dom'

import Home from './components/Home'
import Herb from './components/Herb'

const client = new ApolloClient({
 uri: 'http://localhost:4000/graphql',
})

export default class App extends Component {
 render() {
   return (
    <ApolloProvider client={client}>
     <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/:herbId" component={Herb} />
      </Switch>
     </Router>
    </ApolloProvider>
  )
 }
}

Home.js

import React, { Component } from 'react'
import styled from 'styled-components'

import SearchInput from './Search'
import Herb from './Herb'
import bgImage from '../Elements/images/measure_colorized.jpg'

const HomeContainer = styled.div`
  width: 100vw;
  height: 100vh;
  background: url(${bgImage});
  background-size: cover;
  background-repeat: no-repeat;
`

const Title = styled.h1`
  font-size: 6rem;
  color: #fff;
`

export default class Home extends Component {
  state = { name: '' }

  handleInput = e => {
    const formData = {}
    formData[e.target.name] = e.target.value
    this.setState({ ...formData })
  }

  render() {
    const { name } = this.state
    return (
      <HomeContainer>
        <header>
          <Title>Measure App</Title>
        </header>
        <SearchInput name={name} onChangeValue={this.handleInput} />
        <Herb name={name} />
      </HomeContainer>
    )
  }
}

Search.js

import React, { Component, Fragment } from 'react'
import styled from 'styled-components'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'

const SearchInput = styled.input`
  background: rgba(0, 0, 0, 0.6);
  width: 30vw;
  padding: 1rem;
  font-size: 1.6rem;
  color: white;
  border: none;
`

const SubmitBTN = styled.button`
  padding: 1rem;
  font-size: 1.6rem;
  border: none;
  background: #7ff2ca;
`

export default class Search extends Component {
  handleSubmit = e => {
    e.preventDefault()
  }

  render() {
    const { name, onChangeValue } = this.props
    return (
      <div>
        <Query query={GET_HERB_QUERY} variables={{ name }}>
          {(data, loading, error) => {
            if (loading) return 'Loading...'
            if (error) return `Error: ${error.message}`
            console.log(data)
            return (
              <Fragment>
                <SearchInput
                  name="name"
                  type="text"
                  placeholder="search"
                  value={name}
                  onChange={onChangeValue}
                />
                <SubmitBTN onClick={this.handleSubmit}>convert</SubmitBTN>
              </Fragment>
            )
          }}
        </Query>
      </div>
    )
  }
}

//writing query to fetch herb that matches search result
const GET_HERB_QUERY = gql`
  query searchHerbs($name: String) {
    herb(name: $name) {
      name
      description
      imageURL
    }
  }
`

Answer 1

Как объяснено в комментарии, когда вы оборачиваете свой компонент запросом, запрос будет запущен, когда ваш компонент рендерится.

Вы можете вручную запустить запрос и управлять данными по своему усмотрению. И вы также можете использовать метод refetch , используя оболочку, чтобы снова инициировать запрос с другими переменными.