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

本文介绍了将变量从输入传递给 GraphQL 搜索调用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我看了很多答案，包括这个，但似乎有点不同.

文档似乎也没有给出关于如何使用状态作为变量的任何指导.

我的代码如下.

谁能建议如何连接这两者?

import React, { Component} from 'react'从'react-apollo'导入{graphql}从'graphql-tag'导入gql类搜索扩展组件{构造函数(道具){超级(道具)this.state = {搜索: ''}}updateSearch = (e) =>{this.setState({搜索:e.target.value})}submitSearch = (e) =>{e.preventDefault()控制台日志(这个状态)}使成为() {const { 搜索 } = this.state;返回 (<form onSubmit={ this.submitSearch }>

解决方案

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

* 更新 *现在 [email protected] 已经发布，有另一种使用渲染道具的方法.

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 [email protected] 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 搜索调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！