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

Question

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

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

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>
    )
  }
}

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

正如评论中所解释的，当您使用查询包装组件时，查询将在您的组件呈现时触发。

您可以manually fire the query 并根据需要管理数据。并且您还可以使用 refetch 方法使用包装器使用不同的变量再次触发查询。