将变量从输入传递到GraphQL搜索调用 [英] Pass variable from input to GraphQL search call

问题描述

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

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.

我的代码在下面.

任何人都可以建议如何将两者连接起来吗?

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>

    )
}
}

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

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

这篇关于将变量从输入传递到GraphQL搜索调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！