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

Question

我正在尝试在反应中使用表单输入来使用 graphql 和 apollo 过滤我的 mongodb 数据库。我有后端设置和工作。除了无法在 apollo 查询中访问我的数据外，我的前端大部分时间都在工作。不确定我遗漏了什么，所以不确定要问的确切问题。我只是在进行搜索或查询，而不是突变。我的 React 应用程序中有 3 个组件，我正在使用样式组件。我只是想捕获表单输入数据并将其存储在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

如评论中所述，当您使用查询包装组件时，组件呈现时将触发查询。

您可以 manually fire the query and manage data as you wish. And you can also use the refetch 使用包装器的方法使用不同的变量再次触发查询。

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

Can't Filter GraphQL query with Apollo and display database data object

reactjs

graphql

react-apollo

apollo-client