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

Question

我试图在react中使用表单输入，用graphql和apollo过滤我的mongodb数据库。我有后端设置和工作。我的前端大部分工作正常，但我无法在apollo查询中访问数据。不确定我遗漏了什么，所以不确定要问的确切问题。我只是在做一个搜索或查询，而不是变异。我的React应用程序中有3个组件，我正在使用样式化的组件。我只想捕获表单输入数据并将其存储在apollo查询中以供使用。我想打电话

我知道这是一个堆积如山的问题，所以如果你帮不上忙，也许你可以给我一些建议，告诉我如何更好地分小块提问。谢谢

一个pp.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>
    )
  }
}

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方法，使用包装器再次使用不同的变量触发查询。