Question

我正在学习graphql和react-apollo。我在我的代码中设置了一个搜索查询。我不确定如何将代码中的变量（即this.state.search）传递给我的grapnql调用。

我看过许多答案，包括this one，但似乎有点不同。

The docs also don't seem提供有关如何将状态用作变量的任何指导。

我的代码如下。

有人可以建议如何连接这两种吗？

import React, { Component} from 'react'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'

class Search extends Component {

  constructor(props) {
    super(props)
    this.state = {
      search: ''
    }
  }

  updateSearch = (e) => {
    this.setState({
      search: e.target.value
    })
  }

  submitSearch = (e) => {
    e.preventDefault()
    console.log(this.state)
  }

  render() {

    const { search } = this.state;

    return (
      <form onSubmit={ this.submitSearch }>
        <input 
          type='text'
          onChange={ this.updateSearch }
          value={ search }
          placeholder='Search'    
        />
      </form>
    )
  }
}


export default graphql(gql`
{
  search(query: "Manchester", type: TEAM) {
    name
  }
}`)(Search)

Answer 1

您需要将其拆分为至少两个组件。一个保存用户搜索的状态，另一个实际通过获取prop来进行查询。此外，如果提交表单而未输入内容，则可以让apollo高阶组件跳过查询。

import React, {Component} from 'react'
import {graphql} from 'react-apollo'
import gql from 'graphql-tag'

class Results extends Component {
   render() {
    // apollo provides results under the data prop
    const {data} = this.props;
    return <h1>{data.search.namej}</h1>
   }
}

const ResultsWithQuery = graphql(gql`
query FindTeam($query: String!) {
    search(query: $query, type: TEAM) {
        name
    }
}
`, {skip: (ownProps) => !ownProps.query})(Results);

export class Search extends Component {

constructor(props) {
    super(props)
    this.state = {
        search: ''
    }
}

updateSearch = (e) => {
    this.setState({
        search: e.target.value
    })
}

submitSearch = (e) => {
    e.preventDefault()
    console.log(this.state)
}

render() {

    const {search} = this.state;

    return (
        <div>

        <form onSubmit={this.submitSearch}>
            <input
                type='text'
                onChange={this.updateSearch}
                value={search}
                placeholder='Search'
            />
            <ResultsWithQuery query={search} />
        </form>
        </div>

    )
}
}

*更新* 现在已经发布了react-apollo@2.1，还有一种使用渲染道具的替代方法。

https://www.apollographql.com/docs/react/essentials/get-started.html#request

这简化了在这种情况下您需要的组件数量。

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

const SearchQuery = gql`
query FindTeam($query: String!) {
  search(query: $query, type: TEAM) {
    name
  }
}
`;

export default class Search extends Component {

constructor(props) {
    super(props)
    this.state = {
        search: ''
    }
}

updateSearch = (e) => {
    this.setState({
        search: e.target.value
    })
}

submitSearch = (e) => {
    e.preventDefault()
    console.log(this.state)
}

render() {

    const { search } = this.state;

    return (
        <form onSubmit={ this.submitSearch }>
            <input
                type='text'
                onChange={ this.updateSearch }
                value={ search }
                placeholder='Search'
            />
            <Query query={SearchQuery} skip={!search} variables={{query: search}}>
               {({loading, error, data}) => {
                    if (loading) return null;
                    if (error) throw err;
                   return <h1>{data.search.namej}</h1>
                }}
            </Query>
        </form>
    )
}
}

将变量从输入传递给grapql搜索调用

1 个答案: