无法使用Apollo筛选GraphQL查询并显示数据库数据对象

我正在尝试使用react中的表单输入来过滤带有graphql和apollo的mongodb数据库。我有后端设置和工作。我的前端大部分工作,除了我不能访问我的数据在阿波罗查询。不知道我遗漏了什么,所以不确定要问的确切问题。我只是在做一个搜索或查询,而不是变异。我的React应用程序中有3个组件,我使用的是样式化组件。我只想捕获表单输入数据并将其存储在apollo查询中以供使用。我想打电话 <h1>{data.herb.name}</h1> 从我的阿波罗服务器上获取数据对象。

我知道这是一个完整的堆栈问题,所以如果你不能帮助,也许你可以给我一些建议,如何更好地问这个在较小的块。谢谢。

应用程序.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>
  )
 }
}

主页.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>
    )
  }
}

搜索.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
    }
  }
`