您至少需要将其拆分为两个组件.一个保存用户搜索内容的状态，然后另一个通过获取道具实际进行查询.此外，如果表单是在未输入任何内容的情况下提交的，您可以让 apollo 高阶组件跳过查询.

import React, {Component} from 'react'从反应阿波罗"导入 {graphql}从'graphql-tag'导入gql类结果扩展组件{使成为() {//apollo 在 data 属性下提供结果const {data} = this.props;返回 
{data.search.namej}
}}const ResultsWithQuery = graphql(gql`查询 FindTeam($query: String!) {搜索(查询:$ 查询，类型:团队){名称}}`, {跳过: (ownProps) =>!ownProps.query})(结果);导出类搜索扩展组件{构造函数(道具){超级(道具)this.state = {搜索: ''}}updateSearch = (e) =>{this.setState({搜索:e.target.value})}submitSearch = (e) =>{e.preventDefault()控制台日志(这个状态)}使成为() {const {search} = this.state;返回 (<div><form onSubmit={this.submitSearch}>
)}}

* 更新 *现在 react-apollo@2.1 已经发布，有另一种使用渲染道具的方法.

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

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

import React, { Component} from 'react'从'react-apollo'导入{查询}从'graphql-tag'导入gqlconst SearchQuery = gql`查询 FindTeam($query: String!) {搜索(查询:$ 查询，类型:团队){名称}}`;导出默认类搜索扩展组件{构造函数(道具){超级(道具)this.state = {搜索: ''}}updateSearch = (e) =>{this.setState({搜索:e.target.value})}submitSearch = (e) =>{e.preventDefault()控制台日志(这个状态)}使成为() {const { 搜索 } = this.state;返回 (<form onSubmit={ this.submitSearch }>{如果(加载)返回空值；如果(错误)抛出错误；返回 
{data.search.namej}
}}</查询></表单>)}}

I am in the process of learning graphql and react-apollo. I have set up a search query in my code. I am unsure how to pass a variable from my code (i.e. this.state.search) to my grapnql call.

I have looked at many answers including this one, but it seems a bit different.

The docs also don't seem to give any guidance on how to use state as the variable.

My code is below.

Can anyone advise how to connect both of these?

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)

You'll want to split this up into at least two components. One that holds the state of what the user searched, then another that actually does the querying by getting a prop. Additionally you can have the apollo higher order component skip the query if the form was submitted without entering something.

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>

    )
}
}

* UPDATE * Now that react-apollo@2.1 has been released there is an alternative way using render props.

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

This simplifies the number of components you need in this case.

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