将变量从输入传递到 GraphQL 搜索调用

Posted 2023-03-08

【中文标题】将变量从输入传递到 GraphQL 搜索调用

【英文标题】：Pass variable from input to GraphQL search call

【发布时间】：2018-08-20 15:58:27

【问题描述】：

我正在学习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)

【参考方案1】：

您需要将其拆分为至少两个组件。一个保存用户搜索的状态，然后另一个通过获取道具实际进行查询。此外，如果表单在未输入内容的情况下提交，您可以让 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>
    )

【讨论】：

这是唯一的方法吗？

将 prop 作为查询参数传递给 apollo 高阶组件？是的，这是根据用户输入编写动态查询的唯一方法。 如何传递道具（使用 redux，无论是上下文）取决于你。

感谢您的回答，您必须为此创建一个额外的组件似乎有点矫枉过正